npm.io
4.7.6 • Published 6 months ago

@maggioli-design-system/mds-text

Licence
MIT
Version
4.7.6
Deps
3
Size
1.1 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

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-mention --> 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-radial-progress --> mds-text
  mds-status-bar --> 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