Drama Ling 設計元件庫

歡迎使用 Drama Ling 設計元件庫

這是一個基於 HTML/CSS 的設計元件系統，取代傳統的 Figma 設計工具。所有元件都可以直接複製使用，並已針對響應式設計和無障礙性進行優化。

ℹ️

快速開始

點擊左側導航選擇元件，每個元件都包含預覽效果和可複製的 HTML/CSS 代碼。

按鈕 Buttons

提供多種樣式和尺寸的按鈕元件，支援主要、次要、成功、危險等狀態。

基礎按鈕

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-success">成功按鈕</button>
<button class="btn btn-danger">危險按鈕</button>
<button class="btn btn-text">文字按鈕</button>

按鈕尺寸

<button class="btn btn-primary btn-sm">小按鈕</button>
<button class="btn btn-primary">標準按鈕</button>
<button class="btn btn-primary btn-lg">大按鈕</button>

按鈕狀態

<button class="btn btn-primary">正常狀態</button>
<button class="btn btn-primary" disabled>禁用狀態</button>
<button class="btn btn-icon btn-primary">🎮</button>

按鈕群組

<div class="btn-group">
  <button class="btn btn-primary">左</button>
  <button class="btn btn-primary">中</button>
  <button class="btn btn-primary">右</button>
</div>

輸入框 Input Fields

提供文字輸入、密碼、搜尋等多種輸入框樣式，支援驗證狀態顯示。

基礎輸入框

使用者名稱

電子郵件我們不會分享你的電子郵件

<div class="input-group">
  <label class="input-label">使用者名稱</label>
  <input type="text" class="input-field" placeholder="請輸入使用者名稱">
</div>

<div class="input-group">
  <label class="input-label required">電子郵件</label>
  <input type="email" class="input-field" placeholder="example@email.com">
  <span class="input-hint">我們不會分享你的電子郵件</span>
</div>

輸入狀態

成功狀態

錯誤狀態請輸入有效的內容

<input type="text" class="input-field success" value="正確的輸入">
<input type="text" class="input-field error" value="錯誤的輸入">
<span class="input-error">請輸入有效的內容</span>

卡片 Cards

用於展示內容的容器元件，支援標題、內容、操作按鈕等。

基礎卡片

卡片標題

副標題或描述

這是卡片的主要內容區域，可以放置任何內容。

<div class="card">
  <div class="card-header">
    <h3 class="card-title">卡片標題</h3>
    <div class="card-subtitle">副標題或描述</div>
  </div>
  <div class="card-body">
    這是卡片的主要內容區域，可以放置任何內容。
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">操作</button>
    <button class="btn btn-text btn-sm">取消</button>
  </div>
</div>

學習卡片

詞彙學習

Level 3

今日學習了 15 個新詞彙，完成率 75%

<div class="card card-learning">
  <div class="card-header">
    <h3 class="card-title">詞彙學習</h3>
    <div class="badge badge-level">Level 3</div>
  </div>
  <div class="card-body">
    今日學習了 15 個新詞彙，完成率 75%
  </div>
  <div class="card-progress">
    <div class="progress-bar">
      <div class="progress-fill" style="width: 75%"></div>
    </div>
  </div>
</div>

警告 Alerts

用於顯示重要訊息、警告或反饋的元件。

✓

成功！

你的操作已成功完成。

✕

錯誤

發生了錯誤，請稍後再試。

⚠

警告

請注意這個重要訊息。

ℹ

提示

這是一條有用的資訊。

<div class="alert alert-success">
  <span class="alert-icon">✓</span>
  <div class="alert-content">
    <div class="alert-title">成功！</div>
    <div class="alert-message">你的操作已成功完成。</div>
  </div>
  <button class="alert-close">✕</button>
</div>

徽章 Badges

用於標記狀態、分類或計數的小型元件。

主要次要成功危險警告資訊 Level 5

<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危險</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">資訊</span>
<span class="badge badge-level">Level 5</span>

進度條 Progress

展示任務進度或載入狀態的視覺化元件。

基礎進度條 (60%)

大型進度條 (40%)

條紋進度條 (80%)

<div class="progress">
  <div class="progress-bar" style="width: 60%"></div>
</div>

<div class="progress progress-lg">
  <div class="progress-bar" style="width: 40%"></div>
</div>

<div class="progress progress-striped">
  <div class="progress-bar" style="width: 80%"></div>
</div>

載入 Loading

顯示載入中狀態的動畫元件。

<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>

骨架屏

<div class="skeleton skeleton-title"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text" style="width: 80%;"></div>

生命值 Life Bar

遊戲化的生命值顯示元件。

❤️ ❤️ ❤️ ❤️ ❤️

<div class="life-bar">
  <span class="life-heart">❤️</span>
  <span class="life-heart">❤️</span>
  <span class="life-heart">❤️</span>
  <span class="life-heart empty">❤️</span>
  <span class="life-heart empty">❤️</span>
</div>

星級評分 Star Rating

用於評分或展示等級的星星元件。

⭐ ⭐ ⭐ ⭐ ⭐

<div class="star-rating">
  <span class="star active">⭐</span>
  <span class="star active">⭐</span>
  <span class="star active">⭐</span>
  <span class="star active">⭐</span>
  <span class="star">⭐</span>
</div>