23 lines
3.9 KiB
JSON
23 lines
3.9 KiB
JSON
{
|
|
"slug": "formmodal",
|
|
"curated": true,
|
|
"title": "工具条触发的确认流",
|
|
"desc": "FormModal由操作按钮触发，覆盖在业务内容之上的样子。",
|
|
"uses": [
|
|
"modal",
|
|
"confirmmodal",
|
|
"card"
|
|
],
|
|
"markup": {
|
|
"html": "<div class=\"ksc-card\">\n <h3 class=\"ksc-title\">确认删除</h3>\n <p class=\"ksc-sub\">FormModal 表单弹窗</p>\n <div class=\"ksc-actions\">\n <button class=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button class=\"btn btn-danger btn-md\" type=\"button\">删除</button>\n </div>\n</div>\n<div class=\"kole-formmodal-mask\">\n <div class=\"kole-card\">\n <h3 class=\"ksc-title\">删除确认</h3>\n <p class=\"ksc-sub\">删除后不可恢复。</p>\n <div class=\"ksc-actions\">\n <button class=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button class=\"btn btn-danger btn-md\" type=\"button\">确定删除</button>\n </div>\n </div>\n</div>",
|
|
"jsx": "<div className=\"ksc-card\">\n <h3 className=\"ksc-title\">确认删除</h3>\n <p className=\"ksc-sub\">FormModal 表单弹窗</p>\n <div className=\"ksc-actions\">\n <button className=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button className=\"btn btn-danger btn-md\" type=\"button\">删除</button>\n </div>\n</div>\n<div className=\"kole-formmodal-mask\">\n <div className=\"kole-card\">\n <h3 className=\"ksc-title\">删除确认</h3>\n <p className=\"ksc-sub\">删除后不可恢复。</p>\n <div className=\"ksc-actions\">\n <button className=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button className=\"btn btn-danger btn-md\" type=\"button\">确定删除</button>\n </div>\n </div>\n</div>",
|
|
"vue2": "<template>\n <div>\n <div class=\"ksc-card\">\n <h3 class=\"ksc-title\">确认删除</h3>\n <p class=\"ksc-sub\">FormModal 表单弹窗</p>\n <div class=\"ksc-actions\" slot=\"footer\">\n <button class=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button class=\"btn btn-danger btn-md\" type=\"button\">删除</button>\n </div>\n </div>\n <div class=\"kole-formmodal-mask\">\n <div class=\"kole-card\">\n <h3 class=\"ksc-title\">删除确认</h3>\n <p class=\"ksc-sub\">删除后不可恢复。</p>\n <div class=\"ksc-actions\" slot=\"footer\">\n <button class=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button class=\"btn btn-danger btn-md\" type=\"button\">确定删除</button>\n </div>\n </div>\n </div>\n </div>\n</template>",
|
|
"vue3": "<template>\n <div>\n <div class=\"ksc-card\">\n <h3 class=\"ksc-title\">确认删除</h3>\n <p class=\"ksc-sub\">FormModal 表单弹窗</p>\n <div class=\"ksc-actions\">\n <button class=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button class=\"btn btn-danger btn-md\" type=\"button\">删除</button>\n </div>\n </div>\n <div class=\"kole-formmodal-mask\">\n <div class=\"kole-card\">\n <h3 class=\"ksc-title\">删除确认</h3>\n <p class=\"ksc-sub\">删除后不可恢复。</p>\n <div class=\"ksc-actions\">\n <button class=\"btn btn-default btn-md\" type=\"button\">取消</button>\n <button class=\"btn btn-danger btn-md\" type=\"button\">确定删除</button>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script setup>\n// 场景外壳由业务页面提供；组件按本端文档的调用方式接入\n</script>"
|
|
},
|
|
"notes": [
|
|
"组件本体类名依据该组件 SSR 产物（site/end-preview/formmodal.react.html）的根元素：kole-formmodal-mask",
|
|
"协作者 modal, confirmmodal, card 取自组件族耦合关系（.design_library/kole-ui/components/index.json 的 family 字段）",
|
|
"外壳类 ksc-* 与动作按钮 .btn 依据 tools/build-scenes.mjs 的 SCAFFOLD_CSS 与 frameworks/Button.css"
|
|
]
|
|
}
|