110 lines
5.9 KiB
JSON
110 lines
5.9 KiB
JSON
{
|
||
"slug": "notificationpro",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端只交付右上角通知的样式：容器固定定位、卡片配色与四色图标状态类，行为需业务自己写。",
|
||
"usage": [
|
||
"容器 .kole-notification-wrap 用 position:fixed 固定在 top/right 16px、z-index 3000、宽度 320px，纵向 flex 排列并给 10px 间距（NotificationPro.css:3-5）。",
|
||
"容器设了 pointer-events:none，只有卡片 .kole-notification 把指针事件打开，所以空白区域不会挡住页面点击（NotificationPro.css:4,6）。",
|
||
"类型态由 .kole-notification.is-success / .is-error / .is-warning / .is-info 四组选择器表达，它们只改图标底色，不改卡片边框（NotificationPro.css:9-12）。",
|
||
"卡片内部是 flex 三段：.kole-notification-icon 固定 18×18 圆形、.kole-notification-body 占满剩余空间、.kole-notification-close 靠右（NotificationPro.css:6,8,13,16）。",
|
||
"标题 14px/500 用 --kole-color-text-title，描述 13px 用 --kole-color-text-secondary 且上边距 4px，字号层级完全靠这两个类（NotificationPro.css:14-15）。",
|
||
"容器字体栈写成 var(--font-family, 系统栈兜底)，没有引用其它组件样式，可单独把这一份 CSS 拷进任意页面（NotificationPro.css:5）。"
|
||
],
|
||
"bestPractices": [
|
||
"卡片投影是硬编码的 0 4px 12px rgba(0,0,0,0.12)，与令牌体系无关；换主题时这一处需要手工改（NotificationPro.css:6）。",
|
||
"四条 is-* 规则都写成「.kole-notification.is-success .kole-notification-icon」后代选择器，所以类型类必须加在卡片上而不是图标上，加错位置颜色不生效（NotificationPro.css:9-12）。",
|
||
"容器宽度是固定 320px 而非 max-width，窄屏下不会自适应；移动端复用时需要自己加重写（NotificationPro.css:3）。",
|
||
"关闭图标只有颜色与 cursor:pointer，没有 hover 态与点击态样式；如果要补交互反馈，加在 .kole-notification-close:hover 上即可（NotificationPro.css:16）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props 或事件概念，交付物就是类名体系：容器类定位置、卡片类定外观、is-* 状态类定类型色，内部三个结构类负责排版；接数据与开关逻辑由使用方自己写。",
|
||
"table": [
|
||
{
|
||
"name": "kole-notification-wrap",
|
||
"type": "布局类名",
|
||
"desc": "fixed 右上角容器，宽 320px、z-index 3000、pointer-events:none"
|
||
},
|
||
{
|
||
"name": "kole-notification",
|
||
"type": "基础类名",
|
||
"desc": "单条卡片：白底、1px 边框、圆角 8px、padding 14px 16px、恢复指针事件"
|
||
},
|
||
{
|
||
"name": "kole-notification-icon",
|
||
"type": "结构类名",
|
||
"desc": "18×18 圆形图标位，flex-shrink:0，文字反色居中"
|
||
},
|
||
{
|
||
"name": "kole-notification-body",
|
||
"type": "结构类名",
|
||
"desc": "flex:1 的正文列容器"
|
||
},
|
||
{
|
||
"name": "kole-notification-title",
|
||
"type": "结构类名",
|
||
"desc": "14px/500 标题，颜色取 --kole-color-text-title"
|
||
},
|
||
{
|
||
"name": "kole-notification-desc",
|
||
"type": "结构类名",
|
||
"desc": "13px 描述，上边距 4px，行高 1.5"
|
||
},
|
||
{
|
||
"name": "kole-notification-close",
|
||
"type": "结构类名",
|
||
"desc": "关闭图标位，次要文字色加 pointer 光标"
|
||
},
|
||
{
|
||
"name": "is-success",
|
||
"type": "状态类名",
|
||
"desc": "图标底色 --kole-color-success，与 .kole-notification 同节点"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "状态类名",
|
||
"desc": "图标底色 --kole-color-error"
|
||
},
|
||
{
|
||
"name": "is-warning",
|
||
"type": "状态类名",
|
||
"desc": "图标底色 --kole-color-warning"
|
||
},
|
||
{
|
||
"name": "is-info",
|
||
"type": "状态类名",
|
||
"desc": "图标底色 --kole-color-brand（信息态的强调色）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"样式层不提供任何语义：role=\"alert\" 或 aria-live 必须由使用方的标记补上，否则视觉弹出对读屏器完全静默（NotificationPro.css:6-16 无相关属性）。",
|
||
"标签文字色 --kole-color-text-title 与 --kole-color-text-secondary 都落在白底卡片上，保证标题与描述的对比度；不要为了「弱化」把描述色再调浅（NotificationPro.css:14-15）。",
|
||
"关闭图标没有 :focus-visible 样式可挂，因为它依赖的元素本身不参与键盘焦点；若要改成 button，需要在这里补一条焦点环规则（NotificationPro.css:16）。",
|
||
"类型色只作用于 18×18 装饰图标，正文保持中性色，符合「不靠颜色单独传达信息」的最低要求——前提是文案里写了状态（NotificationPro.css:9-12）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/NotificationPro.css",
|
||
"kind": "CSS 端全部交付物",
|
||
"desc": "NotificationPro.css —— 17 行样式源码：右上角容器、卡片、三个结构类、四色 is-* 状态"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"notificationpro-ex-1",
|
||
"notificationpro-ex-2",
|
||
"notificationpro-ex-3",
|
||
"notificationpro-ex-4"
|
||
],
|
||
"notes": [
|
||
"容器定位与 pointer-events：frameworks/NotificationPro.css:3-5",
|
||
"卡片外观（含硬编码投影）：frameworks/NotificationPro.css:6",
|
||
"四类 is-* 状态选择器：frameworks/NotificationPro.css:9-12",
|
||
"正文两处字号与颜色：frameworks/NotificationPro.css:14-15",
|
||
"关闭图标样式：frameworks/NotificationPro.css:16",
|
||
"NotificationPro.css 17 行是右上角固定容器加单条卡片，四类 is-* 只改图标底色：文件里没有代码块，因为 css 端 byEnd.code 为空字符串，示例由 exampleIds 给出。",
|
||
"契约 dims 的 state=expanded/collapsed 在本文件里同样没有对应类名，未写进 table。"
|
||
]
|
||
}
|