I componenti di Magma sono web component: custom element che si scrivono come tag HTML, con qualsiasi framework o senza. React e Angular hanno un pacchetto wrapper che li trasforma in componenti del framework.

Avvio rapido

Installa il pacchetto del tuo framework, registra i componenti che usi e scrivili nel markup. Il framework che scegli resta selezionato anche nelle altre pagine.

Installa il pacchetto:

npm i @maggioli-design-system/magma

Nel punto di ingresso dell'app, registra i componenti che usi: ogni funzione defineCustomElement* registra un componente e quelli che contiene.

src/main.js

import {
  defineCustomElementMdsButton,
  defineCustomElementMdsText,
} from '@maggioli-design-system/magma/components';

defineCustomElementMdsButton();
defineCustomElementMdsText();

Poi scrivili come tag HTML:

index.html

<mds-text typography="h3" tag="h1">Hello Magma</mds-text>
<mds-button variant="primary" tone="strong">Save</mds-button>

Installa il wrapper e il pacchetto che avvolge:

npm i @maggioli-design-system/magma-react @maggioli-design-system/magma

Importa dal wrapper i componenti che usi: importarne uno lo registra.

src/App.jsx

import { MdsButton, MdsText } from '@maggioli-design-system/magma-react';

export default function App() {
  return (
    <>
      <MdsText typography="h3" tag="h1">Hello Magma</MdsText>
      <MdsButton variant="primary" tone="strong">Save</MdsButton>
    </>
  );
}

Installa il wrapper e il pacchetto che avvolge:

npm i @maggioli-design-system/magma-angular @maggioli-design-system/magma

Aggiungi i componenti che usi agli imports del tuo componente: ognuno si registra da solo.

src/app/app.ts

import { Component } from '@angular/core';
import { MdsButton, MdsText } from '@maggioli-design-system/magma-angular';

@Component({
  selector: 'app-root',
  imports: [MdsButton, MdsText],
  templateUrl: './app.html',
})
export class App {}

Poi scrivili nel suo template come tag HTML:

src/app/app.html

<mds-text typography="h3" tag="h1">Hello Magma</mds-text>
<mds-button variant="primary" tone="strong">Save</mds-button>

I componenti hanno bisogno anche degli stili e dei font di Magma, e mds-icon dei file delle icone: la guida all'installazione li configura per ogni framework.Guida all'installazione

Tutti i componenti

AccordionAccordion itemAccordion timerAccordion timer itemAuthorAvatarAvatar stackAvatar stack itemBadgeBannerBenchmark barBibliographyBreadcrumbBreadcrumb itemButtonButton dropdownButton groupCalendarCalendar cellCardCard contentCard footerCard headerCard mediaChipDetailsDropdownEmojiEntityFileFile previewFilterFilter itemHeaderHeader barHelpHorizontal scrollHrIconImgInputInput dateInput date rangeInput date range preselectionInput fieldInput otpInput rangeInput selectInput switchInput tipInput tip itemInput uploadKeyboardKeyboard keyKpiKpi itemLabelListList itemMentionModalNoteNotificationPaginatorPaginator itemPolicy aiPrefPref animationPref consumptionPref contrastPref languagePref language itemPref modePref themePref theme itemPrice tablePrice table featuresPrice table features cellPrice table features rowPrice table headerPrice table listPrice table list itemProgressPush notificationPush notification itemQuoteRadial menuRadial menu itemRadial progressSeparatorSpinnerStatus barStepper barStepper bar itemTabTab barTab bar itemTab itemTableTable bodyTable cellTable footerTable headerTable header cellTable rowTextToastTooltipTreeTree itemUrl viewUsageVideo wallZero