Merge pull request #657 from oceanbase/dengfuping-dev

chore(design): Add icon and dropdown button demo

packages/design/src/button/demo/dropdown.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Dropdown, Space } from '@oceanbase/design';
+import { DownOutlined } from '@oceanbase/icons';
+
+const items = [
+  {
+    key: '1',
+    label: '1st item',
+  },
+  {
+    key: '2',
+    label: '2nd item',
+  },
+  {
+    key: '3',
+    label: '3rd item',
+  },
+];
+
+const App: React.FC = () => (
+  <Space>
+    <Dropdown.Button
+      menu={{
+        items,
+        onClick: e => {
+          console.log('click', e);
+        },
+      }}
+    >
+      Dropdown
+    </Dropdown.Button>
+    <Dropdown.Button
+      menu={{
+        items,
+        onClick: e => {
+          console.log('click', e);
+        },
+      }}
+      icon={<DownOutlined />}
+    >
+      Dropdown
+    </Dropdown.Button>
+  </Space>
+);
+
+export default App;

packages/design/src/button/demo/icon.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { PlusOutlined } from '@oceanbase/icons';
+import { Button, Divider, Radio, Space } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const [position, setPosition] = useState<'start' | 'end'>('end');
+
+  return (
+    <>
+      <Space>
+        <Radio.Group value={position} onChange={e => setPosition(e.target.value)}>
+          <Radio.Button value="start">start</Radio.Button>
+          <Radio.Button value="end">end</Radio.Button>
+        </Radio.Group>
+      </Space>
+      <Divider orientation="left" plain>
+        Preview
+      </Divider>
+      <Space>
+        <Button type="primary" icon={<PlusOutlined />} iconPosition={position}>
+          Primary
+        </Button>
+        <Button icon={<PlusOutlined />} iconPosition={position}>
+          Default
+        </Button>
+        <Button type="dashed" icon={<PlusOutlined />} iconPosition={position}>
+          Dashed
+        </Button>
+        <Button icon={<PlusOutlined />} iconPosition={position} />
+      </Space>
+    </>
+  );
+};
+
+export default App;

packages/design/src/button/index.md

@@ -3,20 +3,22 @@ title: Button 按钮
 nav:
   title: 基础组件
   path: /components
+demo:
+  cols: 2
 ---
 
 - 🔥 完全继承 antd [Button](https://ant.design/components/button-cn) 的能力和 API，可无缝切换。
 - 💄 定制主题和样式，符合 OceanBase Design 设计规范。
 
 ## 代码演示
 
+<!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="按钮类型" description="按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。"></code>
-
-<code src="./demo/loading.tsx" title="加载中" description="通过 `loading` 属性设置按钮的加载状态"></code>
-
+<code src="./demo/loading.tsx" title="加载中" description="通过 `loading` 属性设置按钮的加载状态。"></code>
 <code src="./demo/disabled.tsx" title="禁用" description="添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。"></code>
-
-<code src="./demo/danger.tsx" title="危险按钮" description="通过 `danger` 属性控制而不是按钮类型"></code>
+<code src="./demo/danger.tsx" title="危险按钮" description="通过 `danger` 属性控制而不是按钮类型。"></code>
+<code src="./demo/icon.tsx" title="图标按钮" description="通过 `iconPosition` 属性控制图标位置。"></code>
+<code src="./demo/dropdown.tsx" title="带下拉框的按钮" description="更多的下拉框按钮示例可参考 [Dropdown.Button](/components/dropdown#dropdown-demo-dropdown-button)。"></code>
 
 ## API