日期选择输入
在有限日期范围中选定一天。
查看该条目内容卡片
Card
把一个可独立理解的对象和相关动作组织在一起。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'card'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
摘要、产物入口或可比较对象。
什么时候不用
高度重复的结构化记录通常用列表或表格更紧凑。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
title | "日期选择" |
badge | "输入" |
content | "在有限日期范围中选定一天。" |
href | "/components/date-picker/" |
linkLabel | "查看该条目" |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 卡片标题使用正确层级。
- 避免整卡链接内再嵌套其他链接或按钮。
和相似组件的区别
Card 是内容分组；Artifact 还需要编辑、保存和版本等业务语义。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验