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 JavaScript 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> |

Methods

updateLang() => Promise<void>

Returns

Type: Promise<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