{
 "slug": "bottomsheet",
 "mode": "scenarios",
 "examples": [
  {
   "id": "bottomsheet-ex-1",
   "title": "取消",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button class=\"kole-sheet-btn\" id=\"cancel\">取消</button>",
   "preview": {
    "show": [
     [
      2,
      3,
      0
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      2,
      0
     ],
     [
      2,
      1
     ],
     [
      2,
      2
     ],
     [
      2,
      3,
      1
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"kole-sheet-btn\">取消</button>",
    "jsx": "import { useState } from 'react';\nimport { KoleBottomSheet } from 'kole-ui/react';\n\nexport default function BottomSheetCancelDemo() {\n  const [visible, setVisible] = useState(false);\n\n  function open() {\n    setVisible(true);\n  }\n  function close() {\n    setVisible(false);\n  }\n  const footer = <button type=\"button\" className=\"kole-sheet-btn\" onClick={close}>取消</button>;\n\n  return (\n    <>\n      <button type=\"button\" onClick={open}>打开底部面板</button>\n      <KoleBottomSheet\n        visible={visible}\n        title=\"筛选订单\"\n        onClose={close}\n        footer={footer}\n      >\n        在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n      </KoleBottomSheet>\n    </>\n  );\n}",
    "vue3": "<template>\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n    <template #footer>\n      <button type=\"button\" class=\"kole-sheet-btn\" @click=\"close\">取消</button>\n    </template>\n  </KoleBottomSheet>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleBottomSheet } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2": "<template>\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n    <div slot=\"footer\">\n      <button type=\"button\" class=\"kole-sheet-btn\" @click=\"close\">取消</button>\n    </div>\n  </KoleBottomSheet>\n</template>\n\n<script>\nimport { KoleBottomSheet } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleBottomSheet },\n  data() {\n    return { visible: false };\n  },\n  methods: {\n    close() {\n      this.visible = false;\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleBottomSheet } from 'kole-ui/react';\n\nexport default function BottomSheetCancelDemo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n\n  function open(): JSX.Element {\n    setVisible(true);\n  }\n  function close(): JSX.Element {\n    setVisible(false);\n  }\n  const footer = <button type=\"button\" className=\"kole-sheet-btn\" onClick={close}>取消</button>;\n\n  return (\n    <>\n      <button type=\"button\" onClick={open}>打开底部面板</button>\n      <KoleBottomSheet\n        visible={visible}\n        title=\"筛选订单\"\n        onClose={close}\n        footer={footer}\n      >\n        在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n      </KoleBottomSheet>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n    <template #footer>\n      <button type=\"button\" class=\"kole-sheet-btn\" @click=\"close\">取消</button>\n    </template>\n  </KoleBottomSheet>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleBottomSheet } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\n\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。面板可从底部滑动出现，点击遮罩或向下拖动可关闭。\n    <div slot=\"footer\">\n      <button type=\"button\" class=\"kole-sheet-btn\" @click=\"close\">取消</button>\n    </div>\n  </KoleBottomSheet>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleBottomSheet } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleBottomSheet },\n  data(): Record<string, unknown> {\n    return { visible: false };\n  },\n  methods: {\n    close(): void {\n      this.visible = false;\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/BottomSheet.html 页脚第一个按钮（kole-sheet-btn「取消」）及其脚本绑定 cancel.onclick = close；visible/title/onClose/footer/children 见 BottomSheet.jsx 形参，默认插槽与 footer 具名插槽见 BottomSheet.vue3 的 slot / slot name=footer。"
   ]
  },
  {
   "id": "bottomsheet-ex-2",
   "title": "应用",
   "titleSrc": "demo",
   "desc": "",
   "html": "<button class=\"kole-sheet-btn primary\" id=\"apply\">应用</button>",
   "preview": {
    "show": [
     [
      2,
      3,
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      2,
      0
     ],
     [
      2,
      1
     ],
     [
      2,
      2
     ],
     [
      2,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"kole-sheet-btn primary\">应用</button>",
    "jsx": "import { useState } from 'react';\nimport { KoleBottomSheet } from 'kole-ui/react';\n\nexport default function BottomSheetApplyDemo() {\n  const [visible, setVisible] = useState(false);\n  const [applied, setApplied] = useState(false);\n\n  function open() {\n    setVisible(true);\n  }\n  function close() {\n    setVisible(false);\n  }\n  function apply() {\n    setApplied(true);\n    setVisible(false);\n  }\n  const footer = <button type=\"button\" className=\"kole-sheet-btn primary\" onClick={apply}>应用</button>;\n\n  return (\n    <>\n      <button type=\"button\" onClick={open}>打开底部面板</button>\n      <KoleBottomSheet\n        visible={visible}\n        title=\"筛选订单\"\n        onClose={close}\n        footer={footer}\n      >\n        在这里放置筛选条件、操作列表等内容。当前筛选：{applied ? '按创建时间倒序' : '未设置'}\n      </KoleBottomSheet>\n    </>\n  );\n}",
    "vue3": "<template>\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。当前筛选：{{ applied ? '按创建时间倒序' : '未设置' }}\n    <template #footer>\n      <button type=\"button\" class=\"kole-sheet-btn primary\" @click=\"apply\">应用</button>\n    </template>\n  </KoleBottomSheet>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleBottomSheet } from 'kole-ui/vue3';\n\nconst visible = ref(false);\nconst applied = ref(false);\n\nfunction close() {\n  visible.value = false;\n}\nfunction apply() {\n  applied.value = true;\n  visible.value = false;\n}\n</script>",
    "vue2": "<template>\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。当前筛选：{{ applied ? '按创建时间倒序' : '未设置' }}\n    <div slot=\"footer\">\n      <button type=\"button\" class=\"kole-sheet-btn primary\" @click=\"apply\">应用</button>\n    </div>\n  </KoleBottomSheet>\n</template>\n\n<script>\nimport { KoleBottomSheet } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleBottomSheet },\n  data() {\n    return { visible: false, applied: false };\n  },\n  methods: {\n    close() {\n      this.visible = false;\n    },\n    apply() {\n      this.applied = true;\n      this.visible = false;\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleBottomSheet } from 'kole-ui/react';\n\nexport default function BottomSheetApplyDemo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n  const [applied, setApplied] = useState<boolean>(false);\n\n  function open(): JSX.Element {\n    setVisible(true);\n  }\n  function close(): JSX.Element {\n    setVisible(false);\n  }\n  function apply(): JSX.Element {\n    setApplied(true);\n    setVisible(false);\n  }\n  const footer = <button type=\"button\" className=\"kole-sheet-btn primary\" onClick={apply}>应用</button>;\n\n  return (\n    <>\n      <button type=\"button\" onClick={open}>打开底部面板</button>\n      <KoleBottomSheet\n        visible={visible}\n        title=\"筛选订单\"\n        onClose={close}\n        footer={footer}\n      >\n        在这里放置筛选条件、操作列表等内容。当前筛选：{applied ? '按创建时间倒序' : '未设置'}\n      </KoleBottomSheet>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。当前筛选：{{ applied ? '按创建时间倒序' : '未设置' }}\n    <template #footer>\n      <button type=\"button\" class=\"kole-sheet-btn primary\" @click=\"apply\">应用</button>\n    </template>\n  </KoleBottomSheet>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleBottomSheet } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\nconst applied = ref<boolean>(false);\n\nfunction close() {\n  visible.value = false;\n}\nfunction apply() {\n  applied.value = true;\n  visible.value = false;\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleBottomSheet :visible=\"visible\" title=\"筛选订单\" @close=\"close\">\n    在这里放置筛选条件、操作列表等内容。当前筛选：{{ applied ? '按创建时间倒序' : '未设置' }}\n    <div slot=\"footer\">\n      <button type=\"button\" class=\"kole-sheet-btn primary\" @click=\"apply\">应用</button>\n    </div>\n  </KoleBottomSheet>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleBottomSheet } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleBottomSheet },\n  data(): Record<string, unknown> {\n    return { visible: false, applied: false };\n  },\n  methods: {\n    close(): void {\n      this.visible = false;\n    },\n    apply(): void {\n      this.applied = true;\n      this.visible = false;\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/BottomSheet.html 页脚第二个按钮（kole-sheet-btn primary「应用」，primary 类见 BottomSheet.css）及其脚本绑定 apply.onclick = close；footer 具名插槽见 BottomSheet.vue3 的 slot name=footer，footer 属性见 BottomSheet.jsx 形参，默认插槽文案取自演示页 kole-sheet-body。"
   ]
  }
 ],
 "curated": true
}