Skip to content

Commit

Permalink
chore(layout): split demo (#2731)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Dec 13, 2023
1 parent 011c729 commit e97a16f
Show file tree
Hide file tree
Showing 12 changed files with 435 additions and 979 deletions.
53 changes: 53 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/layout/basic.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<nut-row>
<nut-col :span="24">
<div class="content">span:24</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="12">
<div class="content">span:12</div>
</nut-col>
<nut-col :span="12">
<div class="content light">span:12</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="8">
<div class="content">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="content light">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="content">span:8</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
</template>
<style>
.content {
line-height: 40px;
color: #fff;
text-align: center;
border-radius: 6px;
background: #ff8881;
margin-bottom: 10px;
}
.light {
background: #ffc7c4;
}
</style>
81 changes: 81 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/layout/flex.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<nut-row type="flex" wrap="nowrap">
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="center">
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="end">
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="space-between">
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="space-around">
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="space-evenly">
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="content">span:6</div>
</nut-col>
</nut-row>
</template>
<style>
.content {
line-height: 40px;
color: #fff;
text-align: center;
border-radius: 6px;
background: #ff8881;
margin-bottom: 10px;
}
.light {
background: #ffc7c4;
}
</style>
26 changes: 26 additions & 0 deletions packages/nutui-taro-demo/src/layout/pages/layout/gap.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<nut-row :gutter="10">
<nut-col :span="8">
<div class="content">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="content light">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="content">span:8</div>
</nut-col>
</nut-row>
</template>
<style>
.content {
line-height: 40px;
color: #fff;
text-align: center;
border-radius: 6px;
background: #ff8881;
margin-bottom: 10px;
}
.light {
background: #ffc7c4;
}
</style>
165 changes: 26 additions & 139 deletions packages/nutui-taro-demo/src/layout/pages/layout/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,31 @@
<template>
<Demo class="full layout-demo">
<h2>基础布局</h2>
<div class="box-item">
<nut-row>
<nut-col :span="24">
<div class="flex-content">span:24</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="12">
<div class="flex-content">span:12</div>
</nut-col>
<nut-col :span="12">
<div class="flex-content flex-content-light">span:12</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="8">
<div class="flex-content">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="flex-content flex-content-light">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="flex-content">span:8</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
</nut-row>
</div>
<h2>分栏间隔</h2>
<div class="box-item">
<nut-row :gutter="10">
<nut-col :span="8">
<div class="flex-content">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="flex-content flex-content-light">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="flex-content">span:8</div>
</nut-col>
</nut-row>
</div>
<h2>Flex布局</h2>
<div class="box-item">
<nut-row type="flex" wrap="nowrap">
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="center">
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="end">
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="space-between">
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
</nut-row>
<nut-row type="flex" justify="space-around">
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
</nut-row>
</div>
<Demo class="demo full">
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('gap') }}</h2>
<Gap />

<h2>{{ t('flex') }}</h2>
<Flex />
</Demo>
</template>

<style lang="scss">
.box-item {
background: #fff;
margin-bottom: 20px;
padding: 20px 0;
}
.layout-demo .nut-row {
overflow: hidden;
&:not(:last-child) .nut-col {
margin-bottom: 15px;
}
}
.flex-content {
line-height: 40px;
color: #fff;
text-align: center;
border-radius: 6px;
background: #ff8881;
&.flex-content-light {
background: #ffc7c4;
}
&.flex-content-height {
height: 50px;
<script setup lang="ts">
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Gap from './gap.vue';
import Flex from './flex.vue';
const t = useTranslate({
'zh-CN': {
basic: '基础用法',
gap: '分栏间隔',
flex: 'Flex 布局'
},
'en-US': {
basic: 'Basic Usage',
gap: 'Column spacing',
flex: 'Flex layout'
}
}
</style>
});
</script>
Loading

0 comments on commit e97a16f

Please sign in to comment.