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

product_card.html · 3.8 KiB · HTML Неформатований

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Card</title>  <script src="https://cdn.tailwindcss.com"></script>  <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> </head> <body class="bg-gray-100 flex items-center justify-center min-h-screen">  <product-card></product-card> <script type="module"> import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; class ProductCard extends LitElement { // 禁用 Shadow DOM，讓 Tailwind CSS 生效 createRenderRoot() { return this; // 渲染到 Light DOM } render() { return html` <div class="flex font-sans bg-white shadow-lg rounded-lg overflow-hidden max-w-4xl">  <div class="flex-none w-1/3 relative"> <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" /> </div>  <form class="flex-auto p-6"> <div class="flex flex-wrap items-center"> <h1 class="flex-auto text-2xl font-bold text-slate-900"> Modern Utility Jacket </h1> <div class="text-xl font-semibold text-slate-500"> $129.00 </div> <div class="w-full text-sm text-green-600 mt-2"> In stock and ready to ship </div> </div> <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200"> <div class="space-x-2 flex text-sm">  ${['XS', 'S', 'M', 'L', 'XL'].map( (size) => html` <label> <input class="sr-only peer" name="size" type="radio" value="${size.toLowerCase()}" /> <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"> ${size} </div> </label> ` )} </div> </div>  <div class="flex space-x-4 mb-6 text-sm font-medium"> <div class="flex-auto flex space-x-4"> <button class="h-10 px-6 font-semibold rounded-md bg-blue-500 text-white hover:bg-blue-600" type="submit"> Buy now </button> <button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900 hover:bg-gray-100" type="button"> Add to bag </button> </div> <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"> <svg width="24" height="24" fill="currentColor" aria-hidden="true"> <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" /> </svg> </button> </div>  <p class="text-sm text-slate-700"> Free shipping on orders over $100. </p> </form> </div> `; } } customElements.define('product-card', ProductCard); </script> </body> </html>

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>
90