Biofarma | Bind UI

Carousel Mobile

The carousel component typically has a container element that holds all the slides and defines the overall layout and dimension of the component.

Type	Resource
Design	Figma
Web	Mobile Storybook
Code	Gitlab

Carousel preview

Usage

import id.co.biofarma.binduiandroid.components.carousel.Carousel

Carousel(
    id = "carouselPreview",
    size = "lg",
    radius = "none",
    mode = "light",
    items = List(12) { index ->
        {
            androidx.compose.material3.Text(
                text = "PLACEHOLDER: $index",
                color = PrimitiveColors.InnovationBlue_700,
                style = Typography.Overline.Small
            )
        }
    },
    navigation = "true",
    indicator = "true",
)

Examples

Size

Use size for change the size of carousel: sm, md, lg

Carousel preview 2

Radius

Use radius for change the border radius of carousel: none, sm, md

Carousel preview 3

Mode

Use mode for change the color mode of carousel: light or dark

Carousel preview 4

Props

Props	Required	Default	Type	description
id	true	-	`string`	Use id for set the id of carousel component.
size	false	`lg`	`sm` `md` `lg`	Use size for change size of carousel.
radius	false	`none`	`none` `sm` `md`	Use radius for change corner radius of carousel.
navigation	false	`true`	`boolean`	Use navigation for toggle show or hide navigation.
indicator	false	`true`	`boolean`	Use indicator for toggle show or hide indicator.
mode	false	`light`	`light` `dark`	Use mode for change color mode light or dark
icon	true	-	`imagevector`	For showing the slider icon: `Icons.Filled.KeyboardArrowLeft` and `Icons.Filled.KeyboardArrowRight`

Card Drawer