docs(icons): [icon] icon docs optimization (#779)
This commit is contained in:
chenxi-20
GitHub
parent
288f3e5019
commit
07321e9f7e
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="icon-demo">
|
||||
<tiny-icon-share class="tiny-svg-size icon-share"></tiny-icon-share>
|
||||
<tiny-icon-del class="tiny-svg-size icon-del"></tiny-icon-del>
|
||||
<tiny-icon-writing class="tiny-svg-size icon-writing"></tiny-icon-writing>
|
||||
<tiny-icon-ascending class="tiny-svg-size icon-ascending"></tiny-icon-ascending>
|
||||
<tiny-icon-clock-work class="tiny-svg-size icon-clockWork"></tiny-icon-clock-work>
|
||||
<tiny-icon-share></tiny-icon-share>
|
||||
<tiny-icon-del></tiny-icon-del>
|
||||
<tiny-icon-writing></tiny-icon-writing>
|
||||
<tiny-icon-ascending></tiny-icon-ascending>
|
||||
<tiny-icon-clock-work></tiny-icon-clock-work>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,25 +19,10 @@ const TinyIconClockWork = iconClockWork()
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-demo .tiny-svg-size {
|
||||
.icon-demo .tiny-svg {
|
||||
fill: #8994aa;
|
||||
margin: 20px 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-demo .icon-del {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.icon-demo .icon-writing {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
.icon-demo .icon-ascending {
|
||||
font-size: 3.3em;
|
||||
}
|
||||
|
||||
.icon-demo .icon-clockWork {
|
||||
font-size: 4.5em;
|
||||
font-size: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,8 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('icon#basic-usage')
|
||||
await page.getByText('基本用法').nth(1).click()
|
||||
await page.locator('.icon-demo > svg').first().click()
|
||||
await expect(page.locator('.icon-demo > svg').first()).toHaveClass(/icon-share/)
|
||||
await page.locator('svg:nth-child(2)').first().click()
|
||||
await expect(page.locator('svg:nth-child(2)').first()).toHaveClass(/icon-del/)
|
||||
await page.locator('svg:nth-child(3)').click()
|
||||
await expect(page.locator('svg:nth-child(3)')).toHaveClass(/icon-writing/)
|
||||
await page.locator('svg:nth-child(4)').click()
|
||||
await expect(page.locator('svg:nth-child(4)')).toHaveClass(/icon-ascending/)
|
||||
await page.locator('.icon').click()
|
||||
await expect(page.locator('.icon')).toHaveClass(/icon-clockWork/)
|
||||
|
||||
await expect(page.locator('.icon-demo > svg').first()).toHaveCSS('font-size', '48px')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="icon-demo">
|
||||
<icon-share class="tiny-svg-size icon-share"></icon-share>
|
||||
<icon-del class="tiny-svg-size icon-del"></icon-del>
|
||||
<icon-writing class="tiny-svg-size icon-writing"></icon-writing>
|
||||
<icon-ascending class="tiny-svg-size icon-ascending"></icon-ascending>
|
||||
<icon-clock-work class="tiny-svg-size icon-clockWork"></icon-clock-work>
|
||||
<icon-share></icon-share>
|
||||
<icon-del></icon-del>
|
||||
<icon-writing></icon-writing>
|
||||
<icon-ascending></icon-ascending>
|
||||
<icon-clock-work></icon-clock-work>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,25 +23,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-demo .tiny-svg-size {
|
||||
.icon-demo .tiny-svg {
|
||||
fill: #8994aa;
|
||||
margin: 20px 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-demo .icon-del {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.icon-demo .icon-writing {
|
||||
font-size: 2.3em;
|
||||
}
|
||||
|
||||
.icon-demo .icon-ascending {
|
||||
font-size: 3.3em;
|
||||
}
|
||||
|
||||
.icon-demo .icon-clockWork {
|
||||
font-size: 4.5em;
|
||||
font-size: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="search">
|
||||
<div>搜索图标：</div>
|
||||
<tiny-input class="search-input" v-model="searchName" clearable autofocus size="small"></tiny-input>
|
||||
</div>
|
||||
<div class="svgs-wrapper">
|
||||
|
|
@ -52,6 +51,11 @@ function click(name) {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 20%);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -74,9 +78,8 @@ function click(name) {
|
|||
.svgs-icon {
|
||||
cursor: pointer;
|
||||
transition: all 0.4s;
|
||||
width: 2em;
|
||||
fill: #000;
|
||||
height: 2em;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.svgs-icon:hover {
|
||||
|
|
@ -84,17 +87,20 @@ function click(name) {
|
|||
}
|
||||
|
||||
.svgs-item {
|
||||
width: 200px;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.svgs-item:hover {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.svgs-text {
|
||||
padding-top: 8px;
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="search">
|
||||
<div>搜索图标：</div>
|
||||
<tiny-input class="search-input" v-model="searchName" clearable autofocus size="small"></tiny-input>
|
||||
</div>
|
||||
<div class="svgs-wrapper">
|
||||
|
|
@ -64,6 +63,11 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 20%);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -86,9 +90,8 @@ export default {
|
|||
.svgs-icon {
|
||||
cursor: pointer;
|
||||
transition: all 0.4s;
|
||||
width: 2em;
|
||||
fill: #000;
|
||||
height: 2em;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.svgs-icon:hover {
|
||||
|
|
@ -96,17 +99,20 @@ export default {
|
|||
}
|
||||
|
||||
.svgs-item {
|
||||
width: 200px;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.svgs-item:hover {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.svgs-text {
|
||||
padding-top: 8px;
|
||||
margin-top: 12px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div title="复制" class="icon-demo">
|
||||
<tiny-icon-copy class="tiny-svg-size icon-copy"></tiny-icon-copy>
|
||||
<tiny-icon-copy></tiny-icon-copy>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,12 +11,9 @@ const TinyIconCopy = iconCopy()
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-demo .tiny-svg-size {
|
||||
.icon-demo .tiny-svg {
|
||||
fill: #8994aa;
|
||||
margin: 20px 50px;
|
||||
}
|
||||
|
||||
.icon-demo .icon-copy {
|
||||
font-size: 1.8em;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div title="复制" class="icon-demo">
|
||||
<icon-copy class="tiny-svg-size icon-copy"></icon-copy>
|
||||
<icon-copy></icon-copy>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,12 +15,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-demo .tiny-svg-size {
|
||||
.icon-demo .tiny-svg {
|
||||
fill: #8994aa;
|
||||
margin: 20px 50px;
|
||||
}
|
||||
|
||||
.icon-demo .icon-copy {
|
||||
font-size: 1.8em;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Icon 图标
|
|||
|
||||
# Icon 图标
|
||||
|
||||
<div>提供了一套常用的图标集合，从 @opentiny/vue-icon 引入相应的图标类函数。图标类函数首字母大写/小写均可引入，执行该函数以生成一个图标类。</div>
|
||||
<div>常用图标集合</div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Icon
|
|||
|
||||
# Icon
|
||||
|
||||
<div>Provides a set of common icons, which can be used by setting the class name `icon-iconName`.</div>
|
||||
<div>Common icon collection</div>
|
||||
|
|
|
|||
|
|
@ -5,25 +5,32 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '从<code>@opentiny/vue-icon</code>图标库种引入图标函数，并执行，生成相应的图标。',
|
||||
'en-US':
|
||||
'Introduce icon functions from the<code>@ opentiny/vue icon</code>icon library, execute them, and generate corresponding icons.'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'show-title',
|
||||
'name': { 'zh-CN': '显示 Title', 'en-US': 'Display Title' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过在 Icon 的父级元素上增加 <code>title</code> 属性来实现给 Icon 图标增加 Title 的功能。</p>\n',
|
||||
'zh-CN': '通过其父元素的<code>title</code>属性，实现给图标增加<code>Title</code>的功能。',
|
||||
'en-US':
|
||||
'<p>The <code>title</code> attribute is added to the parent element of an icon to add a title to the icon. </p>\n'
|
||||
'By using the<code>title</code>attribute of its parent element, the function of adding<code>title</code>to the icon is implemented.'
|
||||
},
|
||||
'codeFiles': ['show-title.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'list',
|
||||
'name': { 'zh-CN': '图标集合', 'en-US': 'Icon Set' },
|
||||
'desc': { 'zh-CN': '全部图标参考如下', 'en-US': 'For details, see the following example.' },
|
||||
'desc': {
|
||||
'zh-CN': '输入图标名称进行搜索，点击图标即可快速复制名称。',
|
||||
'en-US': 'Enter the icon name for search, Click on the icon to quickly copy the name.'
|
||||
},
|
||||
'codeFiles': ['list.vue']
|
||||
}
|
||||
],
|
||||
apis: [{ 'name': 'icon', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
|
||||
apis: []
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue