alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] rename packages dir to src (#3659)

Browse Source
This commit is contained in:
neverland
2019-06-27 11:25:57 +08:00
committed by GitHub
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/col/demo/index.vue
+131
View File
@@ -0,0 +1,131 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col
span="10"
offset="4"
>
offset: 4, span: 10
</van-col>
</van-row>
<van-row>
<van-col
offset="12"
span="12"
>
offset: 12, span: 12
</van-col>
</van-row>
</demo-block>
<demo-block :title="$t('title2')">
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
</demo-block>
<demo-block
v-if="!$attrs.weapp"
:title="$t('title3')"
>
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row
type="flex"
justify="center"
>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row
type="flex"
justify="end"
>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row
type="flex"
justify="space-between"
>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row
type="flex"
justify="space-around"
>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
title2: '在列元素之间增加间距',
title3: 'Flex 布局'
},
'en-US': {
title2: 'Column Spacing',
title3: 'Flex Layout'
}
}
};
</script>
<style lang="less">
@import '../../style/var';
.demo-col {
.van-doc-demo-block {
padding: 0 15px;
}
.van-doc-demo-block__title {
padding-left: 0;
}
.van-col {
margin-bottom: 10px;
color: @white;
font-size: 13px;
line-height: 30px;
text-align: center;
background-clip: content-box;
&:nth-child(odd) {
background-color: #39a9ed;
}
&:nth-child(even) {
background-color: #66c6f2;
}
}
}
</style>
src/col/en-US.md
+107
View File
@@ -0,0 +1,107 @@
# Layout
### Intro
Quickly and easily create layouts with `van-row` and `van-col`
### Install
``` javascript
import { Row, Col } from 'vant';
Vue.use(Row).use(Col);
```
## Usage
### Basic Usage
Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
```html
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
```
### Column Spacing
Set grid spacing using `gutter` attribute. The default value is 0
```html
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
```
### Flex Layout
Setting `type` to `flex` to enable flex layout
```html
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row type="flex" justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
```
## API
### Row Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| type | Layout type, can be set to `flex` | `String` | - |
| gutter | Grid spacing（px） | `String | Number` | - |
| tag | Custom element tag | `String` | `div` |
| justify | Flex main axis，can be set to end/center/space-around/space-between | `String` | `start` |
| align | Flex cross axis, be set to center/bottom | `String` | `top` |
### Col Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| span | Number of column the grid spans | `String | Number` | - |
| offset | Number of spacing on the left side of the grid | `String | Number` | - |
| tag | Custom element tag | `String` | `div` |
src/col/index.js
+34
View File
@@ -0,0 +1,34 @@
import { createNamespace } from '../utils';
const [createComponent, bem] = createNamespace('col');
export default createComponent({
props: {
span: [Number, String],
offset: [Number, String],
tag: {
type: String,
default: 'div'
}
},
computed: {
gutter() {
return (this.$parent && Number(this.$parent.gutter)) || 0;
},
style() {
const padding = `${this.gutter / 2}px`;
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
}
},
render(h) {
const { span, offset } = this;
return (
<this.tag class={bem({ [span]: span, [`offset-${offset}`]: offset })} style={this.style}>
{this.slots()}
</this.tag>
);
}
});
src/col/index.less
+14
View File
@@ -0,0 +1,14 @@
@import '../style/var';
.van-col {
float: left;
box-sizing: border-box;
min-height: 1px;
}
.generate-col(24);
.generate-col(@n, @i: 1) when (@i =< @n) {
.van-col--@{i} { width: @i * 100% / 24; }
.van-col--offset-@{i} { margin-left: @i * 100% / 24; }
.generate-col(@n, (@i + 1));
}
src/col/test/__snapshots__/demo.spec.js.snap
+58
View File
@@ -0,0 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-row">
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
<div class="van-col van-col--8">span: 8</div>
</div>
<div class="van-row">
<div class="van-col van-col--4">span: 4</div>
<div class="van-col van-col--10 van-col--offset-4">
offset: 4, span: 10
</div>
</div>
<div class="van-row">
<div class="van-col van-col--12 van-col--offset-12">
offset: 12, span: 12
</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
</div>
</div>
<div>
<div class="van-row van-row--flex">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-center">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-end">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-between">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
<div class="van-row van-row--flex van-row--justify-space-around">
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
<div class="van-col van-col--6">span: 6</div>
</div>
</div>
</div>
`;
src/col/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);
src/col/zh-CN.md
+111
View File
@@ -0,0 +1,111 @@
# Layout 布局
### 介绍
Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
### 引入
``` javascript
import { Row, Col } from 'vant';
Vue.use(Row).use(Col);
```
## 代码演示
### 基本用法
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
```html
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
```
### 设置列元素间距
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
```html
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
```
### Flex 布局
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
```html
<!-- 左对齐 -->
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 居中 -->
<van-row type="flex" justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 右对齐 -->
<van-row type="flex" justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 两端对齐 -->
<van-row type="flex" justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<!-- 每个元素的两侧间隔相等 -->
<van-row type="flex" justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
```
## API
### Row Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| type | 布局方式，可选值为`flex` | `String` | - | 1.1.9 |
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
| tag | 自定义元素标签 | `String` | `div` | - |
| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | `String` | `start` | 1.1.9 |
| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | `String` | `top` | 1.1.9 |
### Col Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| span | 列元素宽度 | `String | Number` | - | - |
| offset | 列元素偏移距离 | `String | Number` | - | - |
| tag | 自定义元素标签 | `String` | `div` | - |