{
  "slug": "drawer",
  "curated": true,
  "title": "工具条触发的确认流",
  "desc": "Drawer由操作按钮触发，覆盖在业务内容之上的样子。",
  "uses": [
    "button",
    "card"
  ],
  "markup": {
    "html": "<div class=\"ksc-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 class=\"kole-drawer\">\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\">打开抽屉</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-drawer\">\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\">打开抽屉</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-drawer\">\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\">打开抽屉</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-drawer\">\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/drawer.react.html）的根元素：kole-drawer",
    "协作者 button, card 取自组件族耦合关系（.design_library/kole-ui/components/index.json 的 family 字段）",
    "外壳类 ksc-* 与动作按钮 .btn 依据 tools/build-scenes.mjs 的 SCAFFOLD_CSS 与 frameworks/Button.css"
  ]
}