@orca-fe/pocket
Version:
UI components by orca-team
110 lines (109 loc) • 3.63 kB
JavaScript
/**
* title: Default usage
* desc:
*
* title.zh-CN: 基础用法
* desc.zh-CN:
*/
import React from 'react';
import { IconButton } from "../..";
import { Space } from 'antd';
import { CaretLeftFilled, FileOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Demo = () => /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("div", {
children: "\u7ED3\u5408 @ant-design/icons \u4F7F\u7528"
}), /*#__PURE__*/_jsxs(Space, {
style: {
padding: 4
},
children: [/*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(FileOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(SettingOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(CaretLeftFilled, {})
}), /*#__PURE__*/_jsx(IconButton, {
children: /*#__PURE__*/_jsx(ReloadOutlined, {})
})]
}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("div", {
children: "Dark \u6A21\u5F0F"
}), /*#__PURE__*/_jsxs(Space, {
style: {
backgroundColor: '#333',
padding: 4
},
children: [/*#__PURE__*/_jsx(IconButton, {
theme: "dark",
children: /*#__PURE__*/_jsx(FileOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
theme: "dark",
children: /*#__PURE__*/_jsx(SettingOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
theme: "dark",
children: /*#__PURE__*/_jsx(CaretLeftFilled, {})
}), /*#__PURE__*/_jsx(IconButton, {
theme: "dark",
children: /*#__PURE__*/_jsx(ReloadOutlined, {})
})]
}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("div", {
children: "\u5927\u5C3A\u5BF8"
}), /*#__PURE__*/_jsxs(Space, {
style: {
padding: 4
},
children: [/*#__PURE__*/_jsx(IconButton, {
size: "large",
children: /*#__PURE__*/_jsx(FileOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "large",
children: /*#__PURE__*/_jsx(SettingOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "large",
children: /*#__PURE__*/_jsx(CaretLeftFilled, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "large",
children: /*#__PURE__*/_jsx(ReloadOutlined, {})
})]
}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("div", {
children: "\u5C0F\u5C3A\u5BF8"
}), /*#__PURE__*/_jsxs(Space, {
style: {
padding: 4
},
children: [/*#__PURE__*/_jsx(IconButton, {
size: "small",
children: /*#__PURE__*/_jsx(FileOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "small",
children: /*#__PURE__*/_jsx(SettingOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "small",
children: /*#__PURE__*/_jsx(CaretLeftFilled, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "small",
children: /*#__PURE__*/_jsx(ReloadOutlined, {})
})]
}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("div", {
children: "\u8D85\u5C0F\u5C3A\u5BF8"
}), /*#__PURE__*/_jsxs(Space, {
style: {
padding: 4
},
children: [/*#__PURE__*/_jsx(IconButton, {
size: "x-small",
children: /*#__PURE__*/_jsx(FileOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "x-small",
children: /*#__PURE__*/_jsx(SettingOutlined, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "x-small",
children: /*#__PURE__*/_jsx(CaretLeftFilled, {})
}), /*#__PURE__*/_jsx(IconButton, {
size: "x-small",
children: /*#__PURE__*/_jsx(ReloadOutlined, {})
})]
})]
});
export default Demo;