iter(g286): 新增 noticeBar 单行通知条组件

This commit is contained in:
HIsheR
2026-10-26 23:16:30 +08:00
parent c4cf0afc7b
commit 85812abb6c
12 changed files with 288 additions and 12 deletions
+47 -1
View File
@@ -100,7 +100,8 @@
"relativeTime(props):把时间戳渲染成「3 分钟前」并自动刷新,超阈值改显示绝对日期,title 恒给精确值",
"sparkline(props):迷你趋势线,把数值序列压成折线(可填充 + 末点标记),无坐标轴无交互",
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细",
"progressRing(props):环形进度,SVG 双圆靠 dasharray 画弧 + 中心百分比,value 可传信号自动重绘"
"progressRing(props):环形进度,SVG 双圆靠 dasharray 画弧 + 中心百分比,value 可传信号自动重绘",
"noticeBar(props):单行通知条,语义色 + 左侧符号 + 可选跑马灯与关闭,适合页顶常驻播报"
],
"keyTypes": [
"ButtonProps",
@@ -4452,6 +4453,51 @@
"换色在父级设 color:进度弧读 currentColor,底环固定描边色(--ua-color-border),不引入第二个色源",
"这是个「环形进度条」,不是仪表盘:只表达 0-100 单一进度,多段占比请用饼图类组件"
]
},
{
"id": "noticeBar",
"title": "通知条 NoticeBar",
"demo": "sec-notice",
"props": [
{
"n": "text",
"t": "string",
"d": "通知正文;单行不换行,超宽需配合 scroll"
},
{
"n": "variant",
"t": "'info' | 'success' | 'warning' | 'danger'",
"d": "语义色;缺省 info"
},
{
"n": "icon",
"t": "string",
"d": "左侧符号;缺省按 variant 取(ℹ / ✓ / ! / ×)"
},
{
"n": "scroll",
"t": "boolean",
"d": "正文超宽时跑马灯滚动;缺省 false(静态,超出裁切)"
},
{
"n": "closable",
"t": "boolean",
"d": "是否显示关闭按钮;缺省 true"
},
{
"n": "onClose",
"t": "() => void",
"d": "关闭回调"
}
],
"example": "noticeBar({ text: '系统将于今晚 23:00 维护 10 分钟', scroll: true })",
"steps": [
"和 alert 的分工:alert 可多行带标题、占块;通知条只占一行,适合页顶常驻播报(维护公告、试用期提醒)",
"文案比容器宽就传 scroll: true:正文从右向左匀速走,悬停自动暂停,读得完不用追",
"只想播报不需要关闭就传 closable: false:右侧不再留 × 位,横条更紧凑",
"颜色只是第二线索:左侧符号按 variant 自动配(ℹ / ✓ / ! / ×),色弱或灰度打印也能分辨",
"跑马灯在减少动效偏好下自动停成静态首屏——完整原文始终在 title 里,不必为可访问性另写一份"
]
}
]
}