4.3.6 • Published 21 days ago
@maggioli-design-system/mds-text v4.3.6
mds-text
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 |
---|---|---|---|---|
animation | animation | Specifies if the text is animated when it is rendered | "none" \| "yugop" \| undefined | 'none' |
tag | tag | Specifies the HTML tag of the element | "address" \| "abbr" \| "article" \| "b" \| "bdo" \| "blockquote" \| "cite" \| "code" \| "dd" \| "del" \| "details" \| "dfn" \| "div" \| "dl" \| "dt" \| "em" \| "figcaption" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "i" \| "ins" \| "kbd" \| "label" \| "legend" \| "li" \| "mark" \| "ol" \| "p" \| "pre" \| "q" \| "rt" \| "ruby" \| "s" \| "samp" \| "small" \| "span" \| "strong" \| "sub" \| "summary" \| "sup" \| "time" \| "u" \| "ul" \| "var" \| "rb" | undefined |
text | text | Specifies the text string to the component instead of passing an HTML node | string \| undefined | undefined |
truncate | truncate | Specifies if the text shoud be truncated or should behave as a normal text | "all" \| "none" \| "word" \| undefined | undefined |
typography | typography | Specifies the font typography of the element | "action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip" | 'detail' |
variant | variant | Specifies the variant for typography | "code" \| "info" \| "read" \| "title" \| 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-text-line-clamp | Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute truncate='all' is set . WARNING: this is supported only by Chrome, Safare and Firefox with native browser prefixes. |
--mds-text-selection-background | Sets the background-color of the text when the text is selected |
--mds-text-selection-color | Sets the color of the text when the text is selected |
Dependencies
Used by
- mds-accordion-item
- mds-accordion-timer-item
- mds-badge
- mds-banner
- mds-benchmark-bar
- mds-bibliography
- mds-breadcrumb-item
- mds-button
- mds-chip
- mds-file
- mds-file-preview
- mds-filter
- mds-filter-item
- mds-input
- mds-input-field
- mds-input-range
- mds-input-switch
- mds-input-upload
- mds-kpi-item
- mds-label
- mds-list-item
- mds-notification
- mds-paginator-item
- mds-price-table-features
- mds-price-table-features-cell
- mds-price-table-list-item
- mds-push-notification
- mds-quote
- mds-stepper-bar-item
- mds-tab-bar-item
- mds-toast
- mds-tooltip
- mds-url-view
- mds-usage
Graph
graph TD;
mds-accordion-item --> mds-text
mds-accordion-timer-item --> mds-text
mds-badge --> mds-text
mds-banner --> mds-text
mds-benchmark-bar --> mds-text
mds-bibliography --> mds-text
mds-breadcrumb-item --> mds-text
mds-button --> mds-text
mds-chip --> mds-text
mds-file --> mds-text
mds-file-preview --> mds-text
mds-filter --> mds-text
mds-filter-item --> mds-text
mds-input --> mds-text
mds-input-field --> mds-text
mds-input-range --> mds-text
mds-input-switch --> mds-text
mds-input-upload --> mds-text
mds-kpi-item --> mds-text
mds-label --> mds-text
mds-list-item --> mds-text
mds-notification --> mds-text
mds-paginator-item --> mds-text
mds-price-table-features --> mds-text
mds-price-table-features-cell --> mds-text
mds-price-table-list-item --> mds-text
mds-push-notification --> mds-text
mds-quote --> mds-text
mds-stepper-bar-item --> mds-text
mds-tab-bar-item --> mds-text
mds-toast --> mds-text
mds-tooltip --> mds-text
mds-url-view --> mds-text
mds-usage --> mds-text
style mds-text fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
4.3.6
21 days ago
4.3.5
3 months ago
4.3.3
3 months ago
4.3.2
3 months ago
4.3.1
3 months ago
4.3.0
3 months ago
4.2.0
3 months ago
3.7.0
4 months ago
3.6.3
5 months ago
3.4.0
8 months ago
3.6.1
6 months ago
3.4.3
7 months ago
3.6.0
6 months ago
3.4.2
7 months ago
3.5.0
6 months ago
3.4.1
8 months ago
3.2.2
1 year ago
3.3.0
1 year ago
3.2.1
1 year ago
3.2.0
1 year ago
3.1.0
1 year ago
3.0.0
1 year ago
2.0.2
2 years ago
2.0.0
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.0
2 years ago
1.1.0
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.2.1
2 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago