@maggioli-design-system/mds-note NPM

mds-note

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
`deletable`	`deletable`	Enables the cross icon to perform cancel/delete action on element	`boolean \\| undefined`	`false`
`variant`	`variant`	Specifies the color variant for the element	`"amaranth" \\| "aqua" \\| "blue" \\| "green" \\| "lime" \\| "orange" \\| "orchid" \\| "sky" \\| "violet" \\| "yellow" \\| undefined`	`'yellow'`

Events

Event	Description	Type
`mdsNoteDelete`	Emits when the note has to be cancelled	`CustomEvent<void>`

Slots

Slot	Description
`"default"`	Add `text string`, `HTML elements` or `components` to this slot.
`"title"`	Add `text string`, `HTML elements` or `components` to this slot.

CSS Custom Properties

Name	Description
`--mds-note-background`	Sets the background-color of the component
`--mds-note-color`	Sets the text color of the component
`--mds-note-fold-size`	Sets the size of the fold decoration at the bottom right of the component
`--mds-note-selection-background`	Sets the selection text background-color of the component
`--mds-note-selection-color`	Sets the selection text color of the component

Dependencies

Depends on

mds-button

Graph

graph TD;
  mds-note --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-note fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/mds-button @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @zalastax/nolb-_mag

21 days ago

3 months ago

3 months ago

3 months ago