HTML oktatóanyag — Lily Design System

Mit fogsz építeni

Egy kis kapcsolatfelvételi űrlap — címkézett mezők, egy küldés gomb, valódi billentyűzet- és képernyőolvasó-viselkedés — először csupaszon, aztán stílusosan, nagyjából 10 perc alatt.

Mielőtt elkezdenéd

Egy böngészőre és egy szövegszerkesztőre van szükséged. Ennyi. (A git segít a komponensfájlok megszerzésében, de a böngészőben is lemásolhatod őket a GitHubról.)

1. lépés — Szerezd meg a kódot

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

Minden komponens önálló fájl itt: components/ — button.html, text-input.htmlés így tovább — fejlécmegjegyzéssel, amely dokumentálja a HTML-címkéjét, az osztálykampót, a billentyűzet-viselkedést és a hozzáférhetőségi szerződést. A fájlok maguk a könyvtár — másold, amire szükséged van, és indulj.

2. lépés — Az első komponensed

Nyisd meg: components/button.html, vagy egyszerűen írd meg a jelölést — az osztálykampó a szerződés:

<button class="button" type="button">
  Save
</button>

Mivel ez valódi <button>, a billentyűzetfókusz, az Enter és a Szóköz általi aktiválás és az implicit gombszerep már helyes.

3. lépés — Állíts össze egy kis űrlapot

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

Figyeld meg a mintát: minden vezérlő összeköti a saját <label for>elemét, a legspecifikusabb beviteli típust használja, és pontosan egy kebab-case osztálykampót hordoz.

Ellenőrizd a munkádat: nyisd meg az oldalt egy böngészőben. Csupasznak látszik — pontosan úgy, ahogy szántuk: a stílus még hátravan. Nyomd meg a Tabbillentyűt: a fókusz végigmegy minden vezérlőn, a címkéket bemondja, és a küldés működik. A viselkedés kész; a megjelenés a tiéd, és a következő lépés.

4. lépés — Stílus hozzá

Írj CSS-t a kampókra:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

Vagy hagyd ki teljesen a CSS kézzel írását — hivatkozz a 45 kész téma egyikére, és ugyanaz a jelölés kivilágosodik:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

5. lépés — Fedezz fel többet

A tároló tesztjei valódi böngészőkben futnak: pnpm install && pnpm test (WebDriverIO).
Storybook minden komponenshez: pnpm run storybook.
A HTML+CSS+JS példaalkalmazás mind az 571 komponenst stílusosan, kereshetően és bemutatva mutatja.

További lépések

Témák — témaváltás futásidőben a theme-pickerrel.
Beállítási segédek — nyelv és szövegméret.
Komponenskatalógus — a teljes referencia.

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.