[Doc] add build-in style document (#633)

docs/demos/index.js

@@ -26,6 +26,7 @@ export default {
   'address-list': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/address-list'), 'address-list')), 'address-list')),
   'area': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/area'), 'area')), 'area')),
   'badge': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/badge'), 'badge')), 'badge')),
+  'built-in-style': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/built-in-style'), 'built-in-style')), 'built-in-style')),
   'button': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/button'), 'button')), 'button')),
   'card': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/card'), 'card')), 'card')),
   'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe')),

docs/demos/views/built-in-style.vue

@@ -0,0 +1,85 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('ellipsis')">
+      <div class="van-ellipsis">{{ $t('text') }}</div>
+    </demo-block>
+
+    <demo-block :title="$t('hairline')">
+      <div class="van-hairline--top" />
+    </demo-block>
+
+    <demo-block :title="$t('animation')">
+      <van-switch-cell v-model="show" :title="$t('toggle')" :border="false" />
+      <van-row>
+        <transition name="van-fade">
+          <van-col span="8" v-show="show">Fade</van-col>
+        </transition>
+
+        <transition name="van-slide-bottom">
+          <van-col span="8" v-show="show">Slide Bottom</van-col>
+        </transition>
+      </van-row>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      hairline: '1px 边框',
+      ellipsis: '文字省略',
+      animation: '动画',
+      toggle: '切换动画',
+      text: '这是一段宽度限制 250px 的文字，后面的内容会省略'
+    },
+    'en-US': {
+      hairline: 'Hairline',
+      ellipsis: 'Text Ellipsis',
+      animation: 'Animation',
+      toggle: 'Switch animation',
+      text: 'This is a paragraph of 250px width limit, the back will be omitted.'
+    }
+  },
+
+  data() {
+    return {
+      show: true
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-built-in-style {
+  .van-ellipsis {
+    font-size: 13px;
+    margin-left: 15px;
+    max-width: 250px;
+  }
+
+  .van-hairline--top {
+    height: 30px;
+    background-color: #fff;
+
+    &::after {
+      top: 15px;
+    }
+  }
+
+  .van-col {
+    height: 50px;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 3px;
+    text-align: center;
+    line-height: 50px;
+    margin-left: 15px;
+    background-color: #39a9ed;
+  }
+
+  .van-switch-cell {
+    margin-bottom: 15px;
+  }
+}
+</style>

docs/demos/views/coupon.vue

@@ -115,7 +115,7 @@ export default {
       });
     },
     randomId(max = 999999) {
-      return Math.floor(Math.random() * max) + 1
+      return Math.floor(Math.random() * max) + 1;
     }
   }
 };

docs/markdown/en-US/built-in-style.md

@@ -0,0 +1,48 @@
+## Built-in Style
+Vant contains some common styles that can be used directly by the className.
+
+### Text ellipsis
+When the text content length exceeds the maximum container width, the excess text is automatically omitted.
+
+```html
+<div class="van-ellipsis">
+  This is a paragraph of 250px width limit, the back will be omitted.
+</div>
+```
+
+### Hairline
+Add 1px border under the Retina screen for the element, based on a pseudo element.
+
+```html
+<!-- border top -->
+<div class="van-hairline--top"></div>
+
+<!-- border bottom -->
+<div class="van-hairline--bottom"></div>
+
+<!-- border left -->
+<div class="van-hairline--left"></div>
+
+<!-- border right -->
+<div class="van-hairline--right"></div>
+
+<!-- border top & bottom -->
+<div class="van-hairline--top-bottom"></div>
+
+<!-- full border -->
+<div class="van-hairline--surround"></div>
+```
+
+### Animation
+
+```html
+<!-- fade in  -->
+<transition name="van-fade">
+  <div v-show="visible">Fade</div>
+</transition>
+
+<!-- slide bottom -->
+<transition name="van-slide-bottom">
+  <div v-show="visible">Fade</div>
+</transition>
+```

docs/markdown/en-US/coupon.md

@@ -107,8 +107,8 @@ export default {
 | discount | Discount | `Number` |
 | denominations | Denominations | `Number` |
 | origin_condition | Condition | `Number` |
-| start_at | Start time | `Number` |
-| end_at | End time | `Number` |
+| start_at | Start time (Timestmap, unit second) | `Number` |
+| end_at | End time (Timestmap, unit second) | `Number` |
 | reason | Unavailable reason | `String` |
 | value | Value | `Number` |
 

docs/markdown/index.js

@@ -18,6 +18,7 @@ export default {
   'zh-CN/address-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-list.md')), 'zh-CN/address-list')),
   'zh-CN/area': wrapper(r => require.ensure([], () => r(require('./zh-CN/area.md')), 'zh-CN/area')),
   'zh-CN/badge': wrapper(r => require.ensure([], () => r(require('./zh-CN/badge.md')), 'zh-CN/badge')),
+  'zh-CN/built-in-style': wrapper(r => require.ensure([], () => r(require('./zh-CN/built-in-style.md')), 'zh-CN/built-in-style')),
   'zh-CN/button': wrapper(r => require.ensure([], () => r(require('./zh-CN/button.md')), 'zh-CN/button')),
   'zh-CN/card': wrapper(r => require.ensure([], () => r(require('./zh-CN/card.md')), 'zh-CN/card')),
   'zh-CN/cell-swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell-swipe.md')), 'zh-CN/cell-swipe')),
@@ -72,6 +73,7 @@ export default {
   'en-US/address-list': wrapper(r => require.ensure([], () => r(require('./en-US/address-list.md')), 'en-US/address-list')),
   'en-US/area': wrapper(r => require.ensure([], () => r(require('./en-US/area.md')), 'en-US/area')),
   'en-US/badge': wrapper(r => require.ensure([], () => r(require('./en-US/badge.md')), 'en-US/badge')),
+  'en-US/built-in-style': wrapper(r => require.ensure([], () => r(require('./en-US/built-in-style.md')), 'en-US/built-in-style')),
   'en-US/button': wrapper(r => require.ensure([], () => r(require('./en-US/button.md')), 'en-US/button')),
   'en-US/card': wrapper(r => require.ensure([], () => r(require('./en-US/card.md')), 'en-US/card')),
   'en-US/cell-swipe': wrapper(r => require.ensure([], () => r(require('./en-US/cell-swipe.md')), 'en-US/cell-swipe')),

docs/markdown/zh-CN/built-in-style.md

@@ -0,0 +1,47 @@
+## 内置样式
+Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
+
+### 文字省略
+当文本内容长度超过容器最大宽度时，自动省略多余的文本。
+
+```html
+<div class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</div>
+```
+
+### 1px 边框
+为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
+
+```html
+<!-- 上边框 -->
+<div class="van-hairline--top"></div>
+
+<!-- 下边框 -->
+<div class="van-hairline--bottom"></div>
+
+<!-- 左边框 -->
+<div class="van-hairline--left"></div>
+
+<!-- 右边框 -->
+<div class="van-hairline--right"></div>
+
+<!-- 上下边框 -->
+<div class="van-hairline--top-bottom"></div>
+
+<!-- 全边框 -->
+<div class="van-hairline--surround"></div>
+```
+
+### 动画
+可以通过 `transition` 组件使用内置的动画
+
+```html
+<!-- 淡入 -->
+<transition name="van-fade">
+  <div v-show="visible">Fade</div>
+</transition>
+
+<!-- 下滑 -->
+<transition name="van-slide-bottom">
+  <div v-show="visible">Fade</div>
+</transition>
+```

docs/markdown/zh-CN/coupon.md

@@ -110,8 +110,7 @@ export default {
 | discount | 折扣（0为满减券）88=>8.8折 | `Number` |
 | denominations | 面值（0为折扣券）单位分 | `Number` |
 | origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
-| start_at | 卡有效开始时间 | `Number` |
-| end_at | 卡失效日期 | `Number` |
+| start_at | 卡有效开始时间 (时间戳, 单位秒) | `Number` |
+| end_at | 卡失效日期 (时间戳, 单位秒) | `Number` |
 | reason | 不可用原因 | `String` |
 | value | 订单优惠金额，单位分 | `Number` |
-

docs/src/WapApp.vue

@@ -6,7 +6,6 @@
       class="van-doc-nav-bar"
       :title="title"
       left-arrow
-      :left-text="$t('back')"
       @click-left="onBack"
     />
     <router-view />
@@ -14,13 +13,11 @@
 </template>
 
 <script>
-import { camelize } from 'packages/utils';
-
 export default {
   computed: {
     title() {
-      const name = this.$route.name;
-      return name ? camelize(name.split('/').pop()) : '';
+      const { name } = this.$route.meta;
+      return name ? name.replace(/-/g, '') : '';
     }
   },
 

docs/src/doc.config.js

@@ -37,6 +37,10 @@ module.exports = {
                 title: '更新日志',
                 noExample: true
               },
+              {
+                path: '/built-in-style',
+                title: '内置样式'
+              },
               {
                 path: '/theme',
                 title: '定制主题',
@@ -319,6 +323,10 @@ module.exports = {
                 title: 'Changelog',
                 noExample: true
               },
+              {
+                path: '/built-in-style',
+                title: 'Built-in style'
+              },
               {
                 path: '/theme',
                 title: 'Custom Theme',

docs/src/examples.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './WapApp';
-import routes from './router.config';
+import routes from './router';
 import Vant, { Lazyload } from 'packages';
 import VantDoc from 'vant-doc';
 import 'packages/vant-css/src/index.css';

docs/src/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './DocsApp';
-import routes from './router.config';
+import routes from './router';
 import VantDoc from 'vant-doc';
 import isMobile from './utils/is-mobile';
 import './components/nprogress.css';

docs/src/router.js

@@ -28,22 +28,20 @@ const registerRoute = (isExample) => {
 
     const navs = docConfig[lang].nav || [];
     navs.forEach(nav => {
-      if (isExample && !nav.showInMobile) {
-        return;
-      }
-
       if (nav.groups) {
         nav.groups.forEach(group => {
           group.list.forEach(page => addRoute(page, lang));
         });
-      } else if (nav.children) {
-        nav.children.forEach(page => addRoute(page, lang));
       } else {
         addRoute(nav, lang);
       }
     });
 
     function addRoute(page, lang) {
+      if (isExample && page.noExample) {
+        return;
+      }
+
       const { path } = page;
       if (path) {
         const name = lang + '/' + path.replace('/', '');
@@ -59,7 +57,10 @@ const registerRoute = (isExample) => {
           name,
           component,
           path: `/${lang}/component${path}`,
-          meta: { lang }
+          meta: {
+            lang,
+            name: page.title
+          }
         });
       }
     }

packages/switch-cell/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <cell :title="title" class="van-switch-cell">
+  <cell :title="title" :border="border" class="van-switch-cell">
     <van-switch v-bind="$props" @input="$emit('input', $event)" />
   </cell>
 </template>
@@ -20,6 +20,7 @@ export default create({
   props: {
     title: String,
     value: Boolean,
+    border: Boolean,
     loading: Boolean,
     disabled: Boolean
   },

packages/vant-css/src/common/hairline.css

@@ -1,20 +1,14 @@
 @import "../mixins/border-retina.css";
 
-.van-hairline {
-  &,
-  &--top,
-  &--left,
-  &--right,
-  &--bottom,
-  &--top-bottom,
-  &--surround {
-    position: relative;
+[class*='van-hairline'] {
+  position: relative;
 
-    &::after {
-      @mixin hairline;
-    }
+  &::after {
+    @mixin hairline;
   }
+}
 
+.van-hairline {
   &--top::after {
     border-top-width: 1px;
   }