timmy / Lit 與 Tailwind CSS 表單範例
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML 結合 Lit 與 Tailwind CSS，建立了一個自訂 Web Component <custom-form>，包含 使用者名稱（唯讀）、電子郵件、密碼輸入欄位及提交按鈕，並透過 LitElement 繪製至 Light DOM 以確保 Tailwind CSS 樣式生效。此範例適用於 動態 Web 表單開發，可作為登入或註冊介面，並可進一步擴展以支援更多互動功能。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit Form Example</title> |
| 7 | <!-- 引入 Tailwind CSS --> |
| 8 | <script src="https://cdn.tailwindcss.com"></script> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
timmy / 使用 Lit 與 Tailwind CSS 建立自訂 Web 元件
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <beach-house-card>，用於顯示 海灘別墅的資訊卡片。它包含 標題、房屋圖片集、評價、地點、描述與按鈕，適用於 房屋租賃平台、旅遊網站或 Airbnb 風格的 UI，並支援 響應式設計與深色模式。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Beach House Card</title> |
| 7 | <!-- 引入 Tailwind CSS --> |
| 8 | <script src="https://cdn.tailwindcss.com"></script> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
timmy / 使用 Lit 建立 Web Component
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML 結合 Lit（透過 CDN 載入），建立了一個自訂 Web 元件 <simple-greeting>，用於 顯示問候語。該元件支援 name 屬性，可動態變更顯示的名稱，並透過 LitElement 定義樣式與繪製邏輯。這適用於 前端 UI 元件開發、動態內容繪製，並展示了如何使用 Web Components 來構建 可重用、獨立且輕量的前端元件。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit CDN Example</title> |
| 7 | </head> |
| 8 | <body> |
| 9 | <!-- 自定義元件 --> |
| 10 | <simple-greeting name="Lit"></simple-greeting> |
timmy / 使用 Lit 建立互動式年份時間軸
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML + Lit 程式碼使用 Web Components 技術，建立了一個 年份時間軸 (<timeline-element>)，用於 以視覺化方式顯示歷史事件或時間序列。它包含 多個事件 (<event-element>)，每個事件都有標題和描述，並根據奇偶數自動 排列在時間軸的左右兩側。此時間軸支援 動態效果（懸停陰影、點擊事件），並針對 手機響應式調整顯示方式，適用於 歷史紀錄、產品發展時間軸、事件展示 等場景，提供 互動性高、現代化的時間軸視覺呈現。
| 1 | <!doctype html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>年份時間軸 - Lit 元素</title> |
| 7 | <style> |
| 8 | body { |
| 9 | font-family: "Microsoft JhengHei", Arial, sans-serif; |
| 10 | background-color: #f0f0f0; |
timmy / 使用 Lit 建立具 Shadow DOM 的自訂元件
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML + Lit 程式碼建立了一個 自訂 Web Component <my-card>，用於顯示 標題 (title) 和內容 (content) 的卡片元件，並透過 Shadow DOM 確保內部樣式與外部頁面樣式相互隔離。它示範了 如何使用 Lit 定義 Web Components，並確保內部 CSS 只影響元件本身，適用於 可重用 UI 元件開發、獨立樣式管理、提升前端模組化，讓開發者能更輕鬆建立可組合的 UI 元件。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit 模組範例</title> |
| 7 | <script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script> |
| 8 | </head> |
| 9 | <body> |
timmy / 使用 Lit Web Components 建立精緻部落格文章展示
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML + Lit 程式碼建立了一個 動態部落格文章展示元件 <blog-post>，透過 Web Components 技術，使每篇文章可重用並具備獨立的樣式與結構。它包含 標題、作者、日期、內容與「閱讀更多」按鈕，並使用 Animate.css 提供動畫效果，使文章顯示時更流暢。此設計適用於 部落格、新聞平台或內容管理系統（CMS），能夠讓開發者輕鬆擴展與管理文章內容，提升前端開發的模組化與可維護性。
| 1 | <!doctype html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>精緻部落格文章展示</title> |
| 7 | <link |
| 8 | href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" |
| 9 | rel="stylesheet" |
| 10 | /> |
Neuer
Älter