iter: c01 button/checkbox/switch 补 disabled 禁用态(布尔或信号绑定)
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import { h } from '@ui-arch/frame';
|
||||
import type { ButtonProps } from './types.js';
|
||||
|
||||
/*** 按钮:variant 控制视觉强度,onClick 为点击回调 ***/
|
||||
/*** 按钮:variant 控制视觉强度,disabled 支持布尔或信号禁用,onClick 为点击回调 ***/
|
||||
export function button(props: ButtonProps): HTMLElement {
|
||||
return h(
|
||||
'button',
|
||||
{ class: `ua-btn ua-btn-${props.variant ?? 'primary'}`, onClick: props.onClick },
|
||||
{ class: `ua-btn ua-btn-${props.variant ?? 'primary'}`, disabled: props.disabled, onClick: props.onClick }, // false/undefined 移除属性,Signal 走响应式
|
||||
props.label,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { effect, h } from '@ui-arch/frame';
|
||||
import type { CheckboxProps } from './types.js';
|
||||
|
||||
/*** 复选框:checked 信号双向绑定,onChange 为变更回调 ***/
|
||||
/*** 复选框:checked 信号双向绑定,disabled 支持布尔或信号禁用,onChange 为变更回调 ***/
|
||||
export function checkbox(props: CheckboxProps): HTMLElement {
|
||||
const el = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement;
|
||||
const el = h('input', { type: 'checkbox', class: 'ua-checkbox', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性,Signal 走响应式
|
||||
if (props.checked) {
|
||||
const checked = props.checked;
|
||||
el.addEventListener('change', () => checked(el.checked)); // 用户勾选写回信号
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { effect, h } from '@ui-arch/frame';
|
||||
import type { SwitchProps } from './types.js';
|
||||
|
||||
/*** 开关:checked 信号双向绑定,轨道 + 滑块的纯 CSS 实现 ***/
|
||||
/*** 开关:checked 信号双向绑定,disabled 支持布尔或信号禁用,轨道 + 滑块的纯 CSS 实现 ***/
|
||||
export function switchButton(props: SwitchProps): HTMLElement {
|
||||
const input = h('input', { type: 'checkbox', class: 'ua-switch-input' }) as HTMLInputElement;
|
||||
const input = h('input', { type: 'checkbox', class: 'ua-switch-input', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性,Signal 走响应式
|
||||
if (props.checked) {
|
||||
const checked = props.checked;
|
||||
input.addEventListener('change', () => checked(input.checked)); // 用户切换写回信号
|
||||
|
||||
@@ -12,6 +12,7 @@ export interface TooltipProps {
|
||||
export interface ButtonProps {
|
||||
label: string; // 按钮文案
|
||||
variant?: 'primary' | 'ghost' | 'danger'; // 视觉强度;缺省 primary
|
||||
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
|
||||
onClick?: () => void; // 点击回调
|
||||
}
|
||||
|
||||
@@ -48,6 +49,7 @@ export interface OptionItem {
|
||||
export interface CheckboxProps {
|
||||
label?: string; // 右侧文案;缺省不渲染
|
||||
checked?: Signal<boolean>; // 勾选状态信号,双向绑定
|
||||
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
|
||||
onChange?: (checked: boolean) => void; // 变更回调
|
||||
}
|
||||
|
||||
@@ -55,6 +57,7 @@ export interface CheckboxProps {
|
||||
export interface SwitchProps {
|
||||
label?: string; // 左侧文案;缺省不渲染
|
||||
checked?: Signal<boolean>; // 开关状态信号,双向绑定
|
||||
disabled?: boolean | Signal<boolean>; // 禁用态:布尔直接置位,传信号则动态同步
|
||||
onChange?: (checked: boolean) => void; // 变更回调
|
||||
}
|
||||
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
"api": {
|
||||
"entry": "src/index.ts",
|
||||
"exports": [
|
||||
"button(props):按钮,variant = primary | ghost | danger",
|
||||
"button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用",
|
||||
"textField(props):文本输入,value 信号双向绑定",
|
||||
"textarea(props):多行输入,value 信号双向绑定",
|
||||
"checkbox(props):复选框,checked 信号双向绑定",
|
||||
"switchButton(props):开关,checked 信号双向绑定",
|
||||
"checkbox(props):复选框,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"switchButton(props):开关,checked 信号双向绑定,disabled 支持布尔或信号禁用",
|
||||
"select(props):自绘下拉选择(非原生 select),value 信号双向绑定,点外部 / Esc 关闭,选项弹层带微动画",
|
||||
"radioGroup(props):单选组,options + value 信号双向绑定",
|
||||
"card(props, ...children):卡片容器",
|
||||
@@ -95,6 +95,11 @@
|
||||
"d": "视觉强度;缺省 primary",
|
||||
"df": "primary"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
"d": "禁用态:布尔直接置位,传信号则动态同步"
|
||||
},
|
||||
{
|
||||
"n": "onClick",
|
||||
"t": "() => void",
|
||||
@@ -188,6 +193,11 @@
|
||||
"t": "string",
|
||||
"d": "右侧文案;缺省只渲染勾选框"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
"d": "禁用态:布尔直接置位,传信号则动态同步"
|
||||
},
|
||||
{
|
||||
"n": "onChange",
|
||||
"t": "(checked: boolean) => void",
|
||||
@@ -217,6 +227,11 @@
|
||||
"t": "string",
|
||||
"d": "左侧文案"
|
||||
},
|
||||
{
|
||||
"n": "disabled",
|
||||
"t": "boolean | Signal<boolean>",
|
||||
"d": "禁用态:布尔直接置位,传信号则动态同步"
|
||||
},
|
||||
{
|
||||
"n": "onChange",
|
||||
"t": "(checked: boolean) => void",
|
||||
|
||||
@@ -773,6 +773,17 @@
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* —— 通用禁用态:置灰 + 禁用光标 —— */
|
||||
.ua-btn:disabled,
|
||||
.ua-checkbox:disabled,
|
||||
.ua-switch-input:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ua-switch-input:disabled + .ua-switch-track {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* —— 无障碍:用户偏好减少动效时关闭全部动画 —— */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ua-btn,
|
||||
|
||||
Reference in New Issue
Block a user