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 JavaScript 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" \| "label" \| "code" \| "strong" \| "abbr" \| "address" \| "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" \| "time" \| "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-animation-placeholder-char | Sets the animation placeholder char of the text when animation attribute is set to yugop | | --mds-text-animation-speed | Sets the animation speed of the text when animation attribute is set to yugop | | --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-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-table-header-cell
• 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-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-table-header-cell --> 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