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".disableMonthYearSelectiondisable-month-year-selectionbooleanfalseDisables switching to month or year selection views from the calendar header.

endDateend-datenull | stringnullSpecifies the end date of the selection

hideNextButtonhide-next-buttonbooleanfalseIf set, the component hides the next navigation button in the calendar header.

hidePreselectionhide-preselectionbooleanfalseIf set, the component hides the preselection area above the calendar view even when the preselection slot has content.

hidePreviousButtonhide-previous-buttonbooleanfalseIf set, the component hides the previous navigation button in the calendar header.

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

hoverDatehover-datenull | stringnullSpecifies the date used to preview the range selection across multiple visible calendars.

max - null | stringnullSpecifies the minimum date of the selection

min - null | stringnullSpecifies the minimum date of the selection

singlePickersingle-pickerbooleanfalseIf set, the component selects a single date instead of a date range (start and end date).

startDatestart-datenull | stringnullSpecifies the start date of the selection

viewDateview-datenull | stringnullSpecifies the date used to determine the visible month without changing the selection.

Eventi

mdsCalendarChange{ startDate: string; endDate?: string | undefined; }Emitted when the selected date or date range changes.

mdsCalendarHover{ hoverDate: string | null; }Emitted when the user hovers over a day, used to preview a range selection.

mdsCalendarNavigate{ currentDate: string; delta: number; }Emitted when the user navigates to a different month or year.

mdsCalendarPreselectvoidEmitted when the calendar’s preselection options need to be re-evaluated.

Metodi

updateCurrentDateupdateCurrentDate(date: string) => Promise<void>Sets the calendar’s current date and re-renders the calendar accordingly.

Slot

Gli slot accolgono il contenuto che scrivi tra i tag del componente. Il contenuto di uno slot con nome va su un figlio diretto, con il nome dello slot nell'attributo slot, ad esempio slot="preselection".preselectionAdd HTML elements or components shown in the calendar preselection area.