128 lines
11 KiB
JSON
128 lines
11 KiB
JSON
{
|
||
"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
|
||
}
|