taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: publicize doc implemetation

Browse Source
This commit is contained in:
Justineo
2020-08-13 11:47:56 +08:00
parent 55b9b044f2
commit 1e5fcff6ad
372 changed files with 50636 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
one/docs/demo/grid/default.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<article>
<veui-grid-container>
<veui-grid-row>
<veui-grid-column :span="8">
<div class="content">
8/24
</div>
</veui-grid-column>
<veui-grid-column :span="16">
<div class="content">
16/24
</div>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="12">
<div class="content">
12/24
</div>
</veui-grid-column>
<veui-grid-column :span="12">
<div class="content">
12/24
</div>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn
}
}
</script>
<style lang="less" scoped>
.veui-grid-row {
& + & {
margin: 2px 0; /* Just for showcase */
}
}
</style>
<style lang="less" scoped docs>
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>

77
one/docs/demo/grid/fixed.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<article>
<veui-grid-container
:columns="12"
:gutter="10"
:margin="0"
>
<veui-grid-row>
<veui-grid-column :span="3">
<div class="content">
3/12
</div>
</veui-grid-column>
<veui-grid-column :span="9">
<div class="content">
9/12
</div>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="4">
<div class="content">
4/12
</div>
</veui-grid-column>
<veui-grid-column :span="4">
<div class="content">
4/12
</div>
</veui-grid-column>
<veui-grid-column :span="4">
<div class="content">
4/12
</div>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn
}
}
</script>
<style lang="less" scoped>
article {
width: 400px; /* Fixed-width container */
}
.veui-grid-row {
& + & {
margin: 2px 0; /* Just for showcase */
}
}
</style>
<style lang="less" scoped docs>
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>
<docs>
可以在 `GridContainer` 上使用 `columns`/`margin`/`gutter` 调整布局参数。
</docs>