252 lines
11 KiB
JSON
252 lines
11 KiB
JSON
{
|
||
"slug": "slider",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "slider-ex-1",
|
||
"title": "单滑块 + 数值联动",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"slider-row\">\n <span class=\"lab\">音量</span>\n <div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-input data-max=\"100\" data-min=\"0\" data-slider data-value=\"30\"></div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": false,
|
||
"previewUnsafeReasons": [
|
||
"演示脚本按可见尺寸测量布局"
|
||
],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<span>音量</span>\n<div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-value=\"30\"></div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function VolumeSlider() {\n const [volume, setVolume] = useState(30);\n return (\n <KoleSlider min={0} max={100} value={volume} showInput onChange={setVolume} />\n );\n}",
|
||
"vue3": "<template>\n <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst volume = ref(30);\n</script>",
|
||
"vue2": "<template>\n <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderVolumeDemo',\n components: { KoleSlider },\n data() {\n return { volume: 30 };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function VolumeSlider(): JSX.Element {\n const [volume, setVolume] = useState<number>(30);\n return (\n <KoleSlider min={0} max={100} value={volume} showInput onChange={setVolume} />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst volume = ref<number>(30);\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderVolumeDemo',\n components: { KoleSlider },\n data(): Record<string, unknown> {\n return { volume: 30 };\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Slider.html:28 标记（data-min=0 / data-max=100 / data-value=30 / data-input）与 :49-56 脚本实参，data-input → showInput 数值联动"
|
||
},
|
||
{
|
||
"id": "slider-ex-2",
|
||
"title": "带刻度",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-slider data-step=\"10\" data-ticks data-value=\"50\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": false,
|
||
"previewUnsafeReasons": [
|
||
"演示脚本按可见尺寸测量布局"
|
||
],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-step=\"10\" data-value=\"50\"></div>",
|
||
"jsx": "import { KoleSlider } from 'kole-ui/react';\n\n<KoleSlider min={0} max={100} step={10} value={50} showTicks />",
|
||
"vue3": "<template>\n <KoleSlider :model-value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script setup>\nimport { KoleSlider } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <KoleSlider :value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderTicksDemo',\n components: { KoleSlider }\n};\n</script>",
|
||
"tsx": "import { KoleSlider } from 'kole-ui/react';\n\nexport default function KoleSliderDemo(): JSX.Element {\n return (\n <KoleSlider min={0} max={100} step={10} value={50} showTicks />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleSlider :model-value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('带刻度');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSlider :value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderTicksDemo',\n components: { KoleSlider },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Slider.html:34 标记（data-step=10 / data-value=50 / data-ticks）与 :50-52 脚本实参，data-ticks → showTicks 刻度"
|
||
},
|
||
{
|
||
"id": "slider-ex-3",
|
||
"title": "双滑块范围",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-range data-slider data-value=\"20,60\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
4
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
4,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": false,
|
||
"previewUnsafeReasons": [
|
||
"演示脚本按可见尺寸测量布局"
|
||
],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-range data-value=\"20,60\"></div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function PriceRangeSlider() {\n const [price, setPrice] = useState([20, 60]);\n return (\n <KoleSlider range min={0} max={100} value={price} onChange={setPrice} />\n );\n}",
|
||
"vue3": "<template>\n <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst price = ref([20, 60]);\n</script>",
|
||
"vue2": "<template>\n <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderRangeDemo',\n components: { KoleSlider },\n data() {\n return { price: [20, 60] };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function PriceRangeSlider(): JSX.Element {\n const [price, setPrice] = useState([20, 60]);\n return (\n <KoleSlider range min={0} max={100} value={price} onChange={setPrice} />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('双滑块范围');\nconst price = ref([20, 60]);\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderRangeDemo',\n components: { KoleSlider },\n data(): Record<string, unknown> {\n return { price: [20, 60] };\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Slider.html:39 标记（data-range / data-value=\"20,60\"）与 :54-56 脚本实参，data-range → range 双滑块，value 为 [20, 60]"
|
||
},
|
||
{
|
||
"id": "slider-ex-4",
|
||
"title": "禁用",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-slider is-disabled\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-slider data-value=\"40\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
5
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": false,
|
||
"previewUnsafeReasons": [
|
||
"演示脚本按可见尺寸测量布局"
|
||
],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-slider is-disabled\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-value=\"40\"></div>",
|
||
"jsx": "import { KoleSlider } from 'kole-ui/react';\n\n<KoleSlider min={0} max={100} value={40} disabled />",
|
||
"vue3": "<template>\n <KoleSlider :model-value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script setup>\nimport { KoleSlider } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <KoleSlider :value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderDisabledDemo',\n components: { KoleSlider }\n};\n</script>",
|
||
"tsx": "import { KoleSlider } from 'kole-ui/react';\n\nexport default function KoleSliderDemo(): JSX.Element {\n return (\n <KoleSlider min={0} max={100} value={40} disabled />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleSlider :model-value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('禁用');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSlider :value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n name: 'SliderDisabledDemo',\n components: { KoleSlider },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": "依据 frameworks/Slider.html:44 标记（is-disabled / data-value=40，data-min=0 / data-max=100）与 Slider.jsx:20 disabled prop"
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|