mds-horizontal-scroll

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | ------------ | ------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------ | | controls | controls | Specifies the viewport which will display navigation controls | "all" \| "desktop" \| "large" \| "none" \| "tablet" \| "tv" \| "wide" \| "xlarge" \| undefined | 'desktop' | | navigation | navigation | Specifies the box’s snap position as an alignment of its snap area | "none" \| "position" \| "scrollbar" \| undefined | 'position' | | snap | snap | Specifies the box’s snap position as an alignment of its snap area | "center" \| "end" \| "none" \| "start" \| undefined | 'start' |

Slots

| Slot | Description | | ----------- | ---------------------------------------------------------------- | | "default" | Add text string, HTML elements or components to this slot. |

Shadow Parts

| Part | Description | | ----------- | ----------- | | "content" | |

CSS Custom Properties

| Name | Description | | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | --mds-horizontal-scroll-background | Sets the background-color of the component | | --mds-horizontal-scroll-behavior | Sets the scroll-behavior animation | | --mds-horizontal-scroll-dot-area-background | Sets the dot container area color | | --mds-horizontal-scroll-dot-background | Sets the navigation dot color | | --mds-horizontal-scroll-dot-max-width | Sets the navigation dot max-width, if you want to avoid is scales in proportion of the container | | --mds-horizontal-scroll-max-width | Sets the max-width of the slotted elements container, to keep layout limited as the rest of the sections | | --mds-horizontal-scroll-scrollbar-margin | Sets the margin of the browser scroll bar (if supported) | | --mds-horizontal-scroll-scrollbar-radius | Sets the border-radius of the browser scroll bar (if supported) | | --mds-horizontal-scroll-scrollbar-size | Sets the height and width of the browser scroll bar (if supported) | | --mds-horizontal-scroll-scrollbar-thumb-background | Sets the background-color of the browser scroll bar thumb (if supported) | | --mds-horizontal-scroll-scrollbar-track-background | Sets the background-color of the browser scroll bar track (if supported) |

Dependencies

Depends on

• mds-button

Graph

graph TD;
  mds-horizontal-scroll --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-horizontal-scroll fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department