Teagasc Nunjucks — Lily Design System

An rud a thógfaidh tú

Foirm theagmhála bheag rindreáilte ar an bhfreastalaí — réimse le lipéad, cnaipe cur isteach, nialas ualach JavaScript — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá git, Node 22 nó níos nuaí, agus pnpm 10 nó níos nuaí ag teastáil uait. Oibríonn aon phíblíne Nunjucks — Eleventy, Express nó Nunjucks simplí.

Céim 1 — Faigh an cód

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-headless
pnpm install
pnpm test        # vitest rendering every macro

Is eolaire é gach comhpháirt i components/ le macro.njk, a thástáil agus a doiciméadú — mar shampla components/button/macro.njk. Díreoigh do luchtaitheoir Nunjucks ar components/ (in Eleventy, cuir leis an gcosán includes é) agus iompórtáil an méid atá ag teastáil uait.

Céim 2 — Do chéad chomhpháirt

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "submit" }) }}

Rindreálann <button class="button" type="submit">Save</button>. Glacann macraí le réad params amháin: text (éalaithe) nó html (amh), type, label le haghaidh aria-labelagus cuireoir crúca aicme.

Céim 3 — Cuir foirm bheag le chéile

{% from "components/form/macro.njk" import form %}
{% from "components/label/macro.njk" import label %}
{% from "components/text-input/macro.njk" import textInput %}
{% from "components/button/macro.njk" import button %}

<form class="form" method="post">
  <div class="field">
    {{ label({ for: "name", text: "Full name" }) }}
    {{ textInput({ id: "name", name: "name", required: true }) }}
  </div>
  {{ button({ text: "Save", type: "submit" }) }}
</form>

Toisc go rindreáiltear gach rud ar an bhfreastalaí, faigheann an brabhsálaí HTML séimeantach glan le crúcaí aicme — ualach JavaScript nialas bearta.

Seiceáil d'obair: luchtaigh an leathanach agus tá an fhoirm le feiceáil nocht — go díreach mar a bhí beartaithe: tá an stíliú fós le teacht. Brúigh Tab: gluaiseann an fócas trí gach rialú, fógraítear an lipéad agus oibríonn an cur isteach. Tá an t-iompar déanta; is leatsa an cuma agus is é an chéad chéim eile é.

Céim 4 — Stíligh é

Stíligh na crúcaí — .button, .text-input, .label, .field — i do bhileog stíle, nó nasc téama réamhdhéanta i do leagan amach bunúsach:

<link rel="stylesheet" href="/themes/united-kingdom-government-digital-service.css" />

Céim 5 — Féach air ag obair ar fad

App samplach Nunjucks + Eleventy tógann sé an catalóg iomlán mar shuíomh statach le leathanaigh léirithe in aghaidh na comhpháirte:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-eleventy-examples
pnpm install && pnpm run dev

Na chéad chéimeanna eile

Téamaí — lena n-áirítear patrún fianán Eleventy le haghaidh malartú téama SSR gan priocadh.
Cúntóirí sainroghanna — teanga agus méid téacs.
Catalóg na gcomhpháirteanna — airíonna, ARIA agus méarchlár in aghaidh na comhpháirte.

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.