@maggioli-design-system/mds-horizontal-scroll NPM

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

@maggioli-design-system/styles @stencil/core clsx

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @zalastax/nolb-_mag

8 months ago

11 months ago

9 months ago

8 months ago