2.9.6 • Published 21 days ago
@maggioli-design-system/mds-chip v2.9.6
mds-chip
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 JavaScirpt framework you are using.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
clickable | clickable | Adds ARIA support to the element if has interaction | boolean \| undefined | undefined |
deletable | deletable | Shows the cross icon to perform cancel/delete action on element | boolean \| undefined | undefined |
deleteLabel | delete-label | Sets the cross icon accessibility label to perform cancel/delete action on element | "Rimuovi" \| undefined | 'Rimuovi' |
disabled | disabled | Sets the component disabled status | boolean \| undefined | false |
icon | icon | The icon displayed to the left of the component's label | string \| undefined | undefined |
label (required) | label | The label displayed to the right of the component's icon | string | undefined |
selected | selected | Sets the component selected | boolean | false |
Events
Event | Description | Type |
---|---|---|
mdsChipClickLabel | Emits when the component's label is clicked | CustomEvent<MdsChipEvent> |
mdsChipDelete | Emits when the component's delete button is clicked | CustomEvent<MdsChipEvent> |
CSS Custom Properties
Name | Description |
---|---|
--mds-chip-backgroud-selected | Sets the background-color of the component when it's selected |
--mds-chip-background | Sets the background-color of the component |
--mds-chip-color | Sets the color of the component |
--mds-chip-color-selected | Sets the color of the component when it's selected |
--mds-chip-icon-background | Sets the background-color of the icon |
--mds-chip-icon-background-selected | Sets the background-color color of the icon when the component is selected |
--mds-chip-icon-color | Sets the fill color of the icon of the component |
--mds-chip-icon-color-selected | Sets the fill color of the icon of the component when it's selected |
--mds-chip-opacity-disabled | Sets the opacity of the component when it's disabled |
Dependencies
Depends on
Graph
graph TD;
mds-chip --> mds-icon
mds-chip --> mds-text
mds-chip --> mds-button
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
style mds-chip fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
2.9.6
21 days ago
2.9.5
3 months ago
2.9.4
3 months ago
2.9.3
3 months ago
2.9.2
3 months ago
2.9.1
3 months ago
2.9.0
3 months ago
2.7.0
3 months ago
2.6.0
3 months ago
2.5.4
4 months ago
2.5.3
4 months ago
2.5.2
5 months ago
2.2.1
7 months ago
2.2.0
8 months ago
2.5.0
6 months ago
2.4.0
6 months ago
2.2.2
7 months ago
2.5.1
6 months ago
2.1.2
12 months ago
2.1.1
12 months ago
2.1.0
1 year ago
1.4.0
1 year ago
2.0.0
1 year ago
1.2.0
1 year ago
1.1.0
1 year ago
1.0.1
1 year ago