Carousel

在一组内容卡片中翻页。

实时预览

正在加载预览…

参数配置

方向 orientation箭头 arrows指示点 dots是循环翻页 wrap否

全部字段 12

CarouselItems

列表项 · 3

CarouselItem

ID

Label

Build

CarouselItem

ID

Label

Build

CarouselItem

ID

Label

Build

CarouselOptions

Label

Height

Active

Autoplayms

Wrap

Orientation

Arrows

Dots

OnChange

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.Carousel(c.Key("carousel"), t, &s.Carousel, []nui.CarouselItem{{ID: "one", Label: "One", Build: func(c *ui.Context, t nui.Theme) {
	nui.Card(c.Key("card"), t, nui.CardOptions{Title: "Design"}, func() { ui.Text(c, "Start with a focused idea.") })
}}, {ID: "two", Label: "Two", Build: func(c *ui.Context, t nui.Theme) {
	nui.Card(c.Key("card"), t, nui.CardOptions{Title: "Build"}, func() { ui.Text(c, "Compose native Go components.") })
}}, {ID: "three", Label: "Three", Build: func(c *ui.Context, t nui.Theme) {
	nui.Card(c.Key("card"), t, nui.CardOptions{Title: "Share"}, func() { ui.Text(c, "Publish your work.") })
}}}, nui.CarouselOptions{Label: "Slides", Height: 180, Orientation: nui.Horizontal, Arrows: nui.Optional[bool]{}, Dots: true, Wrap: false})

使用说明

使用箭头或圆点在三张卡片之间切换，再比较纵向与循环模式。CarouselState 保存当前位置，卡片使用稳定 ID，Build 只负责当前布局。

API 参考

Carousel

源码

func Carousel(c *ui.Context, t Theme, s *CarouselState, items []CarouselItem, o CarouselOptions) ui.Element

CarouselOptions

源码

type CarouselOptions struct {
	Label    string
	Height   float32
	Active   Optional[bool]
	Autoplay time.Duration
	// Wrap wraps explicit/automatic next and previous actions; drag stays bounded.
	Wrap        bool
	Orientation Orientation
	Arrows      Optional[bool]
	Dots        bool
	OnChange    func(int)
	Decoration
}

字段	类型	说明
`Label`	`string` Go 零值: `""`	控件标签或可访问名称。
`Height`	`float32` Go 零值: `0`	高度，单位为 DIP。
`Active`	`Optional[bool]` Go 零值: `unset`	控制激活状态或动态效果是否运行。
`Autoplay`	`time.Duration` Go 零值: `0`	自动翻页的间隔；零表示不自动翻页。
`Wrap`	`bool` Go 零值: `false`	到边界时允许翻页回到另一端。
`Orientation`	`Orientation` Go 零值: `zero value`	水平或垂直方向；未设置时使用组件默认方向。
`Arrows`	`Optional[bool]` Go 零值: `unset`	显示翻页箭头。
`Dots`	`bool` Go 零值: `false`	显示分页指示点。
`OnChange`	`func(int)` Go 零值: `nil`	值发生变化时通知应用的回调。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。