@maggioli-design-system/mds-text

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	"code" | "p" | "q" | "mark" | "details" | "small" | "sub" | "sup" | "summary" | "address" | "abbr" | "article" | "b" | "bdo" | "blockquote" | "cite" | "dd" | "del" | "dfn" | "div" | "dl" | "dt" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "i" | "ins" | "kbd" | "label" | "legend" | "li" | "ol" | "pre" | "rt" | "ruby" | "s" | "samp" | "span" | "strong" | "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