Skip to content

Commit

Permalink
add Grid
Browse files Browse the repository at this point in the history
  • Loading branch information
icarusion committed Jun 4, 2018
1 parent b7b383c commit b132920
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 408 deletions.
24 changes: 24 additions & 0 deletions src/code/grid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
let code = {};

code.import = `
"usingComponents": {
"i-grid": "../../dist/grid/index",
"i-grid-item": "../../dist/grid-item/index",
"i-grid-icon": "../../dist/grid-icon/index",
"i-grid-label": "../../dist/grid-label/index"
}
`;
code.usage = `
<i-grid>
<i-grid-item>
<i-grid-icon>
<image src="../images/icon-vip.png" />
</i-grid-icon>
<i-grid-label>Grid</i-grid-label>
</i-grid-item>
<i-grid-item>Grid</i-grid-item>
<i-grid-item>Grid</i-grid-item>
</i-grid>
`;

export default code;
7 changes: 7 additions & 0 deletions src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/layout.vue'], resolve)
},
{
path: '/components/grid',
meta: {
title: '宫格 Grid'
},
component: (resolve) => require(['./views/components/grid.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
117 changes: 117 additions & 0 deletions src/views/components/grid.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<template>
<i-article>
<article>
<h1>Grid 宫格</h1>
<Anchor title="概述" h2></Anchor>
<p>基础宫格布局。每行 3 个宫格使用最佳。</p>
<p>宫格共包含 4 个组件:i-grid、i-grid-item、i-grid-icon、i-grid-label,其中,i-grid-icon 和 i-grid-label 默认定制好了样式,但在开发中也可不用这两个组件。</p>
<Anchor title="使用指南" h2></Anchor>
<p>在 .json 中引入组件</p>
<i-code bg lang="json">{{ code.import }}</i-code>
<Anchor title="示例" h2></Anchor>
<i-code bg lang="html">{{ code.usage }}</i-code>
<ad></ad>

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Grid properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="GridItem properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="GridIcon properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="GridLabel properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</article>
</i-article>
</template>
<script>
import iArticle from '../../components/article.vue';
import iCode from 'iCode';
import Demo from '../../components/demo.vue';
import Code from '../../code/grid';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>
4 changes: 2 additions & 2 deletions src/views/components/layout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Row props" h3></Anchor>
<Anchor title="Row properties" h3></Anchor>
<table>
<thead>
<tr>
Expand All @@ -40,7 +40,7 @@
</tr>
</tbody>
</table>
<Anchor title="Col props" h3></Anchor>
<Anchor title="Col properties" h3></Anchor>
<table>
<thead>
<tr>
Expand Down
164 changes: 0 additions & 164 deletions src/views/practice/case-en.vue

This file was deleted.

Loading

0 comments on commit b132920

Please sign in to comment.