HTML apmācība — Lily Design System

Ko jūs izveidosiet

Neliela kontaktu veidlapa — lauki ar iezīmēm, iesniegšanas poga, īsta tastatūras un ekrāna lasītāja darbība — vispirms kaila, tad noformēta, apmēram 10 minūtēs.

Pirms sākat

Nepieciešams pārlūks un teksta redaktors. Tas ir viss. (git palīdz iegūt komponenšu datnes, taču tās var nokopēt arī no GitHub pārlūkā.)

1. solis — Iegūstiet kodu

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

Katra komponente ir atsevišķa datne direktorijā components/ — button.html, text-input.htmlun tā tālāk — ar galvenes komentāru, kas dokumentē tās HTML tagu, klases āķi, tastatūras uzvedību un pieejamības līgumu. Datnes ir bibliotēka — nokopējiet, kas vajadzīgs, un dodieties.

2. solis — Jūsu pirmā komponente

Atveriet components/button.htmlvai vienkārši uzrakstiet iezīmējumu — klases āķis ir līgums:

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

Tā kā tas ir īsts <button>, tastatūras fokuss, aktivizēšana ar Enter un Space un netiešā pogas loma jau ir pareizi.

3. solis — Salieciet nelielu veidlapu

<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>

Ievērojiet modeli: katra vadīkla saista savu <label for>, izmanto visprecīzāko input tipu un nes tieši vienu kebab-case klases āķi.

Pārbaudiet savu darbu: atveriet lapu pārlūkā. Tā izskatās kaila — tieši kā paredzēts: noformēšana vēl priekšā. Nospiediet Tab: fokuss iet cauri katrai vadīklai, iezīmes tiek paziņotas, un iesniegšana darbojas. Uzvedība ir gatava; izskats ir jūsu un ir nākamais solis.

4. solis — Noformējiet to

Rakstiet CSS pret āķiem:

.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; }

Vai arī pavisam izlaidiet CSS rakstīšanu ar rokām — saistiet vienu no 45 gatavajiem motīviem, un tas pats iezīmējums atdzīvojas:

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

5. solis — Izpētiet tālāk

Repozitorija testi darbojas īstos pārlūkos: pnpm install && pnpm test (WebDriverIO).
Storybook katrai komponentei: pnpm run storybook.
HTML+CSS+JS paraugu lietotne rāda visas 571 komponentes noformētas, meklējamas un demonstrētas.

Nākamie soļi

Motīvi — motīva pārslēgšana izpildes laikā ar theme-picker.
Preferenču palīgi — valoda un teksta izmērs.
Komponenšu katalogs — pilna atsauce.

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.