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.

delay - number500Specifies the delay in milliseconds before closing the calendar dropdown, if the value is 0 the dropdown will not close

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

hideTodayhide-todaybooleanfalseHides the highlight on today’s date in the calendar.

max - null | stringnullSpecifies the max date of the range, user cannot set dates after this date

min - null | stringnullSpecifies the min date of the range, user cannot set dates before this date

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

readonly - boolean | undefinedfalseSpecifies that the element is read-only

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

size - lg | md | sm | undefinedlgSpecifies the height of the field, the same as mds-button: sm 28px, md 36px, lg 48px

value - stringSpecifies the value of the input

variant - ai | error | info | primary | success | warning | undefinedprimarySets the variant of the input field

Eventi

mdsInputDateSelectstringEmitted when the selected date value changes.

mdsInputValidationbooleanEmits a boolean event when a input execute validation

Metodi

focusInputfocusInput() => Promise<void>Sets focus on the underlying input element.

getErrorsgetErrors() => Promise<MdsValidationErrors | null>Returns the current validation errors, or null if the value is valid.

setValuesetValue(value: string) => Promise<void>Sets the input value.