Revisión de Lit 與 Tailwind CSS 表單範例

timmy revisó este gist 10 months ago. Ir a la revisión

Sin cambios

timmy revisó este gist 10 months ago. Ir a la revisión

Sin cambios

timmy revisó este gist 1 year ago. Ir a la revisión

1 file changed, 84 insertions

lit_form_example.html(archivo creado)

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

Siguiente Anterior