Pinwheel Component
A pinwheel component for selecting items by scrolling through a list.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
items | string[] | [] | An array of strings that contains pinwheel items. |
CSS Parts
| Name | Description |
|---|---|
pinwheel | The container that wraps the pinwheel component. |
pinwheel-item | The item that rendered in pinwheel. |
Check this link to learn how to use CSS parts for Pinwheel Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-pinwheel-vertical-padding | --tap-sys-spacing-0 | - |
--tap-pinwheel-horizontal-padding | --tap-sys-spacing-6 | - |
--tap-pinwheel-item-height | --tap-sys-spacing-11 | - |
--tap-font-family | --tap-sys-font-family | - |
--tap-pinwheel-typography-body-md-height | --tap-sys-typography-body-md-height | - |
--tap-pinwheel-typography-body-md-size | --tap-sys-typography-body-md-size | - |
--tap-pinwheel-typography-body-md-weight | --tap-sys-typography-body-md-weight | - |
--tap-pinwheel-item-color | --tap-sys-color-content-tertiary | - |
--tap-pinwheel-typography-label-md-height | --tap-sys-typography-label-md-height | - |
--tap-pinwheel-typography-label-md-size | --tap-sys-typography-label-md-size | - |
--tap-pinwheel-typography-label-md-weight | --tap-sys-typography-label-md-weight | - |
--tap-pinwheel-active-item-color | --tap-sys-color-content-primary | - |
Events
| Name | Description |
|---|---|
pinwheel-change | Fires when the pinwheel changes |