HTML 教學
最簡單嘅起步:複製帶有 Lily 類別掛鉤嘅語義化 HTML,加一份樣式表,發佈。喺任何 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 標籤、類別掛鉤、鍵盤行為同無障礙合約。呢啲檔案 就係 函式庫 — 複製你需要嘅部分,然後上路。
步驟 2 — 你第一個元件
打開 components/button.html,或者直接寫標記 — 類別掛鉤就係合約:
<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>,使用最具體嘅輸入類型,並且剛好帶一個 kebab-case 類別掛鉤。
檢查你嘅成果: 喺瀏覽器打開頁面。佢睇落好簡單 — 正如預期:樣式仲喺前面。按 Tab:焦點會移過每個控制項,標籤會被讀出,提交都運作。行為已經完成;外觀屬於你,而且係下一步。
步驟 4 — 加樣式
針對掛鉤寫 CSS:
.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 個現成主題之一,同樣嘅標記即刻亮起:
<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 個元件,附樣式、可搜尋同示範。