perf[views/icons]: use grid (#2803)
This commit is contained in:
parent
b2f8373a5b
commit
ad444fe3ae
|
@ -6,30 +6,34 @@
|
||||||
</aside>
|
</aside>
|
||||||
<el-tabs type="border-card">
|
<el-tabs type="border-card">
|
||||||
<el-tab-pane label="Icons">
|
<el-tab-pane label="Icons">
|
||||||
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
<div class="grid">
|
||||||
<el-tooltip placement="top">
|
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||||
<div slot="content">
|
<el-tooltip placement="top">
|
||||||
{{ generateIconCode(item) }}
|
<div slot="content">
|
||||||
</div>
|
{{ generateIconCode(item) }}
|
||||||
<div class="icon-item">
|
</div>
|
||||||
<svg-icon :icon-class="item" class-name="disabled" />
|
<div class="icon-item">
|
||||||
<span>{{ item }}</span>
|
<svg-icon :icon-class="item" class-name="disabled" />
|
||||||
</div>
|
<span>{{ item }}</span>
|
||||||
</el-tooltip>
|
</div>
|
||||||
</div>
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="Element-UI Icons">
|
<el-tab-pane label="Element-UI Icons">
|
||||||
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
|
<div class="grid">
|
||||||
<el-tooltip placement="top">
|
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
|
||||||
<div slot="content">
|
<el-tooltip placement="top">
|
||||||
{{ generateElementIconCode(item) }}
|
<div slot="content">
|
||||||
</div>
|
{{ generateElementIconCode(item) }}
|
||||||
<div class="icon-item">
|
</div>
|
||||||
<i :class="'el-icon-' + item" />
|
<div class="icon-item">
|
||||||
<span>{{ item }}</span>
|
<i :class="'el-icon-' + item" />
|
||||||
</div>
|
<span>{{ item }}</span>
|
||||||
</el-tooltip>
|
</div>
|
||||||
</div>
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,6 +70,12 @@ export default {
|
||||||
.icons-container {
|
.icons-container {
|
||||||
margin: 10px 20px 0;
|
margin: 10px 20px 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
.icon-item {
|
.icon-item {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
|
|
Loading…
Reference in New Issue