@maggioli-design-system/mds-text v4.4.3
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 | "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "strong" \| "label" \| "code" \| "address" \| "time" \| "abbr" \| "article" \| "b" \| "bdo" \| "blockquote" \| "cite" \| "dd" \| "del" \| "details" \| "dfn" \| "div" \| "dl" \| "dt" \| "em" \| "figcaption" \| "i" \| "ins" \| "kbd" \| "legend" \| "li" \| "mark" \| "ol" \| "p" \| "pre" \| "q" \| "rb" \| "rt" \| "ruby" \| "s" \| "samp" \| "small" \| "span" \| "sub" \| "summary" \| "sup" \| "u" \| "ul" \| "var" | 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-img
- mds-input-field
- mds-input-range
- mds-input-switch
- mds-input-tip-item
- mds-input-upload
- mds-kpi-item
- mds-label
- mds-list-item
- mds-notification
- mds-paginator-item
- mds-pref
- mds-pref-animation
- mds-pref-consumption
- mds-pref-contrast
- mds-pref-language
- mds-pref-language-nav
- mds-pref-theme
- 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-img --> mds-text
mds-input-field --> mds-text
mds-input-range --> mds-text
mds-input-switch --> mds-text
mds-input-tip-item --> 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-pref --> mds-text
mds-pref-animation --> mds-text
mds-pref-consumption --> mds-text
mds-pref-contrast --> mds-text
mds-pref-language --> mds-text
mds-pref-language-nav --> mds-text
mds-pref-theme --> 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
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago