I componenti Magma sono web component: elementi personalizzati che scrivi come i tag HTML, con qualsiasi framework o senza. Le proprietà li configurano, gli eventi dicono cosa è successo, i metodi sono funzioni da chiamare sull'elemento e gli slot accolgono il contenuto che metti al suo interno.

Proprietà

Imposta una proprietà come attributo HTML nel markup, oppure come proprietà da JavaScript. La colonna Attributo dà il nome dell'attributo, un trattino quando coincide con la proprietà; le proprietà senza attributo, come array e funzioni, si impostano solo da JavaScript. Per spegnere un attributo booleano, rimuovilo: non scrivere mai disabled="false".cornerShapecorner-shapebevel | default | notch | round | scoop | square | squircle | undefinedSpecifies the corner geometry of the whole page: one of the corner-shape keywords, or default. Corner geometry is theme appearance rather than an accessibility preference, which is why it lives here next to the theme name and scheme instead of in mds-pref-mode. Setting it writes data-corner-shape on <html>, where the generated axis picks both the shape and the radius scale tuned for it. Leaving it unset touches nothing. Setting it to default REMOVES the attribute rather than writing today’s default into the page, so a project that never chose keeps following the design system when the default changes.

name - stringdefaultSpecifies the theme name attribute A string representing the theme name, should be a simple string name or kebab kase name. Examples of valid language codes include "magma", "maggioli-editore", etc.

scheme - all | dark | lightallSpecifies the theme scheme which can be ‘light’, ‘dark’ or ‘all’ Default is ‘all’ which means this theme supporto both light and dark. If you set ‘light’ means this theme support only light mode and will be forced and shown light colors mode only.

size - md | sm | undefinedSets the size of the component items nested inside it

Eventi

mdsPrefChangeMdsPrefChangeEventDetailEmits when the component is triggered

mdsPrefThemeChangeMdsPrefThemeEventDetailEmits when the component changes the language selected from the click event of the dropdown list item

Slot

Gli slot accolgono il contenuto che scrivi tra i tag del componente. Lo slot predefinito, quello senza nome, accetta solo testo, salvo dove la sua descrizione dice altrimenti.(predefinito)Add mds-pref-theme-item element/s.

Nessun nome slot