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".accessibleNamearia-labelstring | undefinedThe accessible name of the native control: the label a screen reader announces. An mds-input-field around the component passes its own label down here, so the attribute is only written by hand when the control stands on its own. The placeholder is deliberately not a fallback: it disappears as soon as the field is filled.

autoFocusauto-focusboolean | undefinedSpecifies a short hint that describes the expected value of the element

autocomplete - on | undefinedSpecifies a short hint that describes the expected value of the element

defaultValuedefault-valuenull | number | string | undefinedSpecifies the default value of the component

disabled - boolean | undefinedfalseIf true, the element is displayed as disabled

multiple - boolean | undefinedfalseSpecifies if the select should allow multiple options to be selected in the list

name - string | undefinedIs needed to reference the form data after the form is submitted

placeholder - string | undefinedSpecifies a short hint that describes the expected value of the element

required - boolean | undefinedfalseSpecifies that the element must be filled out before submitting the form

rows - number | undefined0The number of option rows the list shows at once, as the size of a native <select>: with multiple, or above 1, the select shows a list box

size - lg | md | sm | number | undefinedlgSpecifies the height of the field, the same as mds-button: sm 28px, md 36px, lg 48px. A number is still read as rows, the row count this prop used to set: that use is deprecated and goes in the next major

value - null | number | string | undefinedSpecifies the value of the component

variant - error | info | success | warning | undefinedSets the variant of the component

Eventi

mdsInputSelectChangeMdsInputSelectEventDetailEmits when the selection changes: value is the first selected option, values every selected one

Metodi

setValuesetValue(value: string | number | null) => Promise<void>Sets the value of the component

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 option HTML elements or components to this slot.

Nessun nome slot