@maggioli-design-system/mds-paginator-item NPM

mds-paginator-item

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
`disabled`	`disabled`	Specifies if the item is disabled or not, is handled from the parent paginator	`boolean \\| undefined`	`undefined`
`icon`	`icon`	Specifies the icon used inside the paginator item	`string \\| undefined`	`undefined`
`selected`	`selected`	Specifies if the item is selected or not, is handled from the parent paginator	`boolean \\| undefined`	`undefined`

Slots

Slot	Description
`"default"`	Add `text string` to this slot, avoid to add `HTML elements` or `components` here.

CSS Custom Properties

Name	Description
`--mds-paginator-item-background`	Sets the background-color of the pages area and the item
`--mds-paginator-item-background-disabled`	Sets the background-color of the item when is disabled
`--mds-paginator-item-background-hover`	Sets the background-color of the item when the mouse is over it
`--mds-paginator-item-background-selected`	Sets the background-color of the item when is selected
`--mds-paginator-item-color`	Sets the text color of the component
`--mds-paginator-item-color-disabled`	Sets the color of the item when is disabled
`--mds-paginator-item-color-hover`	Sets the text color of the item when the mouse is over it
`--mds-paginator-item-color-selected`	Sets the text color of the item when is selected
`--mds-paginator-item-radius`	Sets the border-radius of the component
`--mds-paginator-item-shadow`	Sets the box-shadow of the component
`--mds-paginator-item-shadow-disabled`	Sets the box-shadow of the item when is disabled
`--mds-paginator-item-shadow-hover`	Sets the box-shadow of the item when the mouse is over it
`--mds-paginator-item-shadow-selected`	Sets the box-shadow of the item when is selected
`--mds-paginator-item-size`	Sets the height and the min-width of the paginator item

Dependencies

Used by

mds-paginator

Depends on

Graph

graph TD;
  mds-paginator-item --> mds-icon
  mds-paginator-item --> mds-text
  mds-paginator --> mds-paginator-item
  style mds-paginator-item fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/mds-text @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @zalastax/nolb-_mag @maggioli-design-system/mds-paginator

8 months ago

9 months ago

9 months ago

10 months ago