Lily Design System™

Tutorial HTML

Permulaan paling ringkas: salin HTML semantik dengan cangkuk kelas Lily, tambah satu helaian gaya, lancarkan. Fail biasa yang berfungsi di mana-mana HTML berfungsi.

Apa yang akan anda bina

Borang hubungan kecil — input berlabel, butang hantar, tingkah laku papan kekunci dan pembaca skrin yang sebenar — mula-mula kosong, kemudian digayakan, dalam kira-kira 10 minit.

Sebelum anda bermula

Anda memerlukan pelayar dan penyunting teks. Itu sahaja. (git membantu mendapatkan fail komponen, tetapi anda juga boleh menyalinnya dari GitHub dalam pelayar.)

Langkah 1 — Dapatkan kod

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

Setiap komponen ialah fail kendiri dalam components/ — button.html, text-input.html, dan seterusnya — dengan ulasan pengepala yang mendokumenkan teg HTML, cangkuk kelas, tingkah laku papan kekunci dan kontrak kebolehcapaiannya. Fail-fail itu ialah perpustakaan — salin apa yang anda perlukan dan teruskan.

Langkah 2 — Komponen pertama anda

Buka components/button.html, atau tulis sahaja markup — cangkuk kelas ialah kontraknya:

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

Kerana ia <button>sebenar, fokus papan kekunci, pengaktifan Enter dan Space, serta peranan butang tersirat sudah betul.

Langkah 3 — Gubah borang kecil

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

Perhatikan coraknya: setiap kawalan memaut <label for>nya, menggunakan jenis input paling spesifik, dan membawa tepat satu cangkuk kelas kebab-case.

Semak kerja anda: buka halaman dalam pelayar. Ia kelihatan biasa sahaja — tepat seperti dimaksudkan: penggayaan masih di hadapan. Tekan Tab: fokus bergerak melalui setiap kawalan, label diumumkan dan penghantaran berfungsi. Tingkah laku sudah siap; rupanya milik anda dan itu seterusnya.

Langkah 4 — Gayakan

Tulis CSS terhadap cangkuk:

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

Atau langkau menulis CSS sepenuhnya — pautkan salah satu daripada 45 tema siap pakai dan markup yang sama menyala: 

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

Langkah 5 — Terokai lebih lanjut

  • Ujian repo dijalankan dalam pelayar sebenar: pnpm install && pnpm test (WebDriverIO).
  • Storybook bagi setiap komponen: pnpm run storybook.
  • Aplikasi contoh HTML+CSS+JS menunjukkan kesemua 571 komponen digayakan, boleh dicari dan didemonstrasikan.

Langkah seterusnya

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.