docs(components): space文档完成

Author: mengxinssfd

packages/components/src/space/demo/basic.tsx

@@ -0,0 +1,18 @@
+/**
+ * title: 基础用法
+ * description: space 基础用法。
+ */
+
+import React from 'react';
+import { Space, Button } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  return (
+    <Space>
+      <Button type="primary">bt1</Button>
+      <Button type="danger">bt2</Button>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/demo/fill.tsx

@@ -0,0 +1,30 @@
+/**
+ * title: 填充
+ * description: 设置子元素填充可使用fill和fillRatio, fillRatio默认100。注意：Space 嵌套的话，如子Space设置fillRatio会影响自身，见第三个Space。
+ */
+
+import React from 'react';
+import { Space } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  const style: React.CSSProperties = { width: '100px' };
+  const style2: React.CSSProperties = { height: '100px' };
+  return (
+    <Space vertical fill>
+      <Space style={{ height: '200px' }} fill>
+        <div style={{ ...style, flex: 1, background: '#1677ff' }}></div>
+        <div style={{ ...style, background: '#f56c6c' }}></div>
+      </Space>
+      <Space style={{ width: '100%' }} vertical fill fillRatio={50}>
+        <div
+          style={{
+            ...style2,
+            background: '#1677ff',
+          }}></div>
+        <div style={{ ...style2, background: '#f56c6c' }}></div>
+      </Space>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/demo/gap.tsx

@@ -0,0 +1,18 @@
+/**
+ * title: 自定义间距大小
+ * description: space 可以使用 gap 参数自定义间距大小; gap 默认 8px; 传入数字时会使用 px 作为单位。
+ */
+
+import React from 'react';
+import { Space, Button } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  return (
+    <Space gap={20}>
+      <Button type="primary">bt1</Button>
+      <Button type="danger">bt2</Button>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/demo/inline.tsx

@@ -0,0 +1,19 @@
+/**
+ * title: inline
+ * description: 使用 inline 参数使 space 改为行内元素。
+ */
+
+import React from 'react';
+import { Space } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  const style: React.CSSProperties = { width: '200px', height: '100px' };
+  return (
+    <Space vertical inline style={{ background: '#e6a23c' }}>
+      <div style={{ ...style, background: '#1677ff' }}></div>
+      <div style={{ ...style, background: '#f56c6c' }}></div>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/demo/separator.tsx

@@ -0,0 +1,43 @@
+/**
+ * title: 插入分隔符
+ * description: 可以使用 separator 参数指定 space 组件的分隔符，如果为空则不添加间隔，可以使用jsx作为分隔符。
+ */
+
+import React from 'react';
+import { Space, Button } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  return (
+    <Space
+      vertical
+      separator={
+        <div style={{ background: 'gray', height: '1px', width: '100%' }}></div>
+      }>
+      <Space tag="div" separator="|" gap={20}>
+        <Button type="primary">bt1</Button>
+        <Button type="danger">bt2</Button>
+      </Space>
+      <Space
+        tag="div"
+        separator={
+          <div
+            style={{
+              background: 'var(--t-primary-bg-color)',
+              width: '1px',
+              height: '1em',
+            }}></div>
+        }>
+        <Button type="primary">bt1</Button>
+        <Button type="danger">bt2</Button>
+        <Button type="success">bt3</Button>
+      </Space>
+      <Space tag="div" separator={<button disabled>使用button分隔</button>}>
+        <Button type="primary">bt1</Button>
+        <Button type="danger">bt2</Button>
+        <Button type="success">bt3</Button>
+      </Space>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/demo/tag.tsx

@@ -0,0 +1,18 @@
+/**
+ * title: 指定根html标签
+ * description: 可以使用 tag 参数指定 space 组件的根html标签，tag 默认 section。
+ */
+
+import React from 'react';
+import { Space, Button } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  return (
+    <Space tag="div">
+      <Button type="primary">bt1</Button>
+      <Button type="danger">bt2</Button>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/demo/vertical.tsx

@@ -0,0 +1,19 @@
+/**
+ * title: 垂直排列
+ * description: 使用 vertical 参数使 space 组件垂直排列。
+ */
+
+import React from 'react';
+import { Space } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  const style: React.CSSProperties = { width: '200px', height: '100px' };
+  return (
+    <Space vertical style={{ background: '#e6a23c' }}>
+      <div style={{ ...style, background: '#1677ff' }}></div>
+      <div style={{ ...style, background: '#f56c6c' }}></div>
+    </Space>
+  );
+};
+
+export default App;

packages/components/src/space/index.zh-CN.md

@@ -0,0 +1,38 @@
+---
+category: Components
+title: Space
+subtitle: 间距
+demo:
+  cols: 2
+group:
+  title: 布局
+---
+
+Space 间距：用于给多个元素之间添加间距，跟其他组件库不同的是此组件的 children 不使用额外的 item 元素包裹。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx"></code>
+<code src="./demo/tag.tsx"></code>
+<code src="./demo/gap.tsx"></code>
+<code src="./demo/vertical.tsx"></code>
+<code src="./demo/inline.tsx"></code>
+<code src="./demo/fill.tsx"></code>
+<code src="./demo/separator.tsx"></code>
+
+## API
+
+Space 的属性说明如下：
+
+| 属性      | 说明                                         | 类型                        | 默认值    | 版本 |
+| --------- | -------------------------------------------- | --------------------------- | --------- | ---- |
+| gap       | 间距                                         | number \| string            | `8px`     |      |
+| tag       | 根元素 html 标签                             | keyof HTMLElementTagNameMap | `section` |      |
+| vertical  | 垂直排列                                     | boolean                     | false     |      |
+| separator | 分隔符                                       | React.ReactNode             | -         |      |
+| inline    | 是否设为 inline-flex                         | boolean                     | false     |      |
+| fill      | 子元素开启 fillRatio 比例填充                | boolean                     | false     |      |
+| fillRatio | 子元素 fillRatio(百分比，\[1 - 100])比例填充 | number                      | 100       |      |
+
+支持原生 HTML 的其他所有属性，像一些 wrap、justify、align-items 之类的可以直接写 style。