Special Elements
Image Backed
Tabs with background images that change on selection.
tabsimagebackgroundanimated
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | [{id: '1', label: 'Scene 1', image?: url}, ...] | Array of tab items with id, label, and optional image. |
images | string[] | [url1, url2, ...] | Fallback array of image URLs if tabs don't have images. |
defaultActive | number | 0 | Index of the initially active tab. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #18181b | Background color of the container (hex, rgb, or hsl). |
containerHeight | string | 10rem | Height of the container (CSS value). |
containerWidth | string | 100% | Width of the container (CSS value). |
containerMaxWidth | string | 32rem | Maximum width of the container (CSS value). |
borderRadius | string | 1.5rem | Border radius of the container (CSS value). |
imageOpacity | number | 0.5 | Opacity of background images (0-1). |
activeButtonBgColor | string | #ffffff | Background color of active buttons (hex, rgb, or hsl). |
activeButtonTextColor | string | #000000 | Text color of active buttons (hex, rgb, or hsl). |
activeButtonScale | number | 1.1 | Scale of active buttons. |
inactiveButtonTextColor | string | rgba(255,255,255,0.7) | Text color of inactive buttons (hex, rgb, or hsl). |
inactiveButtonHoverTextColor | string | #ffffff | Text color of inactive buttons on hover (hex, rgb, or hsl). |
buttonBorderRadius | string | 9999px | Border radius of buttons (CSS value). |
buttonPadding | string | 0.5rem 1.5rem | Padding of tab buttons (CSS value). |
fontSize | string | 1rem | Font size of tab labels (CSS value). |
fontWeight | string | bold | Font weight of tab labels (CSS value). |
transitionDuration | number | 0.3 | Duration of image transitions in seconds. |