មេរៀន HTML

អ្វីដែលអ្នកនឹងសាងសង់

ទម្រង់ទំនាក់ទំនងតូចមួយ — វាលបញ្ចូលដែលមានស្លាក ប៊ូតុងដាក់ស្នើ អាកប្បកិរិយាក្តារចុច និងកម្មវិធីអានអេក្រង់ពិតប្រាកដ — ដំបូងទទេស្អាត បន្ទាប់មកមានរចនាប័ទ្ម ក្នុងរយៈពេលប្រហែល ១០ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

អ្នកត្រូវការកម្មវិធីរុករក និងកម្មវិធីកែអត្ថបទ។ ប៉ុណ្ណឹងហើយ។ (git ជួយក្នុងការយកឯកសារសមាសភាគ ប៉ុន្តែអ្នកក៏អាចចម្លងវាពី GitHub ក្នុងកម្មវិធីរុករកផងដែរ។)

ជំហាន ១ — យកកូដ

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 អាកប្បកិរិយាក្តារចុច និងកិច្ចសន្យាភាពងាយស្រួលចូលប្រើរបស់វា។ ឯកសារ គឺ បណ្ណាល័យ — ចម្លងអ្វីដែលអ្នកត្រូវការ ហើយទៅ។

ជំហាន ២ — សមាសភាគដំបូងរបស់អ្នក

បើក components/button.htmlឬគ្រាន់តែសរសេរម៉ាកអាប់ — class hook ជាកិច្ចសន្យា៖

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

ដោយសារវាជា <button>ពិតប្រាកដ ការផ្តោតក្តារចុច ការធ្វើឱ្យសកម្មដោយ Enter និង Space និងតួនាទីប៊ូតុងដោយអចេតនាត្រឹមត្រូវរួចហើយ។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

<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>របស់វា ប្រើប្រភេទបញ្ចូលជាក់លាក់បំផុត និងមាន class hook kebab-case ពិតជាមួយ។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

សរសេរ 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 ដោយដៃទាំងស្រុង — ភ្ជាប់ស្បែករួចជាស្រេចមួយក្នុងចំណោម ៤៥ ហើយម៉ាកអាប់ដដែលនឹងភ្លឺឡើង៖

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

ជំហាន ៥ — ស្វែងយល់បន្ថែម

• តេស្តរបស់ឃ្លាំងដំណើរការក្នុងកម្មវិធីរុករកពិតប្រាកដ៖ pnpm install && pnpm test (WebDriverIO)។
• Storybook សម្រាប់សមាសភាគនីមួយៗ៖ pnpm run storybook.
• កម្មវិធីគំរូ HTML+CSS+JS បង្ហាញសមាសភាគទាំង ៥៧១ ដែលមានរចនាប័ទ្ម អាចស្វែងរកបាន និងបង្ហាញ។

ជំហានបន្ទាប់

• ស្បែក — ការប្តូរស្បែកពេលដំណើរការជាមួយ theme-picker។
• ជំនួយការចំណូលចិត្ត — ភាសា និងទំហំអក្សរ។
• កាតាឡុកសមាសភាគ — ឯកសារយោងពេញលេញ។

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។