使用 Lit 與 Tailwind CSS 建立自訂 Web 元件

beach_house_card.html · 4.9 KiB · HTML Raw

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beach House 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 dark:bg-gray-900 flex items-center justify-center min-h-screen">  <beach-house-card></beach-house-card> <script type="module"> import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; class BeachHouseCard extends LitElement { // 禁用 Shadow DOM 以使用 Tailwind CSS 的全域樣式 createRenderRoot() { return this; // 渲染到 Light DOM } render() { return html` <main class="py-6 px-4 sm:p-6 md:py-10 md:px-8"> <div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2">  <div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1"> <h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1> <p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p> </div>  <div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0"> <img src="https://dummyimage.com/640x360/ccc/000&text=Main+House" alt="Main House" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy"> <img src="https://dummyimage.com/320x180/aaa/000&text=Interior+1" alt="Interior 1" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> <img src="https://dummyimage.com/320x180/bbb/000&text=Interior+2" alt="Interior 2" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy"> </div>  <dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2"> <dt class="sr-only">Reviews</dt> <dd class="text-indigo-600 flex items-center dark:text-indigo-400"> <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500"> <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span> </dd> <dt class="sr-only">Location</dt> <dd class="flex items-center"> <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300"> <circle cx="1" cy="1" r="1" /> </svg> <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true"> <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" /> <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /> </svg> Collingwood, Ontario </dd> </dl>  <div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4"> <button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button> </div>  <p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400"> This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. </p> </div> </main> `; } } customElements.define('beach-house-card', BeachHouseCard); </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>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>
11	</head>
12	<body class="bg-gray-100 dark:bg-gray-900 flex items-center justify-center min-h-screen">
13	<!-- 使用自訂元件 -->
14	<beach-house-card></beach-house-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 BeachHouseCard extends LitElement {
20	// 禁用 Shadow DOM 以使用 Tailwind CSS 的全域樣式
21	createRenderRoot() {
22	return this; // 渲染到 Light DOM
23	}
24
25	render() {
26	return html`
27	<main class="py-6 px-4 sm:p-6 md:py-10 md:px-8">
28	<div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2">
29	<!-- 標題與描述 -->
30	<div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
31	<h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Beach House in Collingwood</h1>
32	<p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Entire house</p>
33	</div>
34	<!-- 圖片集 -->
35	<div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0">
36	<img src="https://dummyimage.com/640x360/ccc/000&text=Main+House" alt="Main House" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy">
37	<img src="https://dummyimage.com/320x180/aaa/000&text=Interior+1" alt="Interior 1" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
38	<img src="https://dummyimage.com/320x180/bbb/000&text=Interior+2" alt="Interior 2" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
39	</div>
40	<!-- 評價與地點 -->
41	<dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2">
42	<dt class="sr-only">Reviews</dt>
43	<dd class="text-indigo-600 flex items-center dark:text-indigo-400">
44	<svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500">
45	<path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
46	</svg>
47	<span>4.89 <span class="text-slate-400 font-normal">(128)</span></span>
48	</dd>
49	<dt class="sr-only">Location</dt>
50	<dd class="flex items-center">
51	<svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300">
52	<circle cx="1" cy="1" r="1" />
53	</svg>
54	<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true">
55	<path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" />
56	<path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
57	</svg>
58	Collingwood, Ontario
59	</dd>
60	</dl>
61	<!-- 按鈕 -->
62	<div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4">
63	<button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Check availability</button>
64	</div>
65	<!-- 描述 -->
66	<p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400">
67	This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat.
68	</p>
69	</div>
70	</main>
71	`;
72	}
73	}
74
75	customElements.define('beach-house-card', BeachHouseCard);
76	</script>
77	</body>
78	</html>
79