aurora-admin/site/examples/buttongroup.json

{
 "slug": "buttongroup",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "buttongroup-ex-1",
   "title": "按钮组 ButtonGroup 示例 1",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-btngroup\" id=\"single\"></div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      2
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-btngroup\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleButtonGroup } from 'kole-ui/react';\n\nconst options = [\n  { label: '日', value: 'day' },\n  { label: '周', value: 'week' },\n  { label: '月', value: 'month' }\n];\n\nexport default function Demo() {\n  const [value, setValue] = useState('week');\n  return <KoleButtonGroup options={options} value={value} onChange={setValue} />;\n}",
    "vue3": "<template>\n  <KoleButtonGroup :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleButtonGroup } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '日', value: 'day' },\n  { label: '周', value: 'week' },\n  { label: '月', value: 'month' }\n];\nconst value = ref('week');\n</script>",
    "vue2": "<template>\n  <KoleButtonGroup :options=\"options\" v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleButtonGroup } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButtonGroup },\n  data() {\n    return {\n      options: [\n        { label: '日', value: 'day' },\n        { label: '周', value: 'week' },\n        { label: '月', value: 'month' }\n      ],\n      value: 'week'\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleButtonGroup } from 'kole-ui/react';\n\nconst options = [\n  { label: '日', value: 'day' },\n  { label: '周', value: 'week' },\n  { label: '月', value: 'month' }\n];\n\nexport default function Demo(): JSX.Element {\n  const [value, setValue] = useState<string>('week');\n  return <KoleButtonGroup options={options} value={value} onChange={setValue} />;\n}",
    "vue3ts": "<template>\n\n  <KoleButtonGroup :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButtonGroup } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '日', value: 'day' },\n  { label: '周', value: 'week' },\n  { label: '月', value: 'month' }\n];\nconst value = ref<string>('week');\n</script>",
    "vue2ts": "<template>\n\n  <KoleButtonGroup :options=\"options\" v-model=\"value\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButtonGroup } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButtonGroup },\n  data(): Record<string, unknown> {\n    return {\n      options: [\n        { label: '日', value: 'day' },\n        { label: '周', value: 'week' },\n        { label: '月', value: 'month' }\n      ],\n      value: 'week'\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ButtonGroup.html:36-37 paint(getElementById('single'), [{label:'日',value:'day'},{label:'周',value:'week'},{label:'月',value:'month'}], 'week', false) 的实参（单选视图切换）；prop 名取自 frameworks/ButtonGroup.jsx:4"
   ]
  },
  {
   "id": "buttongroup-ex-2",
   "title": "按钮组 ButtonGroup 示例 2",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-btngroup\" id=\"multi\"></div>",
   "preview": {
    "show": [
     [
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      2
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-btngroup\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleButtonGroup } from 'kole-ui/react';\n\nconst options = [\n  { label: '红', value: 'r' },\n  { label: '绿', value: 'g' },\n  { label: '蓝', value: 'b', disabled: true }\n];\n\nexport default function Demo() {\n  const [value, setValue] = useState(['r']);\n  return <KoleButtonGroup options={options} multiple value={value} onChange={setValue} />;\n}",
    "vue3": "<template>\n  <KoleButtonGroup :options=\"options\" multiple v-model=\"value\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleButtonGroup } from 'kole-ui/vue3';\n\nconst options = [\n  { label: '红', value: 'r' },\n  { label: '绿', value: 'g' },\n  { label: '蓝', value: 'b', disabled: true }\n];\nconst value = ref(['r']);\n</script>",
    "vue2": "<template>\n  <KoleButtonGroup :options=\"options\" multiple v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleButtonGroup } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButtonGroup },\n  data() {\n    return {\n      options: [\n        { label: '红', value: 'r' },\n        { label: '绿', value: 'g' },\n        { label: '蓝', value: 'b', disabled: true }\n      ],\n      value: ['r']\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleButtonGroup } from 'kole-ui/react';\n\nconst options = [\n  { label: '红', value: 'r' },\n  { label: '绿', value: 'g' },\n  { label: '蓝', value: 'b', disabled: true }\n];\n\nexport default function Demo(): JSX.Element {\n  const [value, setValue] = useState(['r']);\n  return <KoleButtonGroup options={options} multiple value={value} onChange={setValue} />;\n}",
    "vue3ts": "<template>\n\n  <KoleButtonGroup :options=\"options\" multiple v-model=\"value\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButtonGroup } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('按钮组 ButtonGroup 示例 2');\nconst options = [\n  { label: '红', value: 'r' },\n  { label: '绿', value: 'g' },\n  { label: '蓝', value: 'b', disabled: true }\n];\nconst value = ref(['r']);\n</script>",
    "vue2ts": "<template>\n\n  <KoleButtonGroup :options=\"options\" multiple v-model=\"value\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButtonGroup } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButtonGroup },\n  data(): Record<string, unknown> {\n    return {\n      options: [\n        { label: '红', value: 'r' },\n        { label: '绿', value: 'g' },\n        { label: '蓝', value: 'b', disabled: true }\n      ],\n      value: ['r']\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ButtonGroup.html:39-40 paint(getElementById('multi'), [{label:'红',value:'r'},{label:'绿',value:'g'},{label:'蓝',value:'b',disabled:true}], ['r'], true) 的实参（multiple 多选、末项 disabled）"
   ]
  }
 ]
}