Revision of Lit 與 Tailwind CSS 表單範例

timmy revised this gist 10 months ago. Go to revision

No changes

timmy revised this gist 10 months ago. Go to revision

No changes

timmy revised this gist 1 year ago. Go to revision

1 file changed, 84 insertions

lit_form_example.html(file created)

		@@ -0,0 +1,84 @@
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>
11	+	</head>
12	+	<body class="bg-gray-100 flex items-center justify-center min-h-screen">
13	+	<!-- 使用自訂元件 -->
14	+	<custom-form></custom-form>
15	+
16	+	<script type="module">
17	+	import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
18	+
19	+	class CustomForm extends LitElement {
20	+	// 禁用 Shadow DOM，讓 Tailwind CSS 全域樣式生效
21	+	createRenderRoot() {
22	+	return this; // 渲染到 Light DOM
23	+	}
24	+
25	+	render() {
26	+	return html`
27	+	<form class="max-w-md w-full bg-white p-6 rounded-lg shadow-lg">
28	+	<!-- Username -->
29	+	<label class="block mb-4">
30	+	<span class="block text-sm font-medium text-slate-700">Username</span>
31	+	<input
32	+	type="text"
33	+	value="tbone"
34	+	disabled
35	+	class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
36	+	focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
37	+	disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
38	+	invalid:border-pink-500 invalid:text-pink-600
39	+	focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
40	+	/>
41	+	</label>
42	+
43	+	<!-- Email -->
44	+	<label class="block mb-4">
45	+	<span class="block text-sm font-medium text-slate-700">Email</span>
46	+	<input
47	+	type="email"
48	+	placeholder="yourname@example.com"
49	+	class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
50	+	focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
51	+	invalid:border-pink-500 invalid:text-pink-600
52	+	focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
53	+	/>
54	+	</label>
55	+
56	+	<!-- Password -->
57	+	<label class="block mb-4">
58	+	<span class="block text-sm font-medium text-slate-700">Password</span>
59	+	<input
60	+	type="password"
61	+	placeholder="Enter your password"
62	+	class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
63	+	focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
64	+	invalid:border-pink-500 invalid:text-pink-600
65	+	focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
66	+	/>
67	+	</label>
68	+
69	+	<!-- Submit Button -->
70	+	<button
71	+	type="submit"
72	+	class="mt-4 w-full bg-sky-500 hover:bg-sky-600 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-400"
73	+	>
74	+	Submit
75	+	</button>
76	+	</form>
77	+	`;
78	+	}
79	+	}
80	+
81	+	customElements.define('custom-form', CustomForm);
82	+	</script>
83	+	</body>
84	+	</html>

Newer Older