@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/layout/space/index.md

@@ -0,0 +1,196 @@
+---
+order: 7
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/layout/pages/space/index'
+group:
+    title: 布局组件
+    order: 3
+---
+
+# Space 间距 <Badge>2.0.0</Badge>
+
+#
+元素排列中保持相同的宽度。
+
+### 引入
+
+```tsx
+import { Space } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  return (
+    <Space>
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  )
+}
+export default Demo1
+
+```
+    
+### 换行
+
+
+```tsx
+import React from 'react'
+import { Space, Button } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  return (
+    <Space wrap>
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+      <Button>按钮4</Button>
+      <Button>按钮5</Button>
+      <Button>按钮6</Button>
+    </Space>
+  )
+}
+export default Demo2
+
+```
+    
+### 垂直
+
+
+```tsx
+import React from 'react'
+import { Space, Button } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  return (
+    <Space direction="vertical">
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  )
+}
+export default Demo3
+
+```
+    
+### 间距大小
+
+
+```tsx
+import React from 'react'
+import { Space, Button, ConfigProvider } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  return (
+    <ConfigProvider
+      theme={{
+        nutuiSpaceGap: '20px',
+      }}
+    >
+      <Space direction="vertical">
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </ConfigProvider>
+  )
+}
+export default Demo4
+
+```
+    
+### 主轴对齐方式
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo5 = () => {
+  return (
+    <Space justify="start" wrap>
+      <Button>按钮1</Button>
+      <div>
+        <Button block style={{ marginBottom: 12 }}>
+          按钮2
+        </Button>
+        <Button block>按钮2</Button>
+      </div>
+      <div>
+        <Button block style={{ marginBottom: 12 }}>
+          按钮3
+        </Button>
+        <Button block style={{ marginBottom: 12 }}>
+          按钮3
+        </Button>
+        <Button block>按钮3</Button>
+      </div>
+    </Space>
+  )
+}
+export default Demo5
+
+```
+    
+### 交叉轴对齐方式
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  return (
+    <Space align="end" wrap>
+      <Button>按钮1</Button>
+      <div>
+        <Button block style={{ marginBottom: 12 }}>
+          按钮2
+        </Button>
+        <Button block>按钮2</Button>
+      </div>
+      <div>
+        <Button block style={{ marginBottom: 12 }}>
+          按钮3
+        </Button>
+        <Button block style={{ marginBottom: 12 }}>
+          按钮3
+        </Button>
+        <Button block>按钮3</Button>
+      </div>
+    </Space>
+  )
+}
+export default Demo6
+
+```
+    
+## Space
+
+### Props
+
+| 属性 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| direction | 间距方向 | `'vertical'｜ 'horizontal'` | `'horizontal'` |
+| align | 交叉轴对齐方式 | `'start'｜'end'｜'center'｜'baseline'` | `-` |
+| justify | 主轴对齐方式 | `'start' ｜ 'end' ｜ 'center' ｜ 'between' ｜ 'around' ｜ 'evenly' ｜ 'stretch'` | `-` |
+| wrap | 是否自动换行，仅在 horizontal 时有效 | `boolean` | `false` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/config-provider)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| \--nutui-space-gap | `8px` | 间距大小 |