Carousel
Горизонтальный прокручиваемый список.
github.com/fastygo/templ/ui
Горизонтальный прокручиваемый список.
По умолчанию
Слайд 1
Слайд 2
Слайд 3
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Group(ui.GroupProps{Class: "flex gap-2 overflow-x-auto max-w-md"}) {
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Слайд 1")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Слайд 2")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Слайд 3")
}
}
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Group(ui.GroupProps{Class: "flex gap-2 overflow-x-auto max-w-md"}) {
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Слайд 1")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Слайд 2")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Слайд 3")
}
}
}
API
Group · Group — Горизонтальный flex-ряд