使用 Lit 和 Tailwind CSS 建立商品卡片的修订

timmy 修订了这个 Gist 10 months ago. 转到此修订

没有任何变更

timmy 修订了这个 Gist 10 months ago. 转到此修订

没有任何变更

timmy 修订了这个 Gist 1 year ago. 转到此修订

1 file changed, 89 insertions

product_card.html(文件已创建)

		@@ -0,0 +1,89 @@
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>
11	+	</head>
12	+	<body class="bg-gray-100 flex items-center justify-center min-h-screen">
13	+	<!-- 使用自訂元件 -->
14	+	<product-card></product-card>
15	+
16	+	<script type="module">
17	+	import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
18	+
19	+	class ProductCard extends LitElement {
20	+	// 禁用 Shadow DOM，讓 Tailwind CSS 生效
21	+	createRenderRoot() {
22	+	return this; // 渲染到 Light DOM
23	+	}
24	+
25	+	render() {
26	+	return html`
27	+	<div class="flex font-sans bg-white shadow-lg rounded-lg overflow-hidden max-w-4xl">
28	+	<!-- 左側圖片 -->
29	+	<div class="flex-none w-1/3 relative">
30	+	<img src="https://dummyimage.com/300x400/ccc/000&text=Product+Image" alt="Product Image" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
31	+	</div>
32	+	<!-- 右側內容 -->
33	+	<form class="flex-auto p-6">
34	+	<div class="flex flex-wrap items-center">
35	+	<h1 class="flex-auto text-2xl font-bold text-slate-900">
36	+	Modern Utility Jacket
37	+	</h1>
38	+	<div class="text-xl font-semibold text-slate-500">
39	+	$129.00
40	+	</div>
41	+	<div class="w-full text-sm text-green-600 mt-2">
42	+	In stock and ready to ship
43	+	</div>
44	+	</div>
45	+	<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
46	+	<div class="space-x-2 flex text-sm">
47	+	<!-- 尺寸選擇 -->
48	+	${['XS', 'S', 'M', 'L', 'XL'].map(
49	+	(size) => html`
50	+	<label>
51	+	<input class="sr-only peer" name="size" type="radio" value="${size.toLowerCase()}" />
52	+	<div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
53	+	${size}
54	+	</div>
55	+	</label>
56	+	`
57	+	)}
58	+	</div>
59	+	</div>
60	+	<!-- 行動按鈕 -->
61	+	<div class="flex space-x-4 mb-6 text-sm font-medium">
62	+	<div class="flex-auto flex space-x-4">
63	+	<button class="h-10 px-6 font-semibold rounded-md bg-blue-500 text-white hover:bg-blue-600" type="submit">
64	+	Buy now
65	+	</button>
66	+	<button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900 hover:bg-gray-100" type="button">
67	+	Add to bag
68	+	</button>
69	+	</div>
70	+	<button class="flex-none flex items-center justify-center w-10 h-10 rounded-md text-slate-300 border border-slate-200 hover:text-red-500 hover:border-red-500" type="button" aria-label="Like">
71	+	<svg width="24" height="24" fill="currentColor" aria-hidden="true">
72	+	<path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
73	+	</svg>
74	+	</button>
75	+	</div>
76	+	<!-- 說明文字 -->
77	+	<p class="text-sm text-slate-700">
78	+	Free shipping on orders over $100.
79	+	</p>
80	+	</form>
81	+	</div>
82	+	`;
83	+	}
84	+	}
85	+
86	+	customElements.define('product-card', ProductCard);
87	+	</script>
88	+	</body>
89	+	</html>