Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@icarusion
icarusion committed Jul 9, 2018
1 parent 36e6e9d commit f6f51d2
Show file tree
Hide file tree
Showing 4 changed files with 242 additions and 0 deletions.
100 changes: 100 additions & 0 deletions src/code/collapse.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
let code = {};

code.import = `
"usingComponents": {
"i-collapse": "../../dist/collapse/index",
"i-collapse-item": "../../dist/collapse-item/index"
}
`;
code.usage = `
<view class="caption-wrap">
<text class="caption-title">折叠面板</text>
<i-collapse name="{{name}}">
<i-collapse-item title="史蒂夫·乔布斯" name="name1">
<view slot="content">
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
</view>
</i-collapse-item>
<i-collapse-item title="斯蒂夫·盖瑞·沃兹尼亚克" name="name2">
<view slot="content" i-class-content="green-text">
斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
</view>
</i-collapse-item>
<i-collapse-item title="乔纳森·伊夫" name="name3">
<view slot="content">
乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
</view>
</i-collapse-item>
</i-collapse>
</view>
<view class="caption-wrap">
<text class="caption-title">折叠面板 - 手风琴模式</text>
<i-collapse name="{{name}}" accordion>
<i-collapse-item title="史蒂夫·乔布斯" name="name1">
<view slot="content">
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
</view>
</i-collapse-item>
<i-collapse-item title="斯蒂夫·盖瑞·沃兹尼亚克" name="name2">
<view slot="content">
斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
</view>
</i-collapse-item>
<i-collapse-item title="乔纳森·伊夫" name="name3">
<view slot="content">
乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
</view>
</i-collapse-item>
</i-collapse>
</view>
<view class="caption-wrap">
<text class="caption-title">修改样式</text>
<i-collapse name="{{name}}" accordion>
<i-collapse-item
name="name1"
title="史蒂夫·乔布斯"
i-class-title="collapse-item-title"
i-class-content="collapse-item-content">
<view slot="content">
史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
</view>
</i-collapse-item>
<i-collapse-item
name="name2"
title="斯蒂夫·盖瑞·沃兹尼亚克"
i-class-title="collapse-item-title"
i-class-content="collapse-item-content">
<view slot="content" i-class-content="green-text">
斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
</view>
</i-collapse-item>
<i-collapse-item
name="name3"
title="乔纳森·伊夫"
i-class-title="collapse-item-title"
i-class-content="collapse-item-content">
<view slot="content">
乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
</view>
</i-collapse-item>
</i-collapse>
</view>
`;

code.js = `
Page({
data: {
name: 'name1'
}
});
`;

export default code;
4 changes: 4 additions & 0 deletions src/config/navigate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,10 @@ const list = {
title: 'Avatar 头像',
path: '/components/avatar'
},
{
title: 'Collapse 折叠面板',
path: '/components/collapse'
},
{
title: 'CountDown 倒计时',
path: '/components/count-down'
Expand Down
7 changes: 7 additions & 0 deletions src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/load-more.vue'], resolve)
},
{
path: '/components/collapse',
meta: {
title: '折叠面板 Collapse'
},
component: (resolve) => require(['./views/components/collapse.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
131 changes: 131 additions & 0 deletions src/views/components/collapse.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<template>
<i-article>
<article>
<h1>Collapse 折叠面板</h1>
<Anchor title="概述" h2></Anchor>
<p>将内容区域折叠/展开。</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>
<br><br>
<i-code bg lang="js">{{ code.js }}</i-code>
<ad></ad>

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Collapse 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>
<tr>
<td>name</td>
<td>当前展开的面板的 name</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>accordion</td>
<td>是否为手风琴模式</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<Anchor title="CollapseItem 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>
<tr>
<td>i-class-title</td>
<td>自定义标题类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>i-class-content</td>
<td>自定义内容类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>name</td>
<td>当前面板的标识</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>当前面板的标题</td>
<td>String</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="CollapseItem slots" h3></Anchor>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</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/collapse';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>

0 comments on commit f6f51d2

Please sign in to comment.