Skip to content

Commit 7b54cc6

Browse files
KingBesKingBes
committed
优化表单
1 parent c93a9ad commit 7b54cc6

9 files changed

Lines changed: 532 additions & 43 deletions

File tree

‎bun.lock‎

Lines changed: 131 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎debug/bunny.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2602,6 +2602,111 @@ hr {
26022602
outline: none;
26032603
}
26042604

2605+
&:disabled {
2606+
opacity: 0.6;
2607+
cursor: not-allowed;
2608+
}
2609+
}
2610+
2611+
/* 单选框 */
2612+
.bny-radio {
2613+
width: 18px;
2614+
height: 18px;
2615+
display: inline-block;
2616+
vertical-align: middle;
2617+
border: 1px solid var(--default-shallow);
2618+
border-radius: 50%;
2619+
transition: var(--transition);
2620+
accent-color: var(--default);
2621+
2622+
/* 选中状态 */
2623+
&:checked {
2624+
background-color: var(--default);
2625+
border-color: var(--default);
2626+
}
2627+
2628+
/* 禁用状态 */
2629+
&:disabled {
2630+
opacity: 0.6;
2631+
cursor: not-allowed;
2632+
}
2633+
2634+
/* 鼠标悬停状态 */
2635+
&:hover {
2636+
border-color: var(--default-shallow);
2637+
}
2638+
}
2639+
2640+
/* 复选框 */
2641+
.bny-checkbox {
2642+
width: 18px;
2643+
height: 18px;
2644+
display: inline-block;
2645+
vertical-align: middle;
2646+
border: 1px solid var(--default-shallow);
2647+
border-radius: var(--border-radius);
2648+
transition: var(--transition);
2649+
accent-color: var(--default);
2650+
2651+
/* 选中状态 */
2652+
&:checked {
2653+
background-color: var(--default);
2654+
border-color: var(--default);
2655+
}
2656+
2657+
/* 禁用状态 */
2658+
&:disabled {
2659+
opacity: 0.6;
2660+
cursor: not-allowed;
2661+
}
2662+
2663+
/* 鼠标悬停状态 */
2664+
&:hover {
2665+
border-color: var(--default);
2666+
}
2667+
}
2668+
2669+
/* 开关框 */
2670+
.bny-switch {
2671+
width: 50px;
2672+
height: 22px;
2673+
display: inline-block;
2674+
vertical-align: middle;
2675+
appearance: none;
2676+
border: 1px solid var(--default-shallow);
2677+
border-radius: var(--border-radius);
2678+
transition: var(--transition);
2679+
position: relative;
2680+
border-radius: 22px;
2681+
2682+
&::after {
2683+
content: "";
2684+
position: absolute;
2685+
top: 2px;
2686+
left: 2px;
2687+
width: 16px;
2688+
height: 16px;
2689+
background-color: var(--default-shallow);
2690+
border-radius: 50%;
2691+
transition: var(--transition);
2692+
}
2693+
2694+
/* 选中状态 */
2695+
&:checked {
2696+
background-color: var(--default-shallow);
2697+
}
2698+
2699+
&:checked::after {
2700+
transform: translateX(28px);
2701+
background-color: var(--default);
2702+
}
2703+
2704+
&:hover {
2705+
cursor: pointer;
2706+
border-color: var(--default);
2707+
}
2708+
2709+
/* 禁用状态 */
26052710
&:disabled {
26062711
opacity: 0.6;
26072712
cursor: not-allowed;

‎debug/bunny.js‎

Lines changed: 42 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎debug/bunny.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"debug": "vite build --debug",
44
"build": "vite build"
55
},
6-
"dependencies": {
7-
"terser": "^5.44.1"
6+
"devDependencies": {
7+
"terser": "^5.46.0",
8+
"vite": "^7.3.1"
89
}
910
}

‎src/css/form.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,111 @@
7070
outline: none;
7171
}
7272

73+
&:disabled {
74+
opacity: 0.6;
75+
cursor: not-allowed;
76+
}
77+
}
78+
79+
/* 单选框 */
80+
.bny-radio {
81+
width: 18px;
82+
height: 18px;
83+
display: inline-block;
84+
vertical-align: middle;
85+
border: 1px solid var(--default-shallow);
86+
border-radius: 50%;
87+
transition: var(--transition);
88+
accent-color: var(--default);
89+
90+
/* 选中状态 */
91+
&:checked {
92+
background-color: var(--default);
93+
border-color: var(--default);
94+
}
95+
96+
/* 禁用状态 */
97+
&:disabled {
98+
opacity: 0.6;
99+
cursor: not-allowed;
100+
}
101+
102+
/* 鼠标悬停状态 */
103+
&:hover {
104+
border-color: var(--default-shallow);
105+
}
106+
}
107+
108+
/* 复选框 */
109+
.bny-checkbox {
110+
width: 18px;
111+
height: 18px;
112+
display: inline-block;
113+
vertical-align: middle;
114+
border: 1px solid var(--default-shallow);
115+
border-radius: var(--border-radius);
116+
transition: var(--transition);
117+
accent-color: var(--default);
118+
119+
/* 选中状态 */
120+
&:checked {
121+
background-color: var(--default);
122+
border-color: var(--default);
123+
}
124+
125+
/* 禁用状态 */
126+
&:disabled {
127+
opacity: 0.6;
128+
cursor: not-allowed;
129+
}
130+
131+
/* 鼠标悬停状态 */
132+
&:hover {
133+
border-color: var(--default);
134+
}
135+
}
136+
137+
/* 开关框 */
138+
.bny-switch {
139+
width: 50px;
140+
height: 22px;
141+
display: inline-block;
142+
vertical-align: middle;
143+
appearance: none;
144+
border: 1px solid var(--default-shallow);
145+
border-radius: var(--border-radius);
146+
transition: var(--transition);
147+
position: relative;
148+
border-radius: 22px;
149+
150+
&::after {
151+
content: "";
152+
position: absolute;
153+
top: 2px;
154+
left: 2px;
155+
width: 16px;
156+
height: 16px;
157+
background-color: var(--default-shallow);
158+
border-radius: 50%;
159+
transition: var(--transition);
160+
}
161+
162+
/* 选中状态 */
163+
&:checked {
164+
background-color: var(--default-shallow);
165+
}
166+
167+
&:checked::after {
168+
transform: translateX(28px);
169+
background-color: var(--default);
170+
}
171+
172+
&:hover {
173+
cursor: pointer;
174+
border-color: var(--default);
175+
}
176+
177+
/* 禁用状态 */
73178
&:disabled {
74179
opacity: 0.6;
75180
cursor: not-allowed;

‎src/js/bunny.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
11
window.bny = {
2+
/**
3+
* 查询子元素
4+
*
5+
* @param {HTMLElement} elt 元素
6+
* @param {String} cssSelector CSS选择器
7+
* @returns {HTMLElement|null} 子元素
8+
*/
9+
queryChild: function (elt, cssSelector) {
10+
return elt.querySelector(":scope>" + cssSelector)
11+
},
12+
/**
13+
* 查询所有子元素
14+
*
15+
* @param {HTMLElement} elt 元素
16+
* @param {String} cssSelector CSS选择器
17+
* @returns {NodeList} 子元素数组
18+
*/
19+
queryChildAll: function (elt, cssSelector) {
20+
return elt.querySelectorAll(":scope>" + cssSelector)
21+
},
222
/**
323
* 获取元素在数组中的索引
424
*

0 commit comments

Comments
 (0)