All gists matching topic frontend

timmy / 📊 Tabulator ESM 範例：純瀏覽器也能輕鬆玩表格！

0 j'aimes
0 forks
1 fichiers
Dernière activité 8 months ago
使用 ES Module 方式導入 Tabulator.js，不靠打包工具就能打造互動表格，支援排序、欄位配置，超輕巧前端神器 ✨
data-table esm frontend interactive-ui javascript tabulator vanilla-js
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>Tabulator ESM 範例</title>
7 <!-- 引入 Tabulator 的 CSS -->
8 <link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
9 </head>
10 <body>

timmy / 🚀 網站轉址全攻略：前後端 redirect 一次看懂！

0 j'aimes
0 forks
6 fichiers
Dernière activité 8 months ago
從 Express、Flask 到 PHP、HTML 與 JavaScript，轉址技巧一次收下！快轉跳轉不求人 ✨
backend express flask frontend html javascript php redirect web-dev
1 const express = require('express');
2 const app = express();
3
4 app.get('/oldpage', (req, res) => {
5 res.redirect('https://www.newpage.com');
6 });
7
8 app.listen(3000, () => {
9 console.log('Server is running on port 3000');
10 });

timmy / Streamlit 整合 Lit Web Component

0 j'aimes
0 forks
1 fichiers
Dernière activité 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 j'aimes
0 forks
1 fichiers
Dernière activité 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 j'aimes
0 forks
1 fichiers
Dernière activité 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 建立自訂 Web 元件

0 j'aimes
0 forks
1 fichiers
Dernière activité 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 建立 Web Component

0 j'aimes
0 forks
1 fichiers
Dernière activité 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 j'aimes
0 forks
1 fichiers
Dernière activité 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 j'aimes
0 forks
1 fichiers
Dernière activité 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 建立具 Shadow DOM 的自訂元件

0 j'aimes
0 forks
1 fichiers
Dernière activité 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>
Plus récent Plus ancien

Propulsé par Opengist ⋅ Load: 207ms⋅

Français