544 lines
49 KiB
JSON
544 lines
49 KiB
JSON
{
|
||
"slug": "icon",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "icon-ex-1",
|
||
"title": "尺寸档位（关键字 + 任意 CSS 长度）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-size\">\n <div class=\"row\" id=\"row-size\"></div>\n <div class=\"row\" id=\"row-size-any\"></div>\n <p class=\"demo-note\">size 只驱动 CSS 变量 --kole-icon-size（落地为 font-size），SVG 边长恒为 1em，故关键字与任意 CSS 长度走同一条路径。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
7
|
||
],
|
||
[
|
||
0,
|
||
8
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-size\">\n <div class=\"row\" id=\"row-size\"></div>\n <div class=\"row\" id=\"row-size-any\"></div>\n <p>size 只驱动 CSS 变量 --kole-icon-size（落地为 font-size），SVG 边长恒为 1em，故关键字与任意 CSS 长度走同一条路径。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <KoleIcon name=\"search\" size=\"small\" label=\"搜索（small）\" />\n <KoleIcon name=\"search\" size=\"default\" label=\"搜索（default）\" />\n <KoleIcon name=\"search\" size=\"large\" label=\"搜索（large）\" />\n <KoleIcon name=\"search\" size=\"xlarge\" label=\"搜索（xlarge）\" />\n <KoleIcon name=\"search\" size=\"18px\" label=\"搜索（18px）\" />\n <KoleIcon name=\"search\" size=\"2rem\" label=\"搜索（2rem）\" />\n</>",
|
||
"vue3": "<template>\n <KoleIcon name=\"search\" size=\"small\" label=\"搜索（small）\" />\n <KoleIcon name=\"search\" size=\"default\" label=\"搜索（default）\" />\n <KoleIcon name=\"search\" size=\"large\" label=\"搜索（large）\" />\n <KoleIcon name=\"search\" size=\"xlarge\" label=\"搜索（xlarge）\" />\n <KoleIcon name=\"search\" size=\"18px\" label=\"搜索（18px）\" />\n <KoleIcon name=\"search\" size=\"2rem\" label=\"搜索（2rem）\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleIcon name=\"search\" size=\"small\" label=\"搜索（small）\" />\n <KoleIcon name=\"search\" size=\"default\" label=\"搜索（default）\" />\n <KoleIcon name=\"search\" size=\"large\" label=\"搜索（large）\" />\n <KoleIcon name=\"search\" size=\"xlarge\" label=\"搜索（xlarge）\" />\n <KoleIcon name=\"search\" size=\"18px\" label=\"搜索（18px）\" />\n <KoleIcon name=\"search\" size=\"2rem\" label=\"搜索（2rem）\" />\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype IconSize = 'small' | 'default' | 'large' | 'xlarge' | '18px' | '2rem';\ninterface SizeSample {\n size: IconSize;\n label: string;\n}\n\nconst samples: ReadonlyArray<SizeSample> = [\n { size: 'small', label: '搜索（small）' },\n { size: 'default', label: '搜索（default）' },\n { size: 'large', label: '搜索（large）' },\n { size: 'xlarge', label: '搜索（xlarge）' },\n { size: '18px', label: '搜索（18px）' },\n { size: '2rem', label: '搜索（2rem）' },\n];\n\nexport default function KoleIconSizeDemo(): JSX.Element {\n return (\n <>\n {samples.map((sample) => (\n <KoleIcon key={sample.size} name=\"search\" size={sample.size} label={sample.label} />\n ))}\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <KoleIcon\n v-for=\"sample in samples\"\n :key=\"sample.size\"\n name=\"search\"\n :size=\"sample.size\"\n :label=\"sample.label\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype IconSize = 'small' | 'default' | 'large' | 'xlarge' | '18px' | '2rem';\ninterface SizeSample {\n size: IconSize;\n label: string;\n}\n\nconst samples: ReadonlyArray<SizeSample> = [\n { size: 'small', label: '搜索（small）' },\n { size: 'default', label: '搜索（default）' },\n { size: 'large', label: '搜索（large）' },\n { size: 'xlarge', label: '搜索（xlarge）' },\n { size: '18px', label: '搜索（18px）' },\n { size: '2rem', label: '搜索（2rem）' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleIcon\n v-for=\"sample in samples\"\n :key=\"sample.size\"\n name=\"search\"\n :size=\"sample.size\"\n :label=\"sample.label\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype IconSize = 'small' | 'default' | 'large' | 'xlarge' | '18px' | '2rem';\ninterface SizeSample {\n size: IconSize;\n label: string;\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): { samples: ReadonlyArray<SizeSample> } {\n return {\n samples: [\n { size: 'small', label: '搜索（small）' },\n { size: 'default', label: '搜索（default）' },\n { size: 'large', label: '搜索（large）' },\n { size: 'xlarge', label: '搜索（xlarge）' },\n { size: '18px', label: '搜索（18px）' },\n { size: '2rem', label: '搜索（2rem）' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:204 TIERS = ['small','default','large','xlarge'] 与 :216 fill('row-size', TIERS.map(...)) 的实参；:220 fill('row-size-any', ...) 给出任意 CSS 长度 18px / 2rem",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 type IconSize 字面量联合 + ReadonlyArray 循环；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface SizeSample；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 type IconSize 字面量联合 + ReadonlyArray 循环；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface SizeSample；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "icon-ex-2",
|
||
"title": "语义色 tone",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-tone\">\n <div class=\"row\" id=\"row-tone\"></div>\n <div class=\"row\" id=\"row-tone-color\"></div>\n <p class=\"demo-note\">语义色只改 color（图标描边/填充走 currentColor）；color 属性优先于 tone。图标不作为唯一信息载体：颜色变化一律伴随文字或 label。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
7
|
||
],
|
||
[
|
||
0,
|
||
8
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-tone\">\n <div class=\"row\" id=\"row-tone\"></div>\n <div class=\"row\" id=\"row-tone-color\"></div>\n <p>语义色只改 color（图标描边/填充走 currentColor）；color 属性优先于 tone。图标不作为唯一信息载体：颜色变化一律伴随文字或 label。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <KoleIcon name=\"star\" tone=\"default\" label=\"收藏（default）\" />\n <KoleIcon name=\"star\" tone=\"brand\" label=\"收藏（brand）\" />\n <KoleIcon name=\"star\" tone=\"secondary\" label=\"收藏（secondary）\" />\n <KoleIcon name=\"star\" tone=\"danger\" label=\"收藏（danger）\" />\n <KoleIcon name=\"star\" tone=\"success\" label=\"收藏（success）\" />\n <KoleIcon name=\"star\" tone=\"warning\" label=\"收藏（warning）\" />\n <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n</>",
|
||
"vue3": "<template>\n <KoleIcon name=\"star\" tone=\"default\" label=\"收藏（default）\" />\n <KoleIcon name=\"star\" tone=\"brand\" label=\"收藏（brand）\" />\n <KoleIcon name=\"star\" tone=\"secondary\" label=\"收藏（secondary）\" />\n <KoleIcon name=\"star\" tone=\"danger\" label=\"收藏（danger）\" />\n <KoleIcon name=\"star\" tone=\"success\" label=\"收藏（success）\" />\n <KoleIcon name=\"star\" tone=\"warning\" label=\"收藏（warning）\" />\n <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleIcon name=\"star\" tone=\"default\" label=\"收藏（default）\" />\n <KoleIcon name=\"star\" tone=\"brand\" label=\"收藏（brand）\" />\n <KoleIcon name=\"star\" tone=\"secondary\" label=\"收藏（secondary）\" />\n <KoleIcon name=\"star\" tone=\"danger\" label=\"收藏（danger）\" />\n <KoleIcon name=\"star\" tone=\"success\" label=\"收藏（success）\" />\n <KoleIcon name=\"star\" tone=\"warning\" label=\"收藏（warning）\" />\n <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype IconTone = 'default' | 'brand' | 'secondary' | 'danger' | 'success' | 'warning';\ninterface ToneSample {\n tone: IconTone;\n label: string;\n}\n\nconst tones: ReadonlyArray<ToneSample> = [\n { tone: 'default', label: '收藏（default）' },\n { tone: 'brand', label: '收藏（brand）' },\n { tone: 'secondary', label: '收藏（secondary）' },\n { tone: 'danger', label: '收藏（danger）' },\n { tone: 'success', label: '收藏（success）' },\n { tone: 'warning', label: '收藏（warning）' },\n];\n\nexport default function KoleIconToneDemo(): JSX.Element {\n return (\n <>\n {tones.map((sample) => (\n <KoleIcon key={sample.tone} name=\"star\" tone={sample.tone} label={sample.label} />\n ))}\n <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <KoleIcon\n v-for=\"sample in tones\"\n :key=\"sample.tone\"\n name=\"star\"\n :tone=\"sample.tone\"\n :label=\"sample.label\"\n />\n <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype IconTone = 'default' | 'brand' | 'secondary' | 'danger' | 'success' | 'warning';\ninterface ToneSample {\n tone: IconTone;\n label: string;\n}\n\nconst tones: ReadonlyArray<ToneSample> = [\n { tone: 'default', label: '收藏（default）' },\n { tone: 'brand', label: '收藏（brand）' },\n { tone: 'secondary', label: '收藏（secondary）' },\n { tone: 'danger', label: '收藏（danger）' },\n { tone: 'success', label: '收藏（success）' },\n { tone: 'warning', label: '收藏（warning）' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleIcon\n v-for=\"sample in tones\"\n :key=\"sample.tone\"\n name=\"star\"\n :tone=\"sample.tone\"\n :label=\"sample.label\"\n />\n <KoleIcon name=\"heart\" tone=\"brand\" color=\"var(--kole-color-error)\" label=\"喜欢（color 覆盖 tone）\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype IconTone = 'default' | 'brand' | 'secondary' | 'danger' | 'success' | 'warning';\ninterface ToneSample {\n tone: IconTone;\n label: string;\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): { tones: ReadonlyArray<ToneSample> } {\n return {\n tones: [\n { tone: 'default', label: '收藏（default）' },\n { tone: 'brand', label: '收藏（brand）' },\n { tone: 'secondary', label: '收藏（secondary）' },\n { tone: 'danger', label: '收藏（danger）' },\n { tone: 'success', label: '收藏（success）' },\n { tone: 'warning', label: '收藏（warning）' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:205 TONES = ['default','brand','secondary','danger','success','warning'] 与 :225 fill('row-tone', TONES.map(...))；:229 fill('row-tone-color', ...) 的 color='var(--kole-color-error)' 覆盖 tone='brand'"
|
||
]
|
||
},
|
||
{
|
||
"id": "icon-ex-3",
|
||
"title": "旋转 spin",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-spin\">\n <div class=\"row\" id=\"row-spin\"></div>\n <p class=\"demo-note\">spin 表示「进行中」；样式表在 prefers-reduced-motion: reduce 下把动画置 none（不会旋转）。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
4
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
7
|
||
],
|
||
[
|
||
0,
|
||
8
|
||
],
|
||
[
|
||
0,
|
||
4,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-spin\">\n <div class=\"row\" id=\"row-spin\"></div>\n <p>spin 表示「进行中」；样式表在 prefers-reduced-motion: reduce 下把动画置 none（不会旋转）。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <KoleIcon name=\"loading\" spin tone=\"brand\" label=\"加载中\" />\n <span>正在同步数据…</span>\n <KoleIcon name=\"refresh\" spin label=\"刷新中\" />\n</>",
|
||
"vue3": "<template>\n <KoleIcon name=\"loading\" spin tone=\"brand\" label=\"加载中\" />\n <span>正在同步数据…</span>\n <KoleIcon name=\"refresh\" spin label=\"刷新中\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleIcon name=\"loading\" spin tone=\"brand\" label=\"加载中\" />\n <span>正在同步数据…</span>\n <KoleIcon name=\"refresh\" spin label=\"刷新中\" />\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype SpinnerName = 'loading' | 'refresh';\ninterface SpinEntry {\n name: SpinnerName;\n label: string;\n tone?: 'brand';\n}\n\nconst spinners: readonly [SpinEntry, SpinEntry] = [\n { name: 'loading', label: '加载中', tone: 'brand' },\n { name: 'refresh', label: '刷新中' },\n];\n\nexport default function KoleIconSpinDemo(): JSX.Element {\n const [busy, idle] = spinners;\n return (\n <>\n <KoleIcon name={busy.name} spin tone={busy.tone} label={busy.label} />\n <span>正在同步数据…</span>\n <KoleIcon name={idle.name} spin label={idle.label} />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <KoleIcon :name=\"busy.name\" spin :tone=\"busy.tone\" :label=\"busy.label\" />\n <span>正在同步数据…</span>\n <KoleIcon :name=\"idle.name\" spin :label=\"idle.label\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype SpinnerName = 'loading' | 'refresh';\ninterface SpinEntry {\n name: SpinnerName;\n label: string;\n tone?: 'brand';\n}\n\nconst spinners: readonly [SpinEntry, SpinEntry] = [\n { name: 'loading', label: '加载中', tone: 'brand' },\n { name: 'refresh', label: '刷新中' },\n];\nconst [busy, idle] = spinners;\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleIcon :name=\"busy.name\" spin :tone=\"busy.tone\" :label=\"busy.label\" />\n <span>正在同步数据…</span>\n <KoleIcon :name=\"idle.name\" spin :label=\"idle.label\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype SpinnerName = 'loading' | 'refresh';\ninterface SpinEntry {\n name: SpinnerName;\n label: string;\n tone?: 'brand';\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): { spinners: readonly [SpinEntry, SpinEntry] } {\n return {\n spinners: [\n { name: 'loading', label: '加载中', tone: 'brand' },\n { name: 'refresh', label: '刷新中' },\n ],\n };\n },\n computed: {\n busy(): SpinEntry {\n return this.spinners[0];\n },\n idle(): SpinEntry {\n return this.spinners[1];\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:233 fill('row-spin', ...) 的两个实参：{ name:'loading', spin:true, tone:'brand', label:'加载中' } 与 { name:'refresh', spin:true, label:'刷新中' }"
|
||
]
|
||
},
|
||
{
|
||
"id": "icon-ex-4",
|
||
"title": "无障碍：label 有值 / 无值",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-a11y\">\n <div class=\"row\" id=\"row-a11y-labelled\"></div>\n <div class=\"row\" id=\"row-a11y-decorative\"></div>\n <p class=\"demo-note\">同一张图标：有 label 时是「有语义的图」，无 label 时是装饰。判据只看 label 是否有值，与 name 无关。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
5
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
7
|
||
],
|
||
[
|
||
0,
|
||
8
|
||
],
|
||
[
|
||
0,
|
||
5,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-a11y\">\n <div class=\"row\" id=\"row-a11y-labelled\"></div>\n <div class=\"row\" id=\"row-a11y-decorative\"></div>\n <p>同一张图标：有 label 时是「有语义的图」，无 label 时是装饰。判据只看 label 是否有值，与 name 无关。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <KoleIcon name=\"check-circle\" tone=\"success\" label=\"校验通过\" />\n <KoleIcon name=\"check-circle\" tone=\"success\" />\n</>",
|
||
"vue3": "<template>\n <KoleIcon name=\"check-circle\" tone=\"success\" label=\"校验通过\" />\n <KoleIcon name=\"check-circle\" tone=\"success\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleIcon name=\"check-circle\" tone=\"success\" label=\"校验通过\" />\n <KoleIcon name=\"check-circle\" tone=\"success\" />\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ninterface A11ySample {\n key: 'with-label' | 'without-label';\n label: string;\n}\n\nconst samples: ReadonlyArray<A11ySample> = [\n { key: 'with-label', label: '校验通过' },\n { key: 'without-label', label: '' },\n];\n\nexport default function KoleIconA11yDemo(): JSX.Element {\n return (\n <>\n {samples.map((sample) => (\n <KoleIcon key={sample.key} name=\"check-circle\" tone=\"success\" label={sample.label} />\n ))}\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <KoleIcon\n v-for=\"sample in samples\"\n :key=\"sample.key\"\n name=\"check-circle\"\n tone=\"success\"\n :label=\"sample.label\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ninterface A11ySample {\n key: 'with-label' | 'without-label';\n label: string;\n}\n\nconst samples: ReadonlyArray<A11ySample> = [\n { key: 'with-label', label: '校验通过' },\n { key: 'without-label', label: '' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleIcon\n v-for=\"sample in samples\"\n :key=\"sample.key\"\n name=\"check-circle\"\n tone=\"success\"\n :label=\"sample.label\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ninterface A11ySample {\n key: 'with-label' | 'without-label';\n label: string;\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): { samples: ReadonlyArray<A11ySample> } {\n return {\n samples: [\n { key: 'with-label', label: '校验通过' },\n { key: 'without-label', label: '' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:239 fill('row-a11y-labelled', ...) 有 label 与 :243 fill('row-a11y-decorative', ...) 无 label 的同一张 check-circle；判据只有 label 是否有值"
|
||
]
|
||
},
|
||
{
|
||
"id": "icon-ex-5",
|
||
"title": "图标名查找（core 层内联 + 别名折叠）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-lookup\">\n <div class=\"row kole-icon-grid\" id=\"row-lookup\"></div>\n <div class=\"row\" id=\"row-alias\"></div>\n <div class=\"row\" id=\"row-miss\"></div>\n <p class=\"demo-note\">查找只认注入表里的名字（别名在注入时已折叠成终态表）；查不到时用默认插槽兜底，不抛错、不显示错误图标。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
6
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
7
|
||
],
|
||
[
|
||
0,
|
||
8
|
||
],
|
||
[
|
||
0,
|
||
6,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-lookup\">\n <div class=\"row kole-icon-grid\" id=\"row-lookup\"></div>\n <div class=\"row\" id=\"row-alias\"></div>\n <div class=\"row\" id=\"row-miss\"></div>\n <p>查找只认注入表里的名字（别名在注入时已折叠成终态表）；查不到时用默认插槽兜底，不抛错、不显示错误图标。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <KoleIcon name=\"search\" label=\"search\" />\n <KoleIcon name=\"filter\" label=\"filter\" />\n <KoleIcon name=\"view\" label=\"view\" />\n <KoleIcon name=\"hide\" label=\"hide\" />\n <KoleIcon name=\"edit\" label=\"edit\" />\n <KoleIcon name=\"delete\" label=\"delete\" />\n <KoleIcon name=\"copy\" label=\"copy\" />\n <KoleIcon name=\"download\" label=\"download\" />\n <KoleIcon name=\"upload\" label=\"upload\" />\n <KoleIcon name=\"setting\" label=\"setting\" />\n <KoleIcon name=\"bell\" label=\"bell\" />\n <KoleIcon name=\"user\" label=\"user\" />\n <KoleIcon name=\"mail\" label=\"mail\" />\n <KoleIcon name=\"calendar\" label=\"calendar\" />\n <KoleIcon name=\"folder\" label=\"folder\" />\n <KoleIcon name=\"image\" label=\"image\" />\n <KoleIcon name=\"cart\" label=\"cart\" />\n <KoleIcon name=\"money\" label=\"money\" />\n <KoleIcon name=\"clock\" label=\"clock\" />\n <KoleIcon name=\"help-circle\" label=\"help-circle\" />\n <KoleIcon name=\"warn\" tone=\"warning\" label=\"warn → warning\" />\n <KoleIcon name=\"info\" tone=\"brand\" label=\"info → info-circle\" />\n <KoleIcon name=\"date\" label=\"date → calendar\" />\n <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n</>",
|
||
"vue3": "<template>\n <KoleIcon name=\"search\" label=\"search\" />\n <KoleIcon name=\"filter\" label=\"filter\" />\n <KoleIcon name=\"view\" label=\"view\" />\n <KoleIcon name=\"hide\" label=\"hide\" />\n <KoleIcon name=\"edit\" label=\"edit\" />\n <KoleIcon name=\"delete\" label=\"delete\" />\n <KoleIcon name=\"copy\" label=\"copy\" />\n <KoleIcon name=\"download\" label=\"download\" />\n <KoleIcon name=\"upload\" label=\"upload\" />\n <KoleIcon name=\"setting\" label=\"setting\" />\n <KoleIcon name=\"bell\" label=\"bell\" />\n <KoleIcon name=\"user\" label=\"user\" />\n <KoleIcon name=\"mail\" label=\"mail\" />\n <KoleIcon name=\"calendar\" label=\"calendar\" />\n <KoleIcon name=\"folder\" label=\"folder\" />\n <KoleIcon name=\"image\" label=\"image\" />\n <KoleIcon name=\"cart\" label=\"cart\" />\n <KoleIcon name=\"money\" label=\"money\" />\n <KoleIcon name=\"clock\" label=\"clock\" />\n <KoleIcon name=\"help-circle\" label=\"help-circle\" />\n <KoleIcon name=\"warn\" tone=\"warning\" label=\"warn → warning\" />\n <KoleIcon name=\"info\" tone=\"brand\" label=\"info → info-circle\" />\n <KoleIcon name=\"date\" label=\"date → calendar\" />\n <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleIcon name=\"search\" label=\"search\" />\n <KoleIcon name=\"filter\" label=\"filter\" />\n <KoleIcon name=\"view\" label=\"view\" />\n <KoleIcon name=\"hide\" label=\"hide\" />\n <KoleIcon name=\"edit\" label=\"edit\" />\n <KoleIcon name=\"delete\" label=\"delete\" />\n <KoleIcon name=\"copy\" label=\"copy\" />\n <KoleIcon name=\"download\" label=\"download\" />\n <KoleIcon name=\"upload\" label=\"upload\" />\n <KoleIcon name=\"setting\" label=\"setting\" />\n <KoleIcon name=\"bell\" label=\"bell\" />\n <KoleIcon name=\"user\" label=\"user\" />\n <KoleIcon name=\"mail\" label=\"mail\" />\n <KoleIcon name=\"calendar\" label=\"calendar\" />\n <KoleIcon name=\"folder\" label=\"folder\" />\n <KoleIcon name=\"image\" label=\"image\" />\n <KoleIcon name=\"cart\" label=\"cart\" />\n <KoleIcon name=\"money\" label=\"money\" />\n <KoleIcon name=\"clock\" label=\"clock\" />\n <KoleIcon name=\"help-circle\" label=\"help-circle\" />\n <KoleIcon name=\"warn\" tone=\"warning\" label=\"warn → warning\" />\n <KoleIcon name=\"info\" tone=\"brand\" label=\"info → info-circle\" />\n <KoleIcon name=\"date\" label=\"date → calendar\" />\n <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype CoreIconName =\n | 'search' | 'filter' | 'view' | 'hide' | 'edit' | 'delete' | 'copy'\n | 'download' | 'upload' | 'setting' | 'bell' | 'user' | 'mail'\n | 'calendar' | 'folder' | 'image' | 'cart' | 'money' | 'clock'\n | 'help-circle' | 'warn' | 'info' | 'date';\n\ninterface RegistryEntry {\n name: CoreIconName;\n label: string;\n tone?: 'warning' | 'brand';\n}\n\nconst registry: ReadonlyArray<RegistryEntry> = [\n { name: 'search', label: 'search' },\n { name: 'filter', label: 'filter' },\n { name: 'view', label: 'view' },\n { name: 'hide', label: 'hide' },\n { name: 'edit', label: 'edit' },\n { name: 'delete', label: 'delete' },\n { name: 'copy', label: 'copy' },\n { name: 'download', label: 'download' },\n { name: 'upload', label: 'upload' },\n { name: 'setting', label: 'setting' },\n { name: 'bell', label: 'bell' },\n { name: 'user', label: 'user' },\n { name: 'mail', label: 'mail' },\n { name: 'calendar', label: 'calendar' },\n { name: 'folder', label: 'folder' },\n { name: 'image', label: 'image' },\n { name: 'cart', label: 'cart' },\n { name: 'money', label: 'money' },\n { name: 'clock', label: 'clock' },\n { name: 'help-circle', label: 'help-circle' },\n { name: 'warn', label: 'warn → warning', tone: 'warning' },\n { name: 'info', label: 'info → info-circle', tone: 'brand' },\n { name: 'date', label: 'date → calendar' },\n];\n\nexport default function KoleIconRegistryDemo(): JSX.Element {\n return (\n <>\n {registry.map((entry) => (\n <KoleIcon key={entry.name} name={entry.name} tone={entry.tone} label={entry.label} />\n ))}\n <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <KoleIcon\n v-for=\"entry in registry\"\n :key=\"entry.name\"\n :name=\"entry.name\"\n :tone=\"entry.tone\"\n :label=\"entry.label\"\n />\n <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype CoreIconName =\n | 'search' | 'filter' | 'view' | 'hide' | 'edit' | 'delete' | 'copy'\n | 'download' | 'upload' | 'setting' | 'bell' | 'user' | 'mail'\n | 'calendar' | 'folder' | 'image' | 'cart' | 'money' | 'clock'\n | 'help-circle' | 'warn' | 'info' | 'date';\n\ninterface RegistryEntry {\n name: CoreIconName;\n label: string;\n tone?: 'warning' | 'brand';\n}\n\nconst registry: ReadonlyArray<RegistryEntry> = [\n { name: 'search', label: 'search' },\n { name: 'filter', label: 'filter' },\n { name: 'view', label: 'view' },\n { name: 'hide', label: 'hide' },\n { name: 'edit', label: 'edit' },\n { name: 'delete', label: 'delete' },\n { name: 'copy', label: 'copy' },\n { name: 'download', label: 'download' },\n { name: 'upload', label: 'upload' },\n { name: 'setting', label: 'setting' },\n { name: 'bell', label: 'bell' },\n { name: 'user', label: 'user' },\n { name: 'mail', label: 'mail' },\n { name: 'calendar', label: 'calendar' },\n { name: 'folder', label: 'folder' },\n { name: 'image', label: 'image' },\n { name: 'cart', label: 'cart' },\n { name: 'money', label: 'money' },\n { name: 'clock', label: 'clock' },\n { name: 'help-circle', label: 'help-circle' },\n { name: 'warn', label: 'warn → warning', tone: 'warning' },\n { name: 'info', label: 'info → info-circle', tone: 'brand' },\n { name: 'date', label: 'date → calendar' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleIcon\n v-for=\"entry in registry\"\n :key=\"entry.name\"\n :name=\"entry.name\"\n :tone=\"entry.tone\"\n :label=\"entry.label\"\n />\n <KoleIcon name=\"not-a-real-icon-name\" label=\"未命中回落插槽\"><strong>?</strong></KoleIcon>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype CoreIconName =\n | 'search' | 'filter' | 'view' | 'hide' | 'edit' | 'delete' | 'copy'\n | 'download' | 'upload' | 'setting' | 'bell' | 'user' | 'mail'\n | 'calendar' | 'folder' | 'image' | 'cart' | 'money' | 'clock'\n | 'help-circle' | 'warn' | 'info' | 'date';\n\ninterface RegistryEntry {\n name: CoreIconName;\n label: string;\n tone?: 'warning' | 'brand';\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): { registry: ReadonlyArray<RegistryEntry> } {\n return {\n registry: [\n { name: 'search', label: 'search' },\n { name: 'filter', label: 'filter' },\n { name: 'view', label: 'view' },\n { name: 'hide', label: 'hide' },\n { name: 'edit', label: 'edit' },\n { name: 'delete', label: 'delete' },\n { name: 'copy', label: 'copy' },\n { name: 'download', label: 'download' },\n { name: 'upload', label: 'upload' },\n { name: 'setting', label: 'setting' },\n { name: 'bell', label: 'bell' },\n { name: 'user', label: 'user' },\n { name: 'mail', label: 'mail' },\n { name: 'calendar', label: 'calendar' },\n { name: 'folder', label: 'folder' },\n { name: 'image', label: 'image' },\n { name: 'cart', label: 'cart' },\n { name: 'money', label: 'money' },\n { name: 'clock', label: 'clock' },\n { name: 'help-circle', label: 'help-circle' },\n { name: 'warn', label: 'warn → warning', tone: 'warning' },\n { name: 'info', label: 'info → info-circle', tone: 'brand' },\n { name: 'date', label: 'date → calendar' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:206-208 LOOKUP_NAMES 的 20 个名字与 :248 fill('row-lookup', LOOKUP_NAMES.map(...))；别名实参取自 :257 fill('row-alias', ...)、未命中回落默认插槽取自 :263 fill('row-miss', ...)",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 type CoreIconName 字面量联合 + ReadonlyArray 循环（末项回落插槽单列）；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface RegistryEntry；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 type CoreIconName 字面量联合 + ReadonlyArray 循环（末项回落插槽单列）；vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 interface RegistryEntry；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "icon-ex-6",
|
||
"title": "实际场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-scenarios\">\n <div class=\"row\" id=\"row-buttons\"></div>\n <div class=\"row\" id=\"row-sort\"></div>\n <div class=\"row\" id=\"row-empty\"></div>\n <p class=\"demo-note\">图标自身不是热区：按钮 / 排序表头由原生 button 提供键盘可达与焦点环，图标只负责图形语义。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
7
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
8
|
||
],
|
||
[
|
||
0,
|
||
7,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-scenarios\">\n <div class=\"row\" id=\"row-buttons\"></div>\n <div class=\"row\" id=\"row-sort\"></div>\n <div class=\"row\" id=\"row-empty\"></div>\n <p>图标自身不是热区：按钮 / 排序表头由原生 button 提供键盘可达与焦点环，图标只负责图形语义。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <button className=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label=\"新建\">\n <KoleIcon name=\"add\" size=\"small\" />\n 新建\n </button>\n <button className=\"kole-icon-button\" type=\"button\" aria-label=\"导出\">\n <KoleIcon name=\"download\" size=\"small\" />\n 导出\n </button>\n <button className=\"kole-icon-button\" type=\"button\" aria-label=\"设置\">\n <KoleIcon name=\"setting\" size=\"small\" label=\"设置\" />\n </button>\n <button className=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"ascending\">\n 名称\n <KoleIcon name=\"arrow-up\" size=\"small\" label=\"名称排序\" />\n </button>\n <button className=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"descending\">\n 更新时间\n <KoleIcon name=\"arrow-down\" size=\"small\" label=\"更新时间排序\" />\n </button>\n <div className=\"kole-icon-empty\">\n <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n <strong className=\"kole-icon-title\">暂无数据</strong>\n <span className=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n </div>\n</>",
|
||
"vue3": "<template>\n <>\n <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label=\"新建\">\n <KoleIcon name=\"add\" size=\"small\" />\n 新建\n </button>\n <button class=\"kole-icon-button\" type=\"button\" aria-label=\"导出\">\n <KoleIcon name=\"download\" size=\"small\" />\n 导出\n </button>\n <button class=\"kole-icon-button\" type=\"button\" aria-label=\"设置\">\n <KoleIcon name=\"setting\" size=\"small\" label=\"设置\" />\n </button>\n <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"ascending\">\n 名称\n <KoleIcon name=\"arrow-up\" size=\"small\" label=\"名称排序\" />\n </button>\n <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"descending\">\n 更新时间\n <KoleIcon name=\"arrow-down\" size=\"small\" label=\"更新时间排序\" />\n </button>\n <div class=\"kole-icon-empty\">\n <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n <strong class=\"kole-icon-title\">暂无数据</strong>\n <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n </div>\n </>\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <>\n <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label=\"新建\">\n <KoleIcon name=\"add\" size=\"small\" />\n 新建\n </button>\n <button class=\"kole-icon-button\" type=\"button\" aria-label=\"导出\">\n <KoleIcon name=\"download\" size=\"small\" />\n 导出\n </button>\n <button class=\"kole-icon-button\" type=\"button\" aria-label=\"设置\">\n <KoleIcon name=\"setting\" size=\"small\" label=\"设置\" />\n </button>\n <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"ascending\">\n 名称\n <KoleIcon name=\"arrow-up\" size=\"small\" label=\"名称排序\" />\n </button>\n <button class=\"kole-icon-sort-head\" type=\"button\" aria-sort=\"descending\">\n 更新时间\n <KoleIcon name=\"arrow-down\" size=\"small\" label=\"更新时间排序\" />\n </button>\n <div class=\"kole-icon-empty\">\n <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n <strong class=\"kole-icon-title\">暂无数据</strong>\n <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n </div>\n </>\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype ToolbarIconName = 'add' | 'download' | 'setting';\ninterface ToolbarAction {\n name: ToolbarIconName;\n text: string;\n iconLabel?: string;\n}\n\ntype SortOrder = 'ascending' | 'descending';\ninterface SortHead {\n order: SortOrder;\n name: 'arrow-up' | 'arrow-down';\n text: string;\n iconLabel: string;\n}\n\nconst primary: ToolbarAction = { name: 'add', text: '新建' };\nconst actions: ReadonlyArray<ToolbarAction> = [\n { name: 'download', text: '导出' },\n { name: 'setting', text: '设置', iconLabel: '设置' },\n];\n\nconst sortHeads: ReadonlyArray<SortHead> = [\n { order: 'ascending', name: 'arrow-up', text: '名称', iconLabel: '名称排序' },\n { order: 'descending', name: 'arrow-down', text: '更新时间', iconLabel: '更新时间排序' },\n];\n\nexport default function KoleIconScenarioDemo(): JSX.Element {\n return (\n <>\n <button className=\"kole-icon-button kole-icon-primary\" type=\"button\" aria-label={primary.text}>\n <KoleIcon name={primary.name} size=\"small\" label={primary.iconLabel} />\n {primary.text}\n </button>\n {actions.map((action) => (\n <button key={action.name} className=\"kole-icon-button\" type=\"button\" aria-label={action.text}>\n <KoleIcon name={action.name} size=\"small\" label={action.iconLabel} />\n {action.text}\n </button>\n ))}\n {sortHeads.map((head) => (\n <button key={head.order} className=\"kole-icon-sort-head\" type=\"button\" aria-sort={head.order}>\n {head.text}\n <KoleIcon name={head.name} size=\"small\" label={head.iconLabel} />\n </button>\n ))}\n <div className=\"kole-icon-empty\">\n <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n <strong className=\"kole-icon-title\">暂无数据</strong>\n <span className=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n </div>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" :aria-label=\"primary.text\">\n <KoleIcon :name=\"primary.name\" size=\"small\" :label=\"primary.iconLabel\" />\n {{ primary.text }}\n </button>\n <button\n v-for=\"action in actions\"\n :key=\"action.name\"\n class=\"kole-icon-button\"\n type=\"button\"\n :aria-label=\"action.text\"\n >\n <KoleIcon :name=\"action.name\" size=\"small\" :label=\"action.iconLabel\" />\n {{ action.text }}\n </button>\n <button\n v-for=\"head in sortHeads\"\n :key=\"head.order\"\n class=\"kole-icon-sort-head\"\n type=\"button\"\n :aria-sort=\"head.order\"\n >\n {{ head.text }}\n <KoleIcon :name=\"head.name\" size=\"small\" :label=\"head.iconLabel\" />\n </button>\n <div class=\"kole-icon-empty\">\n <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n <strong class=\"kole-icon-title\">暂无数据</strong>\n <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype ToolbarIconName = 'add' | 'download' | 'setting';\ninterface ToolbarAction {\n name: ToolbarIconName;\n text: string;\n iconLabel?: string;\n}\n\ntype SortOrder = 'ascending' | 'descending';\ninterface SortHead {\n order: SortOrder;\n name: 'arrow-up' | 'arrow-down';\n text: string;\n iconLabel: string;\n}\n\nconst primary: ToolbarAction = { name: 'add', text: '新建' };\nconst actions: ReadonlyArray<ToolbarAction> = [\n { name: 'download', text: '导出' },\n { name: 'setting', text: '设置', iconLabel: '设置' },\n];\n\nconst sortHeads: ReadonlyArray<SortHead> = [\n { order: 'ascending', name: 'arrow-up', text: '名称', iconLabel: '名称排序' },\n { order: 'descending', name: 'arrow-down', text: '更新时间', iconLabel: '更新时间排序' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <button class=\"kole-icon-button kole-icon-primary\" type=\"button\" :aria-label=\"primary.text\">\n <KoleIcon :name=\"primary.name\" size=\"small\" :label=\"primary.iconLabel\" />\n {{ primary.text }}\n </button>\n <button\n v-for=\"action in actions\"\n :key=\"action.name\"\n class=\"kole-icon-button\"\n type=\"button\"\n :aria-label=\"action.text\"\n >\n <KoleIcon :name=\"action.name\" size=\"small\" :label=\"action.iconLabel\" />\n {{ action.text }}\n </button>\n <button\n v-for=\"head in sortHeads\"\n :key=\"head.order\"\n class=\"kole-icon-sort-head\"\n type=\"button\"\n :aria-sort=\"head.order\"\n >\n {{ head.text }}\n <KoleIcon :name=\"head.name\" size=\"small\" :label=\"head.iconLabel\" />\n </button>\n <div class=\"kole-icon-empty\">\n <KoleIcon name=\"folder\" size=\"xlarge\" tone=\"secondary\" label=\"暂无数据\" />\n <strong class=\"kole-icon-title\">暂无数据</strong>\n <span class=\"kole-icon-desc\">调整筛选条件后重试，或新建一条记录。</span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype ToolbarIconName = 'add' | 'download' | 'setting';\ninterface ToolbarAction {\n name: ToolbarIconName;\n text: string;\n iconLabel?: string;\n}\n\ntype SortOrder = 'ascending' | 'descending';\ninterface SortHead {\n order: SortOrder;\n name: 'arrow-up' | 'arrow-down';\n text: string;\n iconLabel: string;\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): {\n primary: ToolbarAction;\n actions: ReadonlyArray<ToolbarAction>;\n sortHeads: ReadonlyArray<SortHead>;\n } {\n return {\n primary: { name: 'add', text: '新建' },\n actions: [\n { name: 'download', text: '导出' },\n { name: 'setting', text: '设置', iconLabel: '设置' },\n ],\n sortHeads: [\n { order: 'ascending', name: 'arrow-up', text: '名称', iconLabel: '名称排序' },\n { order: 'descending', name: 'arrow-down', text: '更新时间', iconLabel: '更新时间排序' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:268 fill('row-buttons', ...) 的三个按钮实参、:276 fill('row-sort', ...) 经 :210 sortHead(key,state,iconName) 的 arrow-up/arrow-down/sort、:281 fill('row-empty', ...) 的 folder + xlarge + secondary"
|
||
]
|
||
},
|
||
{
|
||
"id": "icon-ex-7",
|
||
"title": "历史兼容（icon 字形字符）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<section class=\"demo-block\" id=\"sec-compat\">\n <div class=\"row\" id=\"row-compat\"></div>\n <p class=\"demo-note\">既有 icon（字形字符，默认 ★）继续可用；name 有值时 name 优先，故旧调用点不破、新调用点用 name。</p>\n</section>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
8
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
7
|
||
],
|
||
[
|
||
0,
|
||
8,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<section class=\"demo-block\" id=\"sec-compat\">\n <div class=\"row\" id=\"row-compat\"></div>\n <p>既有 icon（字形字符，默认 ★）继续可用；name 有值时 name 优先，故旧调用点不破、新调用点用 name。</p>\n</section>",
|
||
"jsx": "import { KoleIcon } from 'kole-ui/react';\n\n<>\n <KoleIcon icon=\"★\" label=\"收藏\" />\n <KoleIcon name=\"star\" icon=\"★\" tone=\"brand\" label=\"收藏（name 生效）\" />\n</>",
|
||
"vue3": "<template>\n <KoleIcon icon=\"★\" label=\"收藏\" />\n <KoleIcon name=\"star\" icon=\"★\" tone=\"brand\" label=\"收藏（name 生效）\" />\n</template>\n\n<script setup>\nimport { KoleIcon } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleIcon icon=\"★\" label=\"收藏\" />\n <KoleIcon name=\"star\" icon=\"★\" tone=\"brand\" label=\"收藏（name 生效）\" />\n </div>\n</template>\n\n<script>\nimport { KoleIcon } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleIcon }\n};\n</script>",
|
||
"tsx": "import { KoleIcon } from 'kole-ui/react';\n\ntype Glyph = '★';\ninterface LegacySample {\n key: string;\n name?: 'star';\n glyph: Glyph;\n tone?: 'brand';\n label: string;\n}\n\nconst legacy: ReadonlyArray<LegacySample> = [\n { key: 'glyph-only', glyph: '★', label: '收藏' },\n { key: 'name-wins', name: 'star', glyph: '★', tone: 'brand', label: '收藏（name 生效）' },\n];\n\nexport default function KoleIconLegacyDemo(): JSX.Element {\n return (\n <>\n {legacy.map((sample) => (\n <KoleIcon key={sample.key} name={sample.name} icon={sample.glyph} tone={sample.tone} label={sample.label} />\n ))}\n </>\n );\n}",
|
||
"vue3ts": "<template>\n <KoleIcon\n v-for=\"sample in legacy\"\n :key=\"sample.key\"\n :name=\"sample.name\"\n :icon=\"sample.glyph\"\n :tone=\"sample.tone\"\n :label=\"sample.label\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleIcon } from 'kole-ui/vue3';\n\ntype Glyph = '★';\ninterface LegacySample {\n key: string;\n name?: 'star';\n glyph: Glyph;\n tone?: 'brand';\n label: string;\n}\n\nconst legacy: ReadonlyArray<LegacySample> = [\n { key: 'glyph-only', glyph: '★', label: '收藏' },\n { key: 'name-wins', name: 'star', glyph: '★', tone: 'brand', label: '收藏（name 生效）' },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleIcon\n v-for=\"sample in legacy\"\n :key=\"sample.key\"\n :name=\"sample.name\"\n :icon=\"sample.glyph\"\n :tone=\"sample.tone\"\n :label=\"sample.label\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleIcon } from 'kole-ui/vue2';\n\ntype Glyph = '★';\ninterface LegacySample {\n key: string;\n name?: 'star';\n glyph: Glyph;\n tone?: 'brand';\n label: string;\n}\n\nexport default Vue.extend({\n components: { KoleIcon },\n data(): { legacy: ReadonlyArray<LegacySample> } {\n return {\n legacy: [\n { key: 'glyph-only', glyph: '★', label: '收藏' },\n { key: 'name-wins', name: 'star', glyph: '★', tone: 'brand', label: '收藏（name 生效）' },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Icon.html:289 fill('row-compat', ...) 的两个实参：{ icon:'★', label:'收藏' } 与 { name:'star', icon:'★', tone:'brand', label:'收藏（name 生效）' }"
|
||
]
|
||
}
|
||
]
|
||
}
|