iter: c01 button/checkbox/switch 补 disabled 禁用态(布尔或信号绑定)

This commit is contained in:
HIsheR
2026-10-23 16:08:19 +08:00
parent 83bc1e241c
commit 2a5892a88c
12 changed files with 87 additions and 21 deletions
+2 -2
View File
@@ -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,
);
}
+2 -2
View File
@@ -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)); // 用户勾选写回信号
+2 -2
View File
@@ -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)); // 用户切换写回信号
+3
View File
@@ -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; // 变更回调
}