Carousel
Enables users to navigate horizontally to view overflowing content placed inside of the component
Usage Guidance
Coming soon!
API Guidelines
Methods
Carousel<
CarouselElements: RandomAccessCollection,
Content: View
>: View where CarouselElements.Element: Identifiable, CarouselElements.Element.ID: CustomStringConvertible {
public init(
_ carouselElements: CarouselElements,
scrollingMode: CarouselScrollingMode = .freescrolling,
interItemSpacing: SpaceToken? = nil,
fadeWidth: SpaceToken? = nil,
safeAreaWidth: SpaceToken? = nil,
localizer: LocalizationAdapting,
featureData: FeatureMetricsData,
content: @escaping (CarouselElements.Element) -> Content
)
}Parameters
| Parameter | Description | Default value |
|---|---|---|
| carouselElements | The elements to be displayed in the carousel. | N/A |
| scrollingMode | The scrolling mode of the carousel. | .freescrolling |
| interItemSpacing | The spacing between carousel items. | .x2 |
| fadeWidth | The width of the fade effect at the edges of the carousel. | .x0 |
| safeAreaWidth | The width of the safe area on the sides of the carousel. | .x4 |
| localizer | The localizer to be used for the carousel. | N/A |
| featureData | The feature data to be used for the carousel. | N/A |
| content | The content to be displayed in the carousel. | N/A |
CarouselScrollingMode
public enum CarouselScrollingMode: Equatable, Hashable {
case freescrolling
case pagingNoIndication(snapAnchor: HorizontalAlignment)
case pagingDots(
_ indicatorLocation: DotsLocation,
snapAnchor: HorizontalAlignment,
appearance: DotsAppearance = .normal
)
case pagingNumbers(_ indicatorLocation: NumbersLocation, snapAnchor: HorizontalAlignment)
public enum DotsLocation { case inside, outside }
public enum NumbersLocation { case center, top, outside }
public enum DotsAppearance { case normal, inverse, inverseContrast }
}Accessibility Guidelines
Coming soon!
Usage Guidance
Coming soon!
API Guidelines
Methods
fun CarouselUiComponent(
modifier: Modifier = Modifier,
config: CarouselConfig,
)
data class CarouselConfig(
val type: CarouselType,
val isFadingEnabled: Boolean = false,
val fadeColor: Color,
val pagingConfig: CarouselPagingConfig? = null,
val itemsList: List<@Composable () -> Unit> = listOf()
)Parameters
| Name | Description | Default values |
|---|---|---|
| modifier | The modifier to be applied to the component. | Modifier |
| config | Data class for how to configure the carousel. | CarouselConfig |
CarouselConfig Parameters
| Name | Description | Default values |
|---|---|---|
| type | How the carousel items are displayed and interacted with via scrolling through them. | CarouselType |
| isFadingEnabled | If the edges of the carousel are faded into the background. | Boolean |
| fadeColor | Color to use for the fading edge if fading is enabled. | Color |
| pagingConfig | How to display the paging info for the carousel. | CarouselPagingConfig |
| itemsList | List of composables to be displayed in the carousel. | List<@Composable () -> Unit> |
Note: Carousel types available are snap and free flow. Paging configs available are dots and numbers.
Accessibility Guidelines
Coming soon!
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.