ບົດສອນ HTML

ສິ່ງທີ່ທ່ານຈະສ້າງ

ແບບຟອມຕິດຕໍ່ນ້ອຍໆ — ຊ່ອງປ້ອນທີ່ມີປ້າຍ, ປຸ່ມສົ່ງ, ພຶດຕິກຳແປ້ນພິມ ແລະໂປຣແກຣມອ່ານໜ້າຈໍຈິງ — ທຳອິດເປົ່າ, ຈາກນັ້ນມີຮູບແບບ, ໃນປະມານ 10 ນາທີ.

ກ່ອນທ່ານເລີ່ມ

ທ່ານຕ້ອງການບຣາວເຊີ ແລະຕົວແກ້ໄຂຂໍ້ຄວາມ. ເທົ່ານັ້ນ. (git ຊ່ວຍເອົາໄຟລ໌ອົງປະກອບ, ແຕ່ທ່ານກໍສຳເນົາຈາກ GitHub ໃນບຣາວເຊີໄດ້ຄືກັນ.)

ຂັ້ນຕອນ 1 — ເອົາໂຄດ

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

ທຸກອົງປະກອບເປັນໄຟລ໌ເອກະລາດໃນ components/ — button.html, text-input.html, ແລະອື່ນໆ — ພ້ອມຄຳເຫັນສ່ວນຫົວທີ່ບັນທຶກແທັກ HTML, class hook, ພຶດຕິກຳແປ້ນພິມ ແລະສັນຍາການເຂົ້າເຖິງໄດ້ງ່າຍຂອງມັນ. ໄຟລ໌ ແມ່ນ ໄລບຣາຣີ — ສຳເນົາສິ່ງທີ່ທ່ານຕ້ອງການແລ້ວໄປ.

ຂັ້ນຕອນ 2 — ອົງປະກອບທຳອິດຂອງທ່ານ

ເປີດ components/button.html, ຫຼືພຽງແຕ່ຂຽນ markup — class hook ແມ່ນສັນຍາ:

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

ເພາະມັນເປັນ <button>ຈິງ, ຈຸດສຸມແປ້ນພິມ, ການກະຕຸ້ນດ້ວຍ Enter ແລະ Space, ແລະບົດບາດປຸ່ມໂດຍນັຍຖືກຕ້ອງແລ້ວ.

ຂັ້ນຕອນ 3 — ປະກອບແບບຟອມນ້ອຍໆ

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

ສັງເກດຮູບແບບ: ທຸກການຄວບຄຸມເຊື່ອມ <label for>ຂອງມັນ, ໃຊ້ຊະນິດ input ທີ່ສະເພາະທີ່ສຸດ, ແລະມີ class hook kebab-case ພຽງໜຶ່ງອັນພໍດີ.

ຂັ້ນຕອນ 4 — ໃສ່ຮູບແບບ

ຂຽນ CSS ຕໍ່ hook:

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

ຫຼືຂ້າມການຂຽນ CSS ດ້ວຍມືທັງໝົດ — ເຊື່ອມຕໍ່ໜຶ່ງໃນ 45 ຮູບແບບສີສັນສຳເລັດຮູບ ແລະ markup ດຽວກັນກໍສະຫວ່າງຂຶ້ນ:

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

ຂັ້ນຕອນ 5 — ສຳຫຼວດຕື່ມ

• ການທົດສອບຂອງຄັງແລ່ນໃນບຣາວເຊີຈິງ: pnpm install && pnpm test (WebDriverIO).
• Storybook ສຳລັບທຸກອົງປະກອບ: pnpm run storybook.
• ແອັບຕົວຢ່າງ HTML+CSS+JS ສະແດງທັງ 571 ອົງປະກອບທີ່ມີຮູບແບບ, ຄົ້ນຫາໄດ້ ແລະສາທິດ.

ຂັ້ນຕອນຕໍ່ໄປ

• ຮູບແບບສີສັນ — ການສະຫຼັບຮູບແບບສີສັນຕອນແລ່ນດ້ວຍ theme-picker.
• ຕົວຊ່ວຍການຕັ້ງຄ່າ — ພາສາ ແລະຂະໜາດຕົວອັກສອນ.
• ແຄັດຕາລັອກອົງປະກອບ — ການອ້າງອີງເຕັມ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.