All gists matching topic javascript

timmy / Lit 與 Tailwind CSS 表單範例

0 likes
0 forks
1 files
Last active 10 months ago
這段 HTML 結合 Lit 與 Tailwind CSS，建立了一個自訂 Web Component <custom-form>，包含 使用者名稱（唯讀）、電子郵件、密碼輸入欄位及提交按鈕，並透過 LitElement 繪製至 Light DOM 以確保 Tailwind CSS 樣式生效。此範例適用於 動態 Web 表單開發，可作為登入或註冊介面，並可進一步擴展以支援更多互動功能。
form html javascript lit tailwindcss ux-design web-components
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 likes
0 forks
1 files
Last active 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <beach-house-card>，用於顯示 海灘別墅的資訊卡片。它包含 標題、房屋圖片集、評價、地點、描述與按鈕，適用於 房屋租賃平台、旅遊網站或 Airbnb 風格的 UI，並支援 響應式設計與深色模式。
frontend javascript lit responsive-design tailwindcss web-components
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 和 Tailwind CSS 建立商品卡片

0 likes
0 forks
1 files
Last active 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <product-card>，用於顯示 商品資訊卡片。它包含 商品圖片、名稱、價格、庫存狀態、尺寸選擇、購買按鈕及收藏按鈕，適用於 電商網站、購物平台或商品展示頁面，並支援 響應式設計，提供現代且直覺的購物體驗。
ecommerce javascript lit tailwindcss ui-design webcomponents
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>Product 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 與 Tailwind CSS 建立 Web Component

0 likes
0 forks
1 files
Last active 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <my-component>，用於展示 帶有標題、描述和按鈕的簡單 UI 卡片。它示範了 如何在 Lit 中使用 Tailwind CSS，並透過 Light DOM 渲染確保樣式生效，適用於 前端開發測試、組件設計或 UI 開發的快速原型。
frontend javascript lit tailwindcss ui-design webcomponents
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 with Tailwind CSS</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 與 Animate.css 建立動態 Web 元件

0 likes
0 forks
1 files
Last active 10 months ago
這段 HTML 結合 Lit 和 Animate.css，建立了一個 自訂 Web Component <my-component>，透過 Animate.css 提供彈跳（bounce）動畫效果，讓文字顯示時具有動態感。它示範了 如何在 Lit 中整合外部 CSS 動畫庫，適用於 前端 UI 動畫、互動式網頁元件或吸引使用者注意的視覺效果設計。
animatecss frontend javascript lit ui-animation webcomponents
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 with Animate.css</title>
7 <!-- 引入 Animate.css -->
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
9 <!-- 引入 Lit -->
10 <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>

timmy / 使用 Lit 建立 Web Component

0 likes
0 forks
1 files
Last active 10 months ago
這段 HTML 結合 Lit（透過 CDN 載入），建立了一個自訂 Web 元件 <simple-greeting>，用於 顯示問候語。該元件支援 name 屬性，可動態變更顯示的名稱，並透過 LitElement 定義樣式與繪製邏輯。這適用於 前端 UI 元件開發、動態內容繪製，並展示了如何使用 Web Components 來構建 可重用、獨立且輕量的前端元件。
custom-elements frontend javascript lit ui-development 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 likes
0 forks
1 files
Last active 10 months ago
這段 HTML + Lit 程式碼使用 Web Components 技術，建立了一個 年份時間軸 (<timeline-element>)，用於 以視覺化方式顯示歷史事件或時間序列。它包含 多個事件 (<event-element>)，每個事件都有標題和描述，並根據奇偶數自動 排列在時間軸的左右兩側。此時間軸支援 動態效果（懸停陰影、點擊事件），並針對 手機響應式調整顯示方式，適用於 歷史紀錄、產品發展時間軸、事件展示 等場景，提供 互動性高、現代化的時間軸視覺呈現。
interactive javascript lit responsive-design timeline ui web-components
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 likes
0 forks
1 files
Last active 10 months ago
這段 HTML + Lit 程式碼建立了一個 自訂 Web Component <my-card>，用於顯示 標題 (title) 和內容 (content) 的卡片元件，並透過 Shadow DOM 確保內部樣式與外部頁面樣式相互隔離。它示範了 如何使用 Lit 定義 Web Components，並確保內部 CSS 只影響元件本身，適用於 可重用 UI 元件開發、獨立樣式管理、提升前端模組化，讓開發者能更輕鬆建立可組合的 UI 元件。
custom-elements frontend javascript lit shadow-dom ui-development 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 模組範例</title>
7 <script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script>
8 </head>
9 <body>

timmy / Leaflet 互動地圖應用

0 likes
0 forks
1 files
Last active 10 months ago
此程式使用 Leaflet 建立一個互動地圖，並整合標記群集、地理搜尋、繪圖工具、量測工具及路徑規劃功能。使用者可以在地圖上添加標記、繪製形狀、量測距離，並規劃路線，適用於 GIS 應用和導航服務。
geolocation gis interactive-map javascript leaflet mapping navigation web-development
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Leaflet 地圖範例</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
8 <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
9 <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
10 <style>

timmy / Leaflet 標記與互動地圖

0 likes
0 forks
1 files
Last active 10 months ago
此範例使用 Leaflet 在 OpenStreetMap 上顯示多個標記，並附加彈出視窗說明不同地點的資訊。地圖支援點擊事件，可顯示使用者點擊的座標，適用於地理資訊應用和旅遊地圖開發。
geolocation gis interactive-map javascript leaflet mapping markers openstreetmap web-development
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Leaflet 地圖範例</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
8 <style>
9 #map {
10 height: 600px;
Newer Older

Powered by Opengist ⋅ Load: 202ms⋅

English