Marquee

让展示性内容连续移动。

实时预览

正在加载预览…

参数配置

速度 speed反向 reverse否运行 active

全部字段 13

MarqueeOptions

Label

Vertical

Reverse

Orientation

PauseOnHover

Speed

Gap

Height

Active

Overlay

ContentKey

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
// Keep s (example state) outside the view. See the complete example.
nui.Marquee(c.Key("marquee"), t, &s.Marquee, nui.MarqueeOptions{Label: "Technologies", Height: 100, Speed: float32(35), PauseOnHover: true, Reverse: false, Active: nui.Optional[bool]{}}, func() {
	for _, name := range []string{"Go", "MyGo", "NuxtUI", "WASM"} {
		nui.Badge(c.Key(name), t, name, nui.BadgeOptions{Variant: nui.Soft, Size: nui.LG})
	}
})

使用说明

调整滚动速度与方向，将指针移入区域可暂停。Active 控制运行状态，系统减少动态效果设置也会影响动画；内容是四个固定标签。

API 参考

Marquee

源码

func Marquee(c *ui.Context, t Theme, s *MarqueeState, o MarqueeOptions, content func()) ui.Element

MarqueeOptions

源码

type MarqueeOptions struct {
	Label              string
	Vertical, Reverse  bool
	Orientation        Orientation
	PauseOnHover       bool
	Speed, Gap, Height float32
	Active             Optional[bool]
	// Overlay fades the content in and out at both edges; defaults to true.
	Overlay Optional[bool]
	// ContentKey resets the phase when content changes. Children must be presentation-only.
	ContentKey string
	Decoration
}

字段	类型	说明
`Label`	`string` Go 零值: `""`	控件标签或可访问名称。
`Vertical`	`bool` Go 零值: `false`	启用纵向排列。
`Reverse`	`bool` Go 零值: `false`	反向移动或反向解释进度。
`Orientation`	`Orientation` Go 零值: `zero value`	水平或垂直方向；未设置时使用组件默认方向。
`PauseOnHover`	`bool` Go 零值: `false`	悬停时暂停移动。
`Speed`	`float32` Go 零值: `0`	每秒移动的距离。
`Gap`	`float32` Go 零值: `0`	相邻内容之间的间距。
`Height`	`float32` Go 零值: `0`	高度，单位为 DIP。
`Active`	`Optional[bool]` Go 零值: `unset`	控制激活状态或动态效果是否运行。
`Overlay`	`Optional[bool]` Go 零值: `unset`	控制遮罩或边缘渐隐层。
`ContentKey`	`string` Go 零值: `""`	内容改变时用于重置动画阶段的键。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。