@maggioli-design-system/mds-text NPM

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

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-date-range --> 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-keyboard --> mds-text
  mds-keyboard-key --> 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-policy-ai --> 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-item --> 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
  style mds-text fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/styles @stencil/core clsx