docs(laylout): Optimize Layout's docs and demos (#806)
* docs(laylout): Optimize Layout's docs and demos * docs(laylout): Optimize Layout's docs and demos * fix(less): fix conflict
This commit is contained in:
申君健
GitHub
parent
577843e3fd
commit
fb0bce1570
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="12">
|
||||
<div class="col">span 12</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<div class="col">span 6</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content .tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content .tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content .tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-col :span="12">
|
||||
<div class="col">span 12</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6">
|
||||
<div class="col">span 6</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content .tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content .tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content .tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<div class="content">
|
||||
<div v-for="cols in [12, 24]" :key="cols">
|
||||
<div>每行 {{ cols }} 栅格布局示例：</div>
|
||||
<tiny-layout :cols="cols">
|
||||
<tiny-row>
|
||||
<tiny-col :span="12">
|
||||
<div class="col">span 12</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<br />
|
||||
<tiny-row>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<br />
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
|
|
@ -42,6 +41,28 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content .tiny-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.content .tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content .tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<div class="content">
|
||||
<div v-for="cols in [12, 24]" :key="cols">
|
||||
<div>每行 {{ cols }} 栅格布局示例：</div>
|
||||
<tiny-layout :cols="cols">
|
||||
<tiny-row>
|
||||
<tiny-col :span="12">
|
||||
<div class="col">span 12</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<br />
|
||||
<tiny-row>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">span 3</div>
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
<div class="col">span 3</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<br />
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">span 2</div>
|
||||
|
|
@ -42,7 +41,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -53,3 +52,25 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content .tiny-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.content .tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content .tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout class="tiny-layout-col-move">
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">move 0</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :move="1">
|
||||
<div class="col">move 1</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :move="4">
|
||||
<div class="col">向右移动4格</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :move="-6">
|
||||
<div class="col">向左移动6格</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout class="tiny-layout-col-move">
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">move 0</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :move="1">
|
||||
<div class="col">move 1</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :move="4">
|
||||
<div class="col">向右移动4格</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :move="-6">
|
||||
<div class="col">向左移动6格</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<tiny-row :flex="true" :gutter="20" :order="state.order">
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="1">
|
||||
<div class="col">1</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="2">
|
||||
<div class="col">2</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="4">
|
||||
<div class="col">4</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" justify="center">
|
||||
<tiny-button class="button" @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const state = ref({
|
||||
buttonLabel: '升序',
|
||||
order: 'asc'
|
||||
})
|
||||
|
||||
function toggleOrder() {
|
||||
if (state.value.buttonLabel === '升序') {
|
||||
state.value.buttonLabel = '降序'
|
||||
state.value.order = 'des'
|
||||
} else {
|
||||
state.value.buttonLabel = '升序'
|
||||
state.value.order = 'asc'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<tiny-row :flex="true" :gutter="20" :order="state.order">
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="1">
|
||||
<div class="col">1</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="2">
|
||||
<div class="col">2</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="4">
|
||||
<div class="col">4</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" justify="center">
|
||||
<tiny-button class="button" @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Layout, Row, Col, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
state: {
|
||||
buttonLabel: '升序',
|
||||
order: 'asc'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleOrder() {
|
||||
if (this.state.buttonLabel === '升序') {
|
||||
this.state.buttonLabel = '降序'
|
||||
this.state.order = 'des'
|
||||
} else {
|
||||
this.state.buttonLabel = '升序'
|
||||
this.state.order = 'asc'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<tiny-layout class="tiny-layout-tag">
|
||||
<tiny-row>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">div element</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6" tag="span">
|
||||
<div class="col">span element of tag</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">div element</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content">
|
||||
<tiny-layout class="tiny-layout-tag">
|
||||
<tiny-row>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">div element</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="6" tag="span">
|
||||
<div class="col">span element of tag</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">div element</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [],
|
||||
apis: [
|
||||
{
|
||||
'name': 'col',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
{
|
||||
'name': 'lg',
|
||||
'type': 'Number , Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '≥1200px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
|
||||
'en-US':
|
||||
'Number of responsive grids or grid attribute objects greater than or equal to 1200px, for example, {span: 4, offset: 4}.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'md',
|
||||
'type': 'Number , Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '≥992px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
|
||||
'en-US':
|
||||
'Number of responsive grids or grid attribute objects greater than or equal to 992px, for example, {span: 4, offset: 4}.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'no',
|
||||
'type': 'Number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': {
|
||||
'zh-CN': '排序编号（row中启用order生效），默认值为 0 。',
|
||||
'en-US': 'Sort ID (valid when order is enabled in a row). The default value is 0.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'offset',
|
||||
'type': 'Number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': {
|
||||
'zh-CN': '栅格左侧的间隔格数，默认为 0 。',
|
||||
'en-US': 'Number of grids on the left of the grid. The default value is 0.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'sm',
|
||||
'type': 'Number , Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '≥768px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
|
||||
'en-US':
|
||||
'Number of responsive grids or grid attribute objects greater than or equal to 768 pixels, for example, {span: 4, offset: 4}.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'span',
|
||||
'type': 'Number',
|
||||
'defaultValue': '该属性的默认值为 12',
|
||||
'desc': { 'zh-CN': '栅格占据的列数', 'en-US': 'Number of columns occupied by a grid' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为 div',
|
||||
'desc': {
|
||||
'zh-CN': '自定义元素标签，可选任意标签;该属性的可选值为 *',
|
||||
'en-US': 'User-defined element label. Any label can be selected. The optional value of this attribute is *'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'xl',
|
||||
'type': 'Number , Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '≥1920px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
|
||||
'en-US':
|
||||
'Number of responsive grids or grid attribute objects greater than or equal to 1920px, for example, {span: 4, offset: 4}.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'xs',
|
||||
'type': 'Number , Object',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '<768px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
|
||||
'en-US': '<768px responsive grids or grid attribute objects, for example, {span: 4, offset: 4}.'
|
||||
},
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'move',
|
||||
'type': 'Number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': {
|
||||
'zh-CN': '栅格左右移动格数（正数向右，负数向左）',
|
||||
'en-US':
|
||||
'Number of grids that move left and right (positive numbers to the right, negative numbers to the left)'
|
||||
},
|
||||
'demoId': 'base'
|
||||
}
|
||||
],
|
||||
'events': [],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
|
||||
'demoId': 'base'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<div class="title"></div>
|
||||
<tiny-row :gutter="20">
|
||||
<tiny-row v-for="gutter in [0, 10, 20]" :gutter="gutter">
|
||||
<tiny-col :span="4">
|
||||
<div class="col">gutter 20px</div>
|
||||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">gutter 20px</div>
|
||||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">gutter 20px</div>
|
||||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<div class="title"></div>
|
||||
<tiny-row :gutter="20">
|
||||
<tiny-row v-for="gutter in [0, 10, 20]" :gutter="gutter">
|
||||
<tiny-col :span="4">
|
||||
<div class="col">gutter 20px</div>
|
||||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">gutter 20px</div>
|
||||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">gutter 20px</div>
|
||||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-button @click="toggleOrder">
|
||||
{{ state.buttonLabel }}
|
||||
</tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" :order="state.order">
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3</div>
|
||||
|
|
@ -15,9 +20,6 @@
|
|||
<div class="col">4</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" justify="center">
|
||||
<tiny-button @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-button @click="toggleOrder">
|
||||
{{ state.buttonLabel }}
|
||||
</tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" :order="state.order">
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3</div>
|
||||
|
|
@ -15,11 +20,6 @@
|
|||
<div class="col">4</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" justify="center">
|
||||
<tiny-button @click="toggleOrder">
|
||||
{{ state.buttonLabel }}
|
||||
</tiny-button>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-align">
|
||||
<tiny-row :flex="true" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col lg">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col md">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col sm">默认</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" align="middle" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col lg">middle</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col md">middle</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col sm">middle</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" align="bottom" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col lg">bottom</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col md">bottom</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col sm">bottom</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.md {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.sm {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-align">
|
||||
<tiny-row :flex="true" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col lg">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col md">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col sm">默认</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" align="middle" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col lg">middle</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col md">middle</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col sm">middle</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" align="bottom" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col lg">bottom</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col md">bottom</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col sm">bottom</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.md {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.sm {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-gutter">
|
||||
<tiny-row class="margin-bottom10">
|
||||
<tiny-col :span="3" id="test">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="20" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">20</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">20</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">20</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="50" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">50</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">50</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">50</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，那么 col 左右内边距为 10px -->
|
||||
<tiny-row class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="margin-bottom10" :gutter="0">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，并且设置 row 属性 no-space，那么 col 左右内边距为 0 -->
|
||||
<tiny-row class="margin-bottom10" no-space>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter no space</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="margin-bottom10" :gutter="0" no-space>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter no space</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，那么 col 左右内边距为 10px -->
|
||||
<tiny-row class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="margin-bottom10" :gutter="0">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，并且设置 row 属性 no-space，那么 col 左右内边距为 0 -->
|
||||
<tiny-row class="margin-bottom10" no-space>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">no gutter no space</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row class="margin-bottom10" :gutter="0" no-space>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter no space</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">0 gutter no space</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-gutter">
|
||||
<tiny-row class="margin-bottom10">
|
||||
<tiny-col :span="3" id="test">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="20" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">20</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">20</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">20</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="50" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">50</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">50</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">50</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-justify">
|
||||
<tiny-row :flex="true" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="end" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">end</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">end</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">end</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="center" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">center</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">center</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">center</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="space-around" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-around</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-around</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-around</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="space-between" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-between</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-between</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-between</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-justify">
|
||||
<tiny-row :flex="true" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">默认</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="end" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">end</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">end</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">end</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="center" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">center</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">center</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">center</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="space-around" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-around</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-around</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-around</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" justify="space-between" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-between</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-between</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">space-between</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-order">
|
||||
<tiny-row :flex="true" order="asc" class="margin-bottom10">
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3 asc</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="1">
|
||||
<div class="col">1 asc</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="2">
|
||||
<div class="col">2 asc</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="4">
|
||||
<div class="col">4 asc</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" order="des" class="margin-bottom10">
|
||||
<tiny-col :span="3" :no="1">
|
||||
<div class="col">1 des</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="2">
|
||||
<div class="col">2 des</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="4">
|
||||
<div class="col">4 des</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3 des</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout class="tiny-layout-order">
|
||||
<tiny-row :flex="true" order="asc" class="margin-bottom10">
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3 asc</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="1">
|
||||
<div class="col">1 asc</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="2">
|
||||
<div class="col">2 asc</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="4">
|
||||
<div class="col">4 asc</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" order="des" class="margin-bottom10">
|
||||
<tiny-col :span="3" :no="1">
|
||||
<div class="col">1 des</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="2">
|
||||
<div class="col">2 des</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="4">
|
||||
<div class="col">4 des</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3" :no="3">
|
||||
<div class="col">3 des</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [],
|
||||
apis: [
|
||||
{
|
||||
'name': 'row',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
{
|
||||
'name': 'align',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为 top',
|
||||
'desc': {
|
||||
'zh-CN': 'flex 布局下的垂直排列方式;该属性的可选值为 top / middle / bottom',
|
||||
'en-US':
|
||||
'vertical arrangement mode in the flex layout; The value of this attribute can be top / middle / bottom'
|
||||
},
|
||||
'demoId': 'align'
|
||||
},
|
||||
{
|
||||
'name': 'flex',
|
||||
'type': 'Boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '启用 flex 布局模式，现代浏览器下有效',
|
||||
'en-US': 'Enable the flex layout mode. This parameter is valid in modern browsers.'
|
||||
},
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'gutter',
|
||||
'type': 'Number',
|
||||
'defaultValue': '该属性的默认值为 0',
|
||||
'desc': { 'zh-CN': '栅格间隔', 'en-US': 'Grid Interval' },
|
||||
'demoId': 'align'
|
||||
},
|
||||
{
|
||||
'name': 'justify',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为 start',
|
||||
'desc': {
|
||||
'zh-CN': 'flex 布局下的水平排列方式;该属性的可选值为 start / end / center / space-around / space-between',
|
||||
'en-US':
|
||||
'horizontal arrangement mode in flex layout; The optional value of this attribute is start / end / center / space-around / space-between'
|
||||
},
|
||||
'demoId': 'align'
|
||||
},
|
||||
{
|
||||
'name': 'order',
|
||||
'type': 'String',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': 'flex 布局下排序方式;该属性的可选值为 asc / des',
|
||||
'en-US': 'Flex layout sorting mode; The optional value of this attribute is asc / des'
|
||||
},
|
||||
'demoId': 'align'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'String',
|
||||
'defaultValue': '该属性的默认值为 div',
|
||||
'desc': {
|
||||
'zh-CN': '自定义元素标签，可选任意标签;该属性的可选值为 *',
|
||||
'en-US': 'User-defined element label. Any label can be selected. The optional value of this attribute is *'
|
||||
},
|
||||
'demoId': 'align'
|
||||
}
|
||||
],
|
||||
'events': [],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
|
||||
'demoId': 'base'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -4,4 +4,4 @@ title: Layout 布局
|
|||
|
||||
# Layout 布局
|
||||
|
||||
<div>采用12栅格布局，可使页面布局变得非常简单与清晰。</div>
|
||||
<div>支持 12/24 栅格布局，可使页面布局变得非常简单与清晰。</div>
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Layout
|
|||
|
||||
# Layout
|
||||
|
||||
<div>The grid layout makes the layout simple and clear.</div>
|
||||
<div>The 12/24 grid layout makes the layout simple and clear.</div>
|
||||
|
|
|
|||
|
|
@ -3,124 +3,106 @@ export default {
|
|||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
'demoId': 'base',
|
||||
'name': { 'zh-CN': '栅格布局', 'en-US': 'Grid Layout' },
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic usage' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过使用 <code>Row</code> , <code>Col</code> 组件的 <code>span</code> 属性实现栅格系统布局。\n 该系统默认为12栅格，<code>Col</code> 组件的 <code>span</code>之和大于12时，布局会自动换行显示。</p>\n',
|
||||
'en-US':
|
||||
'<p>The grid system layout is implemented by using the <code>span</code> attribute of the <code>Row</code>, <code>Col</code> component. </p>\n'
|
||||
'zh-CN': `<p>
|
||||
通过在<code>Layout </code> 组件嵌套使用 <code>Row</code> , <code>Col</code> 组件, 来实现对一个区域进行 12/24 栅格布局。<br>
|
||||
通过<code>Layout </code> 组件的<code> cols </code> 属性来指定布局的总栅格栏数，组件库默认为12栅格栏；<br>
|
||||
通过 <code>Col</code> 组件的 <code>span</code> 属性指定每栏所占栅格数。当一行的栅格数之和大于总栅格栏数时，布局会自动换行显示。<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
A 12/24 grid Layout of an area is implemented by nesting <code>Row</code>, <code>Col</code> components within <code>Layout </code> components. <br>
|
||||
Use the <code> cols </code> property of the <code>Layout </code> component to specify the total number of grid columns for the layout. The component library defaults to 12 grid columns. <br>
|
||||
The <code>span</code> property of the <code>Col</code> component specifies the number of grids per column. When the sum of the number of grids in a row is greater than the total number of grid columns, the layout is automatically wrapped. <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['base.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'alignment',
|
||||
'name': { 'zh-CN': '对齐方式', 'en-US': 'Alignment' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过设置<code>Row</code> 的 <code>flex</code> 属性为 <code>true</code> 来启用 flex 布局，并通过 <code>justify</code> 与 <code>align</code> 属性调整子元素的对齐方式。</p>\n<div class="tip custom-block"><p class="custom-block-title">提示</p>\n<p>flex 布局存在 IE 兼容性问题，只能在 IE 10 以上运行。</p>\n</div>\n',
|
||||
'en-US':
|
||||
'<p>Enable the flex layout by setting the <code>flex</code> property to <code>true</code>. The <code>justify</code> and <code>align</code> attributes are used to adjust the alignment of the child elements. </p>\n<div class="tip custom-block"><p class="custom-block-title"> Prompt</p>\n<p>The flex layout has Internet Explorer compatibility issues and can only run on Internet Explorer 10 or later. </p>\n</div>\n'
|
||||
},
|
||||
'codeFiles': ['alignment.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'order',
|
||||
'name': { 'zh-CN': '排序', 'en-US': 'Sort' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>在启用 <code>flex</code> 布局时，可通过设置 <code>Row</code> 组件的 <code>order</code> 属性，给带 <code>no</code> 属性的 <code>col</code>排序。</p>\n<div class="tip custom-block"><p class="custom-block-title">提示</p>\n<p>flex 布局存在 IE 兼容性问题，只能在 IE 10 以上运行。</p>\n</div>\n',
|
||||
'en-US':
|
||||
'<p>When enabling the <code>flex</code> layout, you can set the <code>order</code> attribute of the <code>Row</code> component. Sorts the <code>col</code> with the <code>no</code> attribute. </p>\n<div class="tip custom-block"><p class="custom-block-title"> Prompt</p>\n<p>The flex layout has Internet Explorer compatibility issues and can only run on Internet Explorer 10 or later. </p>\n</div>\n'
|
||||
},
|
||||
'codeFiles': ['order.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'offset',
|
||||
'name': { 'zh-CN': '偏移', 'en-US': 'Offset' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>offset</code> 属性来指定分栏偏移的栏数。</p>\n',
|
||||
'en-US':
|
||||
'<p>Specifies the number of columns offset by setting the <code>offset</code> property of the <code>Col</code> component. </p>\n'
|
||||
},
|
||||
'codeFiles': ['offset.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'align',
|
||||
'name': { 'zh-CN': '垂直排列方式', 'en-US': 'vertical arrangement' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>align</code> 属性实现\tflex 布局下的垂直排列方式。</p>\n',
|
||||
'en-US':
|
||||
'<p>Use the <code>align</code> attribute of the <code>Row</code> component to implement the vertical arrangement in \tflex layout. </p>\n'
|
||||
},
|
||||
'codeFiles': ['row/align.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'gutter',
|
||||
'name': { 'zh-CN': '栅格间隔', 'en-US': 'Grid Interval' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。</p>\n',
|
||||
'en-US':
|
||||
'<p>The grid spacing is implemented by using the <code>gutter</code> attribute of the <code>Row</code> component. </p>\n'
|
||||
},
|
||||
'codeFiles': ['gutter.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'justify',
|
||||
'name': { 'zh-CN': '水平排列方式', 'en-US': 'horizontal arrangement' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>justify</code> 属性实现 flex 布局下的水平排列方式。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>justify</code> attribute of the <code>Row</code> component is used to implement horizontal arrangement in the flex layout. </p>\n'
|
||||
},
|
||||
'codeFiles': ['row/justify.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'order1',
|
||||
'name': { 'zh-CN': '排序方式', 'en-US': 'Sort by' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>order</code> 属性实现 flex 布局下排序方式。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>order</code> attribute of the <code>Row</code> component is used to implement the sorting mode in the flex layout. </p>\n'
|
||||
},
|
||||
'codeFiles': ['row/order.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tag1',
|
||||
'name': { 'zh-CN': '自定义元素标签', 'en-US': 'Custom Element Label' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>tag</code> 属性实现自定义元素标签，可选任意标签。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>tag</code> attribute of the <code>Row</code> component is used to customize element tags. Any tag is optional. </p>\n'
|
||||
},
|
||||
'codeFiles': ['row/tag1.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'col-move',
|
||||
'name': { 'zh-CN': '移动', 'en-US': 'Move' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>move</code> 属性来指定分栏偏移的栏数。</p>\n',
|
||||
'en-US':
|
||||
'<p>Specifies the number of columns offset by setting the <code>move</code> property of the <code>Col</code> component. </p>\n'
|
||||
},
|
||||
'codeFiles': ['col/col-move.vue']
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'responsive-layout',
|
||||
'name': { 'zh-CN': '响应式布局', 'en-US': 'Responsive Layout' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：<code>xs</code>、<code>sm</code>、<code>md</code>、<code>lg</code> 和 <code>xl</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p>Referring to the responsive design of Bootstrap, five response sizes are preset: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. </p>\n'
|
||||
'zh-CN': `<p>
|
||||
在<code>Col</code> 组件预设了五个响应尺寸：<code>xs</code>、<code>sm</code>、<code>md</code>、<code>lg</code> 和 <code>xl</code>，
|
||||
来指定在每一个媒介查询尺寸时，该列应该占用的栅格数。组件库默认媒介查询的断点位置为<code>768 / 992 / 1200 / 1920</code><br>
|
||||
请改变浏览器窗口的大小，观察下面示例中，各列所占栅格的变化。
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
The <code>Col</code> component presets five response sizes: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.
|
||||
To specify the number of rasters that the column should occupy at each medium query size. The default media query is <code> 768/992/1200/1920 </code><br>
|
||||
In the following example, resize the browser window to see how the columns are placed on the grid.
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['responsive-layout.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'order',
|
||||
'name': { 'zh-CN': 'Col 排序', 'en-US': 'Sort' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
在启用<code>Row</code> 组件的 <code>flex</code> 布局时，可通过设置它的 <code>order</code> 属性值为: <code>asc 或 desc</code>，给<code>Col</code> 组件排序。<br>
|
||||
待排序的列需指定 <code>no</code> 属性为数字值，属性的默认值为0。
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
When you enable the <code>flex</code> layout of the <code>Row</code> component, you can do this by setting its <code>order</code> property to: <code>asc or desc</code>, which sorts <code>Col</code> components. <br>
|
||||
The column to be sorted requires the <code>no</code> attribute to be numeric, which defaults to 0.
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['order.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'alignment',
|
||||
'name': { 'zh-CN': '对齐方式', 'en-US': 'Alignment' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
通过<code>Row</code> 组件的 <code>flex</code> 属性设置为 <code>true</code> 来启用 flex 布局，
|
||||
并通过 <code>justify</code> 来指定主轴方向的对齐方式，通过 <code>align</code> 属性指定副轴的对齐方式。<br>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
Enable the flex layout by setting the <code>Row</code> component's <code>flex</code> property to <code>true</code>.
|
||||
Use <code>justify</code> to specify the main axis alignment and the <code>align</code> attribute to specify the secondary axis alignment. <br>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['alignment.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'offset',
|
||||
'name': { 'zh-CN': '偏移', 'en-US': 'Offset' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>offset</code> 属性来指定当前列偏移的栏数。</p>',
|
||||
'en-US':
|
||||
'<p>You specify the number of columns to offset by by setting the <code>offset</code> property of the <code>Col</code> component.Specifies the number of columns offset by setting the <code>offset</code> property of the <code>Col</code> component. </p>'
|
||||
},
|
||||
'codeFiles': ['offset.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'gutter',
|
||||
'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
|
||||
不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
This is done by using the <code>gutter</code> property of the <code>Row</code> component.
|
||||
Without setting the <code>gutter</code>, the component will default to <code>Col</code> and set the padding value to 10px </code> around the <code>.
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['gutter.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'tag',
|
||||
'name': { 'zh-CN': '自定义元素标签', 'en-US': 'Custom Element Label' },
|
||||
'desc': { 'zh-CN': '<p>可选任意标签。</p>\n', 'en-US': '<p>The value can be any tag. </p>\n' },
|
||||
'codeFiles': ['col/tag.vue']
|
||||
'desc': {
|
||||
'zh-CN': `<p>
|
||||
通过使用 <code>Layout / Row / Col </code> 组件的 <code>tag</code> 属性实现自定义元素标签，可选任意标签。默认使用 <code>div</code>
|
||||
</p>`,
|
||||
'en-US': `<p>
|
||||
Custom element tags can be created by using the <code>tag</code> attribute of the <code>Layout/Row/Col </code> component. Default <code>div</code>
|
||||
</p>`
|
||||
},
|
||||
'codeFiles': ['tag.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
@ -132,42 +114,49 @@ export default {
|
|||
'slots': [],
|
||||
'layout-attrs': [
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 div',
|
||||
'desc': { 'zh-CN': '标签', 'en-US': '' },
|
||||
'demoId': 'tag1'
|
||||
'name': 'cols',
|
||||
'type': 'number',
|
||||
'defaultValue': '12',
|
||||
'desc': {
|
||||
'zh-CN': '总栅格数;该属性的可选值为 12 /24 ',
|
||||
'en-US': 'Total number of grids; The optional value for this attribute is 12/24'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
'name': 'tag',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 medium',
|
||||
'desc': { 'zh-CN': '大小;该属性的可选值为 medium / small / mini', 'en-US': '' },
|
||||
'demoId': ''
|
||||
}
|
||||
],
|
||||
'layout-slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
'defaultValue': 'div',
|
||||
'desc': {
|
||||
'zh-CN': '定义 Layout 元素的渲染后的标签，默认为div',
|
||||
'en-US': 'Defines the rendered tag of a Layout element, which defaults to div'
|
||||
},
|
||||
'demoId': 'tag'
|
||||
}
|
||||
],
|
||||
'row-attrs': [
|
||||
{
|
||||
'name': 'align',
|
||||
'type': 'string',
|
||||
'defaultValue': 'top',
|
||||
'desc': {
|
||||
'zh-CN': "子项的副轴对齐方向，可取值：'top', 'middle', 'bottom'",
|
||||
'en-US': `Alignment of minor axes for child items; values: 'top', 'middle', 'bottom'`
|
||||
},
|
||||
'demoId': 'alignment'
|
||||
},
|
||||
{
|
||||
'name': 'flex',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '是否为flex容器', 'en-US': '' },
|
||||
'desc': { 'zh-CN': '是否为flex容器', 'en-US': 'Whether it is a flex container' },
|
||||
'demoId': 'alignment'
|
||||
},
|
||||
{
|
||||
'name': 'gutter',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': '' },
|
||||
'defaultValue': '20',
|
||||
'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': 'The spacing of the child items in pixels' },
|
||||
'demoId': 'gutter'
|
||||
},
|
||||
{
|
||||
|
|
@ -176,81 +165,87 @@ export default {
|
|||
'defaultValue': 'start',
|
||||
'desc': {
|
||||
'zh-CN': "子项的主轴对齐方向，可取值：'start', 'center', 'end', 'space-between', 'space-around'",
|
||||
'en-US': ''
|
||||
'en-US': `Main axis alignment direction for child items; values: 'start', 'center', 'end', 'space-between', 'space-around'`
|
||||
},
|
||||
'demoId': 'alignment'
|
||||
},
|
||||
{
|
||||
'name': 'align',
|
||||
'type': 'string',
|
||||
'defaultValue': 'top',
|
||||
'desc': { 'zh-CN': "子项的副轴对齐方向，可取值：'top', 'middle', 'bottom'", 'en-US': '' },
|
||||
'demoId': 'alignment'
|
||||
},
|
||||
{
|
||||
'name': 'order',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': "子项的排序方式，可取值：'asc', 'des'。 不设置时，保留子项在模板中的顺序。", 'en-US': '' },
|
||||
'demoId': 'order1'
|
||||
'desc': {
|
||||
'zh-CN': "子项的排序方式，可取值：'asc', 'des'。 不设置时，保留子项在模板中的顺序。",
|
||||
'en-US': `Ordering of the child items; values: 'asc', 'des'. When not set, the order of the child items in the template is preserved.`
|
||||
},
|
||||
'demoId': 'order'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'string',
|
||||
'defaultValue': 'div',
|
||||
'desc': { 'zh-CN': '定义 Row 元素的渲染后的标签，默认为div', 'en-US': '' },
|
||||
'demoId': 'tag1'
|
||||
},
|
||||
{
|
||||
'name': 'noSpace',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '子项没有间隔，相当于gutter=0的时候', 'en-US': '' },
|
||||
'demoId': ''
|
||||
'desc': {
|
||||
'zh-CN': '定义 Row 元素的渲染后的标签，默认为div',
|
||||
'en-US': 'Defines the rendered tag of a Row element, which defaults to div'
|
||||
},
|
||||
'demoId': 'tag'
|
||||
}
|
||||
],
|
||||
'col-attrs': [
|
||||
{
|
||||
'name': 'span',
|
||||
'type': 'number',
|
||||
'defaultValue': '12',
|
||||
'desc': { 'zh-CN': '子项占据的列数', 'en-US': '' },
|
||||
'demoId': 'base'
|
||||
},
|
||||
{
|
||||
'name': 'offset',
|
||||
'name': 'move',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '子项的左偏移量', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '子项的右偏移量,是通过 left 属性实现偏移,建议使用 offset 代替',
|
||||
'en-US':
|
||||
'The right offset of the child item is offset via the left property; it is recommended to use offset instead'
|
||||
},
|
||||
'demoId': 'offset'
|
||||
},
|
||||
{
|
||||
'name': 'no',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '子项排序编号', 'en-US': '' },
|
||||
'demoId': 'order1'
|
||||
'desc': { 'zh-CN': '子项排序编号', 'en-US': 'Subitems are sorted by number' },
|
||||
'demoId': 'order'
|
||||
},
|
||||
{
|
||||
'name': 'move',
|
||||
'name': 'offset',
|
||||
'type': 'number',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '子项的右偏移量', 'en-US': '' },
|
||||
'demoId': 'col-move'
|
||||
'desc': {
|
||||
'zh-CN': '子项的向右偏移量,是通过 margin-left 属性实现偏移',
|
||||
'en-US': 'The offset to the right of the child item is achieved using the margin-left property'
|
||||
},
|
||||
'demoId': 'offset'
|
||||
},
|
||||
{
|
||||
'name': 'xs/sm/md/lg/xl',
|
||||
'type': 'number, object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '响应式栅格数或者栅格属性对象', 'en-US': '' },
|
||||
'demoId': 'responsive-layout'
|
||||
'name': 'span',
|
||||
'type': 'number',
|
||||
'defaultValue': '12',
|
||||
'desc': { 'zh-CN': '子项占据的列数', 'en-US': 'Number of columns occupied by the child' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'string',
|
||||
'defaultValue': 'div',
|
||||
'desc': { 'zh-CN': '子项渲染后的标签', 'en-US': '' },
|
||||
'demoId': ''
|
||||
'desc': {
|
||||
'zh-CN': '定义 Col 元素的渲染后的标签，默认为div',
|
||||
'en-US': 'Defines the rendered tag of a Col element, which defaults to div'
|
||||
},
|
||||
'demoId': 'tag'
|
||||
},
|
||||
{
|
||||
'name': 'xs/sm/md/lg/xl',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '指定列占用响应式栅格数，响应式断点的位置为：768 / 992 / 1200 / 1920',
|
||||
'en-US':
|
||||
'Specifies the number of reactive grids occupied by the column and the location of the reactive breakpoint: 768/992/1200/1920'
|
||||
},
|
||||
'demoId': 'responsive-layout'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
"dev2.7:saas": "pnpm create:icon-saas && pnpm build:entry && pnpm -C examples/vue2.7 dev:saas",
|
||||
"dev:react": "pnpm create:mapping-react && pnpm build:entry-react && pnpm -C examples/react-docs run dev",
|
||||
"// ---------- 启动官网文档 ----------": "",
|
||||
"site": "pnpm build:entry && gulp themeConcat -w & pnpm -C examples/sites start",
|
||||
"site": "pnpm build:entry && pnpm -C examples/sites start",
|
||||
"site:open": "pnpm build:entry && gulp themeConcat -w & pnpm -C examples/sites start:open",
|
||||
"// ---------- 启动移动端组件官网文档 ----------": "",
|
||||
"site:mobile": "pnpm build:entry && gulp themeConcat -w & pnpm -C examples/sites start:mobile",
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ export const setGlobalAttrValue = ({ attr, className, value }) => {
|
|||
}
|
||||
|
||||
export const getClassName =
|
||||
({ api, props }) =>
|
||||
({ api, props, state }) =>
|
||||
() => {
|
||||
const multiple = 2
|
||||
const multiple = 24 / state.layout.cols
|
||||
const span = props.span * multiple
|
||||
const offset = props.offset
|
||||
const push = props.move ? props.move : 0
|
||||
|
|
@ -120,15 +120,10 @@ export const getStyle =
|
|||
const no = props.no
|
||||
const styles = []
|
||||
let gutter = parent ? parent.gutter : null
|
||||
let noSpace = parent ? parent.noSpace : null
|
||||
let order = ''
|
||||
|
||||
if (gutter) {
|
||||
gutter = gutter / 2
|
||||
styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
|
||||
} else if (noSpace) {
|
||||
styles.push('padding-left:0;padding-right:0;')
|
||||
}
|
||||
gutter = gutter / 2
|
||||
styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
|
||||
|
||||
if (parent && parent.flex && parent.order) {
|
||||
/* istanbul ignore next */
|
||||
|
|
|
|||
|
|
@ -14,12 +14,13 @@ import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row }
|
|||
|
||||
export const api = ['state']
|
||||
|
||||
export const renderless = (props, { computed, reactive }, { parent }) => {
|
||||
export const renderless = (props, { computed, reactive, inject }, { parent }) => {
|
||||
const api = {}
|
||||
const state = reactive({
|
||||
row: computed(() => api.row()),
|
||||
style: computed(() => api.getStyle()),
|
||||
className: computed(() => api.getClassName())
|
||||
className: computed(() => api.getClassName()),
|
||||
layout: inject('layout')
|
||||
})
|
||||
|
||||
Object.assign(api, {
|
||||
|
|
@ -28,7 +29,7 @@ export const renderless = (props, { computed, reactive }, { parent }) => {
|
|||
setGlobalAttrValue,
|
||||
setSubitemAttrValue,
|
||||
getStyle: getStyle({ props, state }),
|
||||
getClassName: getClassName({ api, props })
|
||||
getClassName: getClassName({ api, props, state })
|
||||
})
|
||||
|
||||
return api
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@ export default defineComponent({
|
|||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium',
|
||||
validator: (value: string) => Boolean(~['medium', 'small', 'mini'].indexOf(value))
|
||||
cols: {
|
||||
type: Number,
|
||||
default: 12,
|
||||
validator: (value: string) => Boolean(~[12, 24].indexOf(value))
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default defineComponent({
|
|||
flex: Boolean,
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: 20,
|
||||
validator(value: number) {
|
||||
return value >= 0
|
||||
}
|
||||
|
|
@ -42,10 +42,6 @@ export default defineComponent({
|
|||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
noSpace: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { renderless, api } from '@opentiny/vue-renderless/row/vue'
|
|||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
|
||||
export default defineComponent({
|
||||
props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag', 'noSpace'],
|
||||
props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue