feat(layout): 完善flex布局示例

jd-opensource · Jul 24, 2018 · 28de062 · 28de062
1 parent 3c44f30
commit 28de062
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 17 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -1,3 +1,5 @@
+@import "./style/theme/default.scss";
+
 #app {
   background-color: #f8f8f8;
 }
@@ -14,27 +16,37 @@
   &__header {
     margin-bottom: 20px;
     padding-bottom: 10px;
-    border-bottom: 1px solid rgba($color: #e5e5e5, $alpha: 1);
+    border-bottom: 1px solid $color-grey-4;
 
     &-title {
-      color: #999;
+      color: $color-grey-2;
       font-size: 28px;
     }
+
+    &-note {
+      font-size: 24px;
+      margin-left: 20px;
+      color: $color-grey-3;
+    }
   }
 }
 
 // Flex 展示样式
 .flex__page {
-  .at-flex__item {
-    color: white;
-    text-align: center;
+  .at-flex {
+    margin-bottom: 40px;
 
-    &:nth-child(odd) {
-      background-color: #6190e8;
-    }
+    &__item {
+      color: white;
+      text-align: center;
+
+      &:nth-child(odd) {
+        background-color: #6190e8;
+      }
 
-    &:nth-child(even) {
-      background-color: #78a4f4;
+      &:nth-child(even) {
+        background-color: #78a4f4;
+      }
     }
   }
 }
diff --git a/src/components/flex/index.js b/src/components/flex/index.js
@@ -7,8 +7,6 @@ import AtFlexItem from './item/index'
 
 import './index.scss'
 
-// const Props = ['direction','wrap','justify',]
-
 export default class AtFlex extends Taro.Component {
   static Item = AtFlexItem
 

diff --git a/src/components/flex/item/index.scss b/src/components/flex/item/index.scss
@@ -4,8 +4,9 @@
 .at-flex__item {
   @include flex(1);
 
-  display: block;
   width: 100%;
+  display: block;
+  word-break: keep-all;
 
   @for $col from 1 through 12 {
     $width: ($col / 12) * 100%;

diff --git a/src/pages/layout/flex/index.js b/src/pages/layout/flex/index.js
@@ -51,20 +51,105 @@ export default class FlexPage extends Taro.Component {
           <View className='example__body'>
             <AtFlex>
               <AtFlex.Item offset='2'>A</AtFlex.Item>
-              <AtFlex.Item>B</AtFlex.Item>
+              <AtFlex.Item offset='3'>B</AtFlex.Item>
               <AtFlex.Item>C</AtFlex.Item>
             </AtFlex>
           </View>
         </View>
         <View className='example'>
           <View className='example__header'>
-            <Text className='example__header-title'>基本案例</Text>
+            <Text className='example__header-title'>超出换行</Text>
+            <Text className='example__header-note'>默认超出不换行</Text>
+          </View>
+          <View className='example__body'>
+            <AtFlex wrap='wrap'>
+              <AtFlex.Item size='4'>A</AtFlex.Item>
+              <AtFlex.Item size='4'>B</AtFlex.Item>
+              <AtFlex.Item size='4'>C</AtFlex.Item>
+              <AtFlex.Item size='4'>D</AtFlex.Item>
+              <AtFlex.Item size='4'>E</AtFlex.Item>
+            </AtFlex>
+          </View>
+        </View>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>宽度根据内容撑开</Text>
           </View>
           <View className='example__body'>
             <AtFlex>
-              <AtFlex.Item>A</AtFlex.Item>
+              <AtFlex.Item isAuto size='1'>
+                被内容撑开
+              </AtFlex.Item>
               <AtFlex.Item>B</AtFlex.Item>
-              <AtFlex.Item>C</AtFlex.Item>
+            </AtFlex>
+            <AtFlex>
+              <AtFlex.Item size='1'>没有被内容撑开</AtFlex.Item>
+              <AtFlex.Item>B</AtFlex.Item>
+            </AtFlex>
+          </View>
+        </View>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>内容自动换行</Text>
+          </View>
+          <View className='example__body'>
+            <AtFlex>
+              <AtFlex.Item isWrap size='1'>
+                内容自动换行
+              </AtFlex.Item>
+              <AtFlex.Item>B</AtFlex.Item>
+            </AtFlex>
+            <AtFlex>
+              <AtFlex.Item size='1'>内容没有自动换行</AtFlex.Item>
+              <AtFlex.Item>B</AtFlex.Item>
+            </AtFlex>
+          </View>
+        </View>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>Flex Item 对齐方式</Text>
+          </View>
+          <View className='example__body'>
+            <AtFlex>
+              <AtFlex.Item>撑开高度 撑开高度 撑开高度 撑开高度</AtFlex.Item>
+              <AtFlex.Item align='center'>B</AtFlex.Item>
+            </AtFlex>
+          </View>
+        </View>
+        <View className='example'>
+          <View className='example__header'>
+            <Text className='example__header-title'>Flex对齐方式</Text>
+          </View>
+          <View className='example__body'>
+            <AtFlex justify='start'>
+              <AtFlex.Item size='4'>
+                撑开高度 撑开高度 撑开高度 撑开高度
+              </AtFlex.Item>
+              <AtFlex.Item size='3'>B</AtFlex.Item>
+            </AtFlex>
+            <AtFlex justify='center'>
+              <AtFlex.Item size='4'>
+                撑开高度 撑开高度 撑开高度 撑开高度
+              </AtFlex.Item>
+              <AtFlex.Item size='3'>B</AtFlex.Item>
+            </AtFlex>
+            <AtFlex justify='end'>
+              <AtFlex.Item size='4'>
+                撑开高度 撑开高度 撑开高度 撑开高度
+              </AtFlex.Item>
+              <AtFlex.Item size='3'>B</AtFlex.Item>
+            </AtFlex>
+            <AtFlex justify='between'>
+              <AtFlex.Item size='4'>
+                撑开高度 撑开高度 撑开高度 撑开高度
+              </AtFlex.Item>
+              <AtFlex.Item size='3'>B</AtFlex.Item>
+            </AtFlex>
+            <AtFlex justify='around'>
+              <AtFlex.Item size='4'>
+                撑开高度 撑开高度 撑开高度 撑开高度
+              </AtFlex.Item>
+              <AtFlex.Item size='3'>B</AtFlex.Item>
             </AtFlex>
           </View>
         </View>