All gists matching topic lit

timmy / Streamlit 整合 Lit Web Component

0 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 10 months ago

此範例展示如何在 Streamlit 應用中嵌入 Lit Web Component，而不依賴 CDN。使用 Web Components 技術，可封裝自訂 UI 元件，並透過 JavaScript 互動，適用於建立模組化的前端元件，提升 Web 應用的可維護性與重用性。

frontend interactive-gui javascript lit streamlit ui-design web-component

1	import streamlit as st
2	import streamlit.components.v1 as components
3
4	st.title("使用 Lit Web Component (無 CDN)")
5
6	lit_component = """
7	<script type="module">
8	class MyLitComponent extends HTMLElement {
9	constructor() {
10	super();

timmy / 自動化前端專案初始化腳本 (PowerShell)

0 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 10 months ago

這段 PowerShell 腳本建立一個專案目錄，初始化基本的前端專案結構，包括 index.html、src 資料夾及子目錄，並透過 npm 安裝必要的依賴 (lit、vite、serve)，最後列出目錄結構供檢查。

automation frontend lit npm powershell vite web-development

1	# 檢查是否提供了目錄名稱參數
2	if ($args.Length -eq 0) {
3	Write-Host "Usage: .\setup_project.ps1 <directory_name>"
4	exit 1
5	}
6
7	# 將參數設定為 PROJECT_DIR 變數
8	$PROJECT_DIR = $args[0]
9
10	# 嘗試建立目錄

timmy / 前端專案初始化腳本

1 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 10 months ago

這段 Bash 腳本建立一個專案目錄，初始化基本的前端專案結構（包括 index.html 和 src/components 資料夾），並透過 npm 安裝 lit、vite 和 serve，最後輸出目錄結構（排除 node_modules）。

automation bash frontend lit npm script vite

1	#!/bin/bash
2
3	# Check if the user provided a directory name as an argument
4	if [ -z "$1" ]; then
5	echo "Usage: $0 <directory_name>"
6	exit 1
7	fi
8
9	# Set the user-provided parameter to the PROJECT_DIR variable
10	PROJECT_DIR="$1"

timmy / Lit 與 Tailwind CSS 表單範例

0 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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 Kedvelések

0 forkok

1 fájlok

Utoljára aktív 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;