按钮
Button
把一个可执行动作呈现为明确的点击目标。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'button',
{
"label": "执行示例",
"counter": true,
"secondaryLabel": "不可用"
}
);
view.element.addEventListener('ui:action', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
提交、保存、取消或触发当前界面的操作。
什么时候不用
跳转到另一个地址应优先使用链接语义。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "按钮" |
disabled | false |
variant | "primary" |
counter | false |
secondaryLabel | "" |
className | "" |
attributes | {} |
事件
ui:action
INTERACTION NOTES
交互与可访问性
- 使用原生 button，并声明 type。
- 仅图标按钮也要有可读名称。
和相似组件的区别
按钮触发动作；链接定位目的地，开关改变持续状态。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Web Components · 来源核验