Revisioni di Lit 與 Tailwind CSS 表單範例

timmy ha revisionato questo gist 10 months ago. Vai alla revisione

Nessuna modifica

timmy ha revisionato questo gist 10 months ago. Vai alla revisione

Nessuna modifica

timmy ha revisionato questo gist 1 year ago. Vai alla revisione

1 file changed, 84 insertions

lit_form_example.html(file creato)

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

Più nuovi Più vecchi