npm package: @maggioli-design-system/mds-horizontal-scroll
Description: mds-horizontal-scroll is a web-component from Magma Design System, 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.
Author: Vittorio Vittori
Latest version: 3.0.3

# mds-horizontal-scroll



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), 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.

<!-- Auto Generated Below -->


## 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](../mds-button)

### Graph
```mermaid
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](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)