ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 16:44:21 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix wap style

Browse Source
This commit is contained in:
cookfront
2017-04-18 20:43:01 +08:00
parent e9807c1ad3
commit 674084534f
22 changed files with 127 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/examples-dist/actionsheet.vue
View File

@@ -1,25 +1,19 @@
<template><section class="demo-actionSheet"><h1 class="demo-title">ActionSheet 行动按钮</h1><example-block title="基础用法">
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
</example-block><example-block title="带取消按钮的ActionSheet">
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
</example-block><example-block title="带标题的ActionSheet">
<div class="zan-row">
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
</div>
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</zan-actionsheet>

41
docs/examples-dist/badge.vue
View File

@@ -1,21 +1,38 @@
<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<div class="badge-group-wrapper">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</div>
</example-block><example-block title="选中某个badge">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<div class="badge-group-wrapper">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</div>
</example-block></section></template>
<style>
@component-namespace demo {
@b badge {
.badge-group-wrapper {
padding: 30px 20px;
background-color: #fff;
}
.zan-badge-group {
margin: 0 auto;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
export default {

2
docs/examples-dist/image-preview.vue
View File

@@ -1,4 +1,4 @@
<template><section class="demo-imagePreview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="">
<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
<zan-button @click="handleImagePreview">预览图片</zan-button>

4
docs/examples-dist/loading.vue
View File

@@ -1,12 +1,12 @@
<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
<zan-loading class="some-customized-class"></zan-loading>
</example-block><example-block title="">
</example-block><example-block title="渐变浅色spinner">
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
</div>
</example-block><example-block title="">
</example-block><example-block title="单色spinner">
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>

20
docs/examples-dist/popup.vue
View File

@@ -1,5 +1,5 @@
<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
<zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
从中间弹出popup
</zan-popup>
@@ -7,22 +7,23 @@
</example-block><example-block title="从不同位置弹出菜单">
<zan-button block="" @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
<zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup>
<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
更新成功
</zan-popup>
<zan-button block="" @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
</zan-popup>
<zan-button block="" @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
</zan-popup>
@@ -33,9 +34,8 @@
<style>
@component-namespace demo {
@b popup {
.examples,
.example-block {
padding: 0 15px;
.zan-button {
margin: 10px 15px;
}
.zan-popup-1 {
@@ -65,10 +65,6 @@
width: 100%;
height: 100%;
}
.zan-button {
margin: 10px 0;
}
}
}
</style>

2
docs/examples-dist/quantity.vue
View File

@@ -14,7 +14,7 @@
@component-namespace demo {
@b quantity {
.zan-quantity {
margin: 15px;
margin-left: 15px;
}
.curr-quantity {

15
docs/examples-dist/switch.vue
View File

@@ -5,14 +5,14 @@
</example-block><example-block title="基础用法">
</example-block><example-block title="">
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
</example-block><example-block title="">
</example-block><example-block title="禁用状态">
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
@@ -21,7 +21,7 @@
</example-block><example-block title="">
</example-block><example-block title="loading状态">
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
@@ -34,10 +34,17 @@
<style>
@component-namespace demo {
@b switch {
.examples {
.examples,
.example-block {
text-align: center;
}
.example-block {
.demo-sub-title {
text-align: left;
}
}
@e text {
margin: 20px auto;
}

2
docs/examples-dist/uploader.vue
View File

@@ -1,4 +1,4 @@
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="">
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
<div class="uploader-container">
<zan-uploader :after-read="logContent">
<zan-icon name="photograph"></zan-icon>

12
docs/examples-docs/actionsheet.md
View File

@@ -99,9 +99,7 @@ export default {
:::demo 基础用法
```html
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
<zan-actionsheet v-model="show1" :actions="actions1">
</zan-actionsheet>
@@ -150,9 +148,7 @@ export default {
:::demo 带取消按钮的ActionSheet
```html
<div class="zan-row">
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
</div>
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</zan-actionsheet>
@@ -195,9 +191,7 @@ export default {
:::demo 带标题的ActionSheet
```html
<div class="zan-row">
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
</div>
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</zan-actionsheet>

43
docs/examples-docs/badge.md
View File

@@ -1,3 +1,18 @@
<style>
@component-namespace demo {
@b badge {
.badge-group-wrapper {
padding: 30px 20px;
background-color: #fff;
}
.zan-badge-group {
margin: 0 auto;
}
}
}
</style>
<script>
export default {
data() {
@@ -55,12 +70,14 @@ export default {
:::demo 基础用法
```html
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<div class="badge-group-wrapper">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</div>
```
:::
@@ -70,12 +87,14 @@ export default {
:::demo 选中某个badge
```html
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
<div class="badge-group-wrapper">
<zan-badge-group :active-key="2">
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group>
</div>
```
:::

2
docs/examples-docs/image-preview.md
View File

@@ -41,7 +41,7 @@ import { ImagePreview } from '@youzan/zanui-vue';
#### 基础用法
:::demo
:::demo 基础用法
```html
<zan-button @click="handleImagePreview">预览图片</zan-button>

4
docs/examples-docs/loading.md
View File

@@ -64,7 +64,7 @@ export default {
#### 渐变浅色spinner
:::demo
:::demo 渐变浅色spinner
```html
<div class="demo-loading__example demo-loading__example--with-bg">
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
@@ -74,7 +74,7 @@ export default {
#### 单色spinner
:::demo
:::demo 单色spinner
```html
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>

20
docs/examples-docs/popup.md
View File

@@ -1,9 +1,8 @@
<style>
@component-namespace demo {
@b popup {
.examples,
.example-block {
padding: 0 15px;
.zan-button {
margin: 10px 15px;
}
.zan-popup-1 {
@@ -33,10 +32,6 @@
width: 100%;
height: 100%;
}
.zan-button {
margin: 10px 0;
}
}
}
</style>
@@ -123,7 +118,7 @@ export default {
:::demo 基础用法
```html
<zan-button block @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
从中间弹出popup
</zan-popup>
@@ -146,22 +141,23 @@ export default {
:::demo 从不同位置弹出菜单
```html
<zan-button block @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
<zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup>
<zan-button block @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
更新成功
</zan-popup>
<zan-button block @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
</zan-popup>
<zan-button block @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
</zan-popup>

2
docs/examples-docs/quantity.md
View File

@@ -2,7 +2,7 @@
@component-namespace demo {
@b quantity {
.zan-quantity {
margin: 15px;
margin-left: 15px;
}
.curr-quantity {

15
docs/examples-docs/switch.md
View File

@@ -1,10 +1,17 @@
<style>
@component-namespace demo {
@b switch {
.examples {
.examples,
.example-block {
text-align: center;
}
.example-block {
.demo-sub-title {
text-align: left;
}
}
@e text {
margin: 20px auto;
}
@@ -92,7 +99,7 @@ export default {
```
:::
:::demo 基础用法
:::demo
```html
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
@@ -129,7 +136,7 @@ export default {
设置`disabled`属性为`true`，此时开关不可点击。
:::demo
:::demo 禁用状态
```html
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
@@ -154,7 +161,7 @@ export default {
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
:::demo
:::demo loading状态
```html
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>

2
docs/examples-docs/uploader.md
View File

@@ -49,7 +49,7 @@ export default {
#### 基础用法
:::demo
:::demo 基础用法
```html
<div class="uploader-container">
<zan-uploader :after-read="logContent">

8
docs/src/ExamplesApp.vue
View File

@@ -51,7 +51,7 @@ export default {
padding-bottom: 54px;
height: 100%;
overflow: auto;
background: #f9fafb;
background: #f8f8f8;
position: relative;
}
@@ -76,13 +76,13 @@ export default {
font-size: 16px;
display: block;
line-height: 1;
padding: 20px 15px 10px;
padding: 20px 15px 0;
}
.demo-sub-title {
font-size: 14px;
color: #999;
padding: 10px 15px;
padding: 30px 15px 10px;
}
.footer {
@@ -92,7 +92,7 @@ export default {
position: fixed;
bottom: 0;
left: 0;
background: #f9fafb;
background: #f8f8f8;
}
.zanui-logo {

2
docs/src/nav.config.js
View File

@@ -133,7 +133,7 @@ module.exports = {
"list": [
{
"path": "/actionsheet",
"title": "ActionSheet 行动按钮"
"title": "Actionsheet 行动按钮"
},
{
"path": "/toast",