docs(components/button): button文档完成

.dumi/global.scss

@@ -1 +1 @@
-@import '../packages/react-ui/src/index.scss';
+@import '../packages/react-ui/src/index';

packages/components/src/button/demo/all.tsx

@@ -0,0 +1,113 @@
+/**
+ * title: 全览
+ * description: 全览演示。
+ */
+
+import React, { useCallback, useReducer } from 'react';
+import { Button, Layout as OriginLayout } from '@tool-pack/react-ui';
+
+const App: React.FC = () => {
+  const [times, _addTimes] = useReducer((s) => s + 1, 0);
+  const addTimes = useCallback(() => _addTimes(), []);
+  const types = [
+    'default',
+    'primary',
+    'success',
+    'info',
+    'danger',
+    'warning',
+  ] as const;
+  const sizes = ['small', 'medium', 'large'] as const;
+  const shapes = ['none', 'default', 'round', 'circle'] as const;
+  const plains = [false, true, 'dashed', 'text'] as const;
+  return (
+    <Layout vertical>
+      click times: {times}
+      <Layout>
+        size:
+        {sizes.map((size) => (
+          <Button className="test" onClick={addTimes} size={size} key={size}>
+            {size}
+          </Button>
+        ))}
+      </Layout>
+      <Layout>
+        type:
+        {types.map((type) => (
+          <Button onClick={addTimes} type={type} key={type}>
+            {type}
+          </Button>
+        ))}
+      </Layout>
+      <Layout>
+        plain:
+        {plains.map((plain) => (
+          <Layout
+            style={{ marginBottom: '5px', textAlign: 'center' }}
+            key={String(plain)}
+            vertical>
+            ({String(plain)}):
+            {types.map((type) => (
+              <Button
+                onClick={addTimes}
+                type={type}
+                key={type + '_' + plain}
+                plain={plain}>
+                {type}
+              </Button>
+            ))}
+          </Layout>
+        ))}
+      </Layout>
+      <Layout>
+        disabled:
+        {plains.map((plain) => (
+          <Layout style={{ marginBottom: '5px' }} key={String(plain)} vertical>
+            {types.map((type) => (
+              <Button
+                onClick={addTimes}
+                type={type}
+                key={String(plain) + '_' + type}
+                plain={plain}
+                disabled>
+                {type}
+              </Button>
+            ))}
+          </Layout>
+        ))}
+      </Layout>
+      <Layout>
+        shape:
+        {sizes.map((size) =>
+          shapes.map((shape) => (
+            <Button
+              key={size + '_' + shape}
+              onClick={addTimes}
+              type="primary"
+              size={size}
+              shape={shape}>
+              {shape}
+            </Button>
+          )),
+        )}
+      </Layout>
+    </Layout>
+  );
+};
+
+const Layout: React.FC<Parameters<typeof OriginLayout>[0]> = React.memo(
+  (props) => (
+    <OriginLayout
+      {...props}
+      style={{
+        gap: '8px',
+        flexWrap: 'wrap',
+        overflow: 'visible',
+        ...props.style,
+      }}>
+      {props.children}
+    </OriginLayout>
+  ),
+);
+
+export default App;

packages/components/src/button/demo/disabled.tsx

@@ -0,0 +1,39 @@
+/**
+ * title: 禁止点击
+ * description: 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
+ */
+
+import React from 'react';
+import { Button, Layout as OriginLayout } from '@tool-pack/react-ui';
+
+const App: React.FC = () => (
+  <Layout vertical>
+    <Layout>
+      <Button type="primary">Primary</Button>
+      <Button type="primary" disabled>
+        Primary(disabled)
+      </Button>
+    </Layout>
+    <Layout>
+      <Button>Default</Button>
+      <Button disabled>Default(disabled)</Button>
+    </Layout>
+  </Layout>
+);
+
+const Layout: React.FC<Parameters<typeof OriginLayout>[0]> = React.memo(
+  (props) => (
+    <OriginLayout
+      {...props}
+      style={{
+        gap: '8px',
+        flexWrap: 'wrap',
+        overflow: 'visible',
+        ...props.style,
+      }}>
+      {props.children}
+    </OriginLayout>
+  ),
+);
+
+export default App;

packages/components/src/button/demo/plain.tsx

@@ -0,0 +1,32 @@
+/**
+ * title: 按钮边框
+ * description: boolean | 'dashed' | 'text'。
+ */
+
+import React from 'react';
+import { Button, Layout } from '@tool-pack/react-ui';
+
+const App: React.FC = () => (
+  <Layout
+    style={{
+      gap: '8px',
+      flexWrap: 'wrap',
+      overflow: 'visible',
+      alignItems: 'center',
+    }}>
+    <Button type="primary" plain={false}>
+      false
+    </Button>
+    <Button type="primary" plain>
+      true
+    </Button>
+    <Button type="primary" plain="dashed">
+      dashed
+    </Button>
+    <Button type="primary" plain="text">
+      text
+    </Button>
+  </Layout>
+);
+
+export default App;

packages/components/src/button/demo/shape.tsx

@@ -0,0 +1,26 @@
+/**
+ * title: 按钮形状
+ * description: 按钮有`none` `default` `round` `circle` 4种形状。
+ */
+
+import React from 'react';
+import { Button, Layout } from '@tool-pack/react-ui';
+
+const App: React.FC = () => (
+  <Layout
+    style={{
+      gap: '8px',
+      flexWrap: 'wrap',
+      overflow: 'visible',
+      alignItems: 'center',
+    }}>
+    <Button shape="none">none</Button>
+    <Button>default</Button>
+    <Button shape="round">round</Button>
+    <Button size="large" shape="circle" style={{ fontSize: '12px' }}>
+      circle
+    </Button>
+  </Layout>
+);
+
+export default App;

packages/components/src/button/demo/size.tsx

@@ -0,0 +1,24 @@
+/**
+ * title: 按钮尺寸
+ * description: 按钮有大、中、小三种尺寸。 <br />通过设置 `size` 为 `large` `medium` `small` 分别把按钮设为大、中、小尺寸。若不设置 `size`，则尺寸为中。
+ */
+
+import React from 'react';
+import { Button, Layout } from '@tool-pack/react-ui';
+
+const App: React.FC = () => (
+  <Layout
+    style={{
+      gap: '8px',
+      flexWrap: 'wrap',
+      overflow: 'visible',
+      alignItems: 'center',
+    }}>
+    <Button size="small">small</Button>
+    <Button>default</Button>
+    <Button size="medium">medium</Button>
+    <Button size="large">large</Button>
+  </Layout>
+);
+
+export default App;

packages/components/src/button/demo/basic.tsx → packages/components/src/button/demo/type.tsx

@@ -1,15 +1,20 @@
+/**
+ * title: 按钮类型
+ * description: 按钮有六种类型：默认按钮、主按钮、成功按钮、信息按钮、警告按钮和危险按钮。主按钮在同一个操作区域最多出现一次。
+ */
+
 import React from 'react';
-import { Button } from '@tool-pack/react-ui';
+import { Button, Layout } from '@tool-pack/react-ui';
 
 const App: React.FC = () => (
-  <>
+  <Layout style={{ gap: '8px', flexWrap: 'wrap', overflow: 'visible' }}>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
     <Button type="success">Success Button</Button>
     <Button type="info">Info Button</Button>
     <Button type="warning">warning Button</Button>
     <Button type="danger">warning Button</Button>
-  </>
+  </Layout>
 );
 
 export default App;