feat(space): update demos and docs of justify and align (#1856)

jdf2e · Jan 12, 2024 · 2ab3400 · 2ab3400
1 parent 58996da
commit 2ab3400
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 4 deletions.
diff --git a/src/packages/space/demo.taro.tsx b/src/packages/space/demo.taro.tsx
@@ -112,6 +112,25 @@ const SpaceDemo = () => {
             </Space>
           </ConfigProvider>
         </Cell>
+
+        <h2>主轴对齐方式</h2>
+
+        <Cell style={{ display: 'block' }}>
+          <Space justify="center" wrap>
+            <Button style={{ height: '30px' }}>{translated.button1}</Button>
+            <Button style={{ height: '60px' }}>{translated.button2}</Button>
+            <Button style={{ height: '90px' }}>{translated.button3}</Button>
+          </Space>
+        </Cell>
+
+        <h2>交叉轴对齐方式</h2>
+        <Cell>
+          <Space align="end" wrap>
+            <Button style={{ height: '30px' }}>{translated.button1}</Button>
+            <Button style={{ height: '60px' }}>{translated.button2}</Button>
+            <Button style={{ height: '90px' }}>{translated.button3}</Button>
+          </Space>
+        </Cell>
       </div>
     </>
   )

diff --git a/src/packages/space/demo.tsx b/src/packages/space/demo.tsx
@@ -18,6 +18,8 @@ interface T extends Button {
   wrap: string
   direction: string
   spaceGap: string
+  mainAxisAlign: string
+  crossAxisAlign: string
 }
 const SpaceDemo = () => {
   const [translated] = useTranslate<T>({
@@ -32,6 +34,8 @@ const SpaceDemo = () => {
       button4: '按钮4',
       button5: '按钮5',
       button6: '按钮6',
+      mainAxisAlign: '主轴对齐方式',
+      crossAxisAlign: '交叉轴对齐方式',
     },
     'zh-TW': {
       basic: '基本用法',
@@ -44,6 +48,8 @@ const SpaceDemo = () => {
       button4: '按钮4',
       button5: '按钮5',
       button6: '按钮6',
+      mainAxisAlign: '主軸對齊方式',
+      crossAxisAlign: '交叉軸對齊方式',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -56,6 +62,8 @@ const SpaceDemo = () => {
       button4: 'button4',
       button5: 'button5',
       button6: 'button6',
+      mainAxisAlign: 'MainAxis Alignment',
+      crossAxisAlign: 'CrossAxis Alignment',
     },
   })
 
@@ -106,6 +114,25 @@ const SpaceDemo = () => {
             </Space>
           </ConfigProvider>
         </Cell>
+
+        <h2>{translated.mainAxisAlign}</h2>
+
+        <Cell style={{ display: 'block' }}>
+          <Space justify="center" wrap>
+            <Button style={{ height: '30px' }}>{translated.button1}</Button>
+            <Button style={{ height: '60px' }}>{translated.button2}</Button>
+            <Button style={{ height: '90px' }}>{translated.button3}</Button>
+          </Space>
+        </Cell>
+
+        <h2>{translated.crossAxisAlign}</h2>
+        <Cell>
+          <Space align="end" wrap>
+            <Button style={{ height: '30px' }}>{translated.button1}</Button>
+            <Button style={{ height: '60px' }}>{translated.button2}</Button>
+            <Button style={{ height: '90px' }}>{translated.button3}</Button>
+          </Space>
+        </Cell>
       </div>
     </>
   )

diff --git a/src/packages/space/doc.en-US.md b/src/packages/space/doc.en-US.md
@@ -4,7 +4,7 @@
 
 Maintain the same width in the arrangement of elements.
 
-##  Install
+## Install
 
 ```tsx
 import { Space } from '@nutui/nutui-react';
@@ -33,7 +33,9 @@ import { Space, Button } from '@nutui/nutui-react';
 export default App;
 
 ```
+
 :::
+
 ### Wrap
 
 :::demo
@@ -57,7 +59,9 @@ const App = () => {
 export default App;
 
 ```
+
 :::
+
 ### Direction
 
 :::demo
@@ -78,7 +82,9 @@ const App = () => {
 export default App;
 
 ```
+
 :::
+
 ### Gap
 
 :::demo
@@ -105,7 +111,51 @@ const App = () => {
 export default App;
 
 ```
+
+### MainAxis alignment
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Space, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <Space justify="center" wrap>
+      <Button style={{ height: '30px' }}>button1</Button>
+      <Button style={{ height: '60px' }}>button2</Button>
+      <Button style={{ height: '90px' }}>button3</Button>
+    </Space>    
+  );
+};
+export default App;
+
+```
+
+### CrossAxis alignment
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Space, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <Space align="end" wrap>
+      <Button style={{ height: '30px' }}>button1</Button>
+      <Button style={{ height: '60px' }}>button2</Button>
+      <Button style={{ height: '90px' }}>button3</Button>
+    </Space>  
+  );
+};
+export default App;
+
+```
+
 :::
+
 ## Space
 
 ### Props
@@ -126,4 +176,4 @@ to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Description | Default           |
 | --- | --- |--------------|
-| \--nutui-space-gap | `8px` | spacing size |
+| \--nutui-space-gap | `8px` | spacing size |
diff --git a/src/packages/space/doc.md b/src/packages/space/doc.md
@@ -112,6 +112,48 @@ export default App;
 
 ```
 
+### 主轴对齐方式
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Space, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <Space justify="center" wrap>
+      <Button style={{ height: '30px' }}>按钮1</Button>
+      <Button style={{ height: '60px' }}>按钮2</Button>
+      <Button style={{ height: '90px' }}>按钮3</Button>
+    </Space>    
+  );
+};
+export default App;
+
+```
+
+### 交叉轴对齐方式
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Space, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  return (
+    <Space align="end" wrap>
+      <Button style={{ height: '30px' }}>按钮1</Button>
+      <Button style={{ height: '60px' }}>按钮2</Button>
+      <Button style={{ height: '90px' }}>按钮3</Button>
+    </Space>  
+  );
+};
+export default App;
+
+```
+
 :::
 
 ## Space

diff --git a/src/packages/space/doc.taro.md b/src/packages/space/doc.taro.md
@@ -33,7 +33,9 @@ import { Space, Button } from '@nutui/nutui-react-taro';
 export default App;
 
 ```
+
 :::
+
 ### 换行
 
 :::demo
@@ -57,7 +59,9 @@ const App = () => {
 export default App;
 
 ```
+
 :::
+
 ### 垂直
 
 :::demo
@@ -78,7 +82,9 @@ const App = () => {
 export default App;
 
 ```
+
 :::
+
 ### 间距大小
 
 :::demo
@@ -105,7 +111,51 @@ const App = () => {
 export default App;
 
 ```
+
+### 主轴对齐方式
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Space, Button } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  return (
+    <Space justify="center" wrap>
+      <Button style={{ height: '30px' }}>按钮1</Button>
+      <Button style={{ height: '60px' }}>按钮2</Button>
+      <Button style={{ height: '90px' }}>按钮3</Button>
+    </Space>    
+  );
+};
+export default App;
+
+```
+
+### 交叉轴对齐方式
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Space, Button } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  return (
+    <Space align="end" wrap>
+      <Button style={{ height: '30px' }}>按钮1</Button>
+      <Button style={{ height: '60px' }}>按钮2</Button>
+      <Button style={{ height: '90px' }}>按钮3</Button>
+    </Space>  
+  );
+};
+export default App;
+
+```
+
 :::
+
 ## Space
 
 ### Props
@@ -125,4 +175,4 @@ export default App;
 
 | 名称 | 默认值 | 描述 |
 | --- | --- | --- |
-| \--nutui-space-gap | `8px` | 间距大小 |
+| \--nutui-space-gap | `8px` | 间距大小 |