Yamada UIにスターをあげる
スターCarouselは、複数の要素をスライドショーのように表示するコンポーネントです。
説明
The alignment of the carousel.
タイプ
AlignmentOptionType | [AlignmentOptionType | { [x: string]: AlignmentOptionType | undefined; base?: AlignmentOptionType | undefined; ... 4 more ...; xl?: AlignmentOptionType | undefined; } | undefined, AlignmentOptionType | ... 1 more ... | undefined] | { ...; }デフォルト
'center'説明
If true, the carousel will be autoplay.
タイプ
UIValue<boolean>デフォルト
false説明
The visual color appearance of the component.
タイプ
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"説明
Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
タイプ
ScrollContainOptionType | [ScrollContainOptionType | { [x: string]: ScrollContainOptionType | undefined; ... 5 more ...; xl?: ScrollContainOptionType | undefined; } | undefined, ScrollContainOptionType | ... 1 more ... | undefined] | { ...; }デフォルト
''説明
Props for next of the carousel control element.
タイプ
CarouselControlProps説明
Props for previous of the carousel control element.
タイプ
CarouselControlProps説明
Props for carousel control element.
タイプ
CarouselControlProps説明
Ref of the resizable item callback.
タイプ
RefObject<EmblaCarouselType | undefined>説明
The initial index of the carousel slide.
タイプ
numberデフォルト
0説明
The number for the autoplay interval of the carousel.
タイプ
UIValue<number>デフォルト
4000説明
If true, momentum scrolling will be enabled.
タイプ
UIValue<boolean>デフォルト
false説明
If true, carousel can be scrolled with mouse and touch interactions.
タイプ
UIValue<boolean>デフォルト
true説明
Set scroll duration when triggered by any of the API methods. Higher numbers enables slower scrolling. Drag interactions are not affected because duration is then determined by the drag force.
タイプ
UIValue<number>デフォルト
25説明
If true, gap will be treated as part of the carousel slide size.
タイプ
UIValue<boolean>デフォルト
true説明
The index of the carousel slide.
タイプ
number説明
Props for carousel indicators element.
タイプ
CarouselIndicatorsProps説明
Props for carousel inner element.
タイプ
HTMLUIProps説明
Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
タイプ
number | number[] | [number | number[] | { [x: string]: number | number[] | undefined; base?: number | number[] | undefined; "2xl"?: number | number[] | undefined; lg?: number | number[] | undefined; md?: number | ... 1 more ... | undefined; sm?: number | ... 1 more ... | undefined; xl?: number | ... 1 more ... | un...デフォルト
0説明
If true, infinite looping.
Automatically falls back to false if slide content isn't enough to loop.
タイプ
UIValue<boolean>デフォルト
true説明
The callback invoked when carousel slide selected.
タイプ
(index: number) => void説明
A callback that return the current scroll amount when the carousel is scrolled.
タイプ
(progress: number) => void説明
The orientation of the carousel.
タイプ
UIValue<"horizontal" | "vertical">デフォルト
'horizontal'説明
The size of the Carousel.
タイプ
"sm" | "md" | "lg" | "xl"デフォルト
"md"説明
If true, allow the carousel to skip scroll snaps if it's dragged vigorously.
Note that this option will be ignored if the dragFree option is set to true.
タイプ
UIValue<boolean>デフォルト
false説明
The CSS width property.
タイプ
UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 76 more ... | "xs">説明
The number of slides that should be scrolled with next or previous buttons.
タイプ
UIValue<number>デフォルト
1説明
If true, autoplay will pause when the mouse entries over.
タイプ
UIValue<boolean>デフォルト
true説明
The variant of the Carousel.
タイプ
string説明
Enables for scrolling the carousel with mouse and touch interactions.
Set this to false to disable drag events or pass a custom callback to add your own drag logic.
タイプ
DragHandlerOptionTypeデフォルト
true説明
Embla automatically watches the container and slides for size changes and runs reInit when any size has changed.
Set this to false to disable this behaviour or pass a custom callback to add your own resize logic.
タイプ
ResizeHandlerOptionTypeデフォルト
true説明
Embla automatically watches the container for added and/or removed slides and runs reInit if needed.
Set this to false to disable this behaviour or pass a custom callback to add your own slides changed logic.
タイプ
SlidesHandlerOptionTypeデフォルト
true説明
If true, display the carousel control buttons.
タイプ
UIValue<boolean>デフォルト
true説明
If true, display the carousel indicator buttons.
タイプ
UIValue<boolean>デフォルト
true説明
If true, the button is represented as active.
タイプ
booleanデフォルト
false説明
If true, disable ripple effects when pressing a element.
タイプ
booleanデフォルト
false説明
If true, the button is full rounded. Else, it'll be slightly round.
タイプ
booleanデフォルト
false説明
The icon to be used in the button.
タイプ
ReactElement<any, string | JSXElementConstructor<any>>説明
If true, the button is represented as active.
非推奨
Use active instead.
タイプ
booleanデフォルト
false説明
If true, the button is disabled.
非推奨
Use disabled instead.
タイプ
booleanデフォルト
false説明
If true, the loading state of the button is represented.
非推奨
Use loading instead.
タイプ
booleanデフォルト
false説明
If true, the button is full rounded. Else, it'll be slightly round.
非推奨
Use fullRounded instead.
タイプ
booleanデフォルト
false説明
If true, the loading state of the button is represented.
タイプ
booleanデフォルト
false説明
The custom carousel indicator to use.
タイプ
FC<{
index: number
selected: boolean
isSelected?: boolean | undefined
}>タイプ
number説明
The CSS width property.
タイプ
UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 76 more ... | "xs">GitHubでこのページを編集する