@cainiaofe/cn-ui-m
Version:
34 lines (33 loc) • 2.31 kB
JavaScript
import * as React from 'react';
import { CnBox, CnButton, CnDemoBlock, CnDemoPage, CnIcon, } from "../../..";
export var 加载中和图标按钮 = function () {
var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
return (React.createElement(CnDemoPage, { title: "\u52A0\u8F7D\u4E2D\u548C\u56FE\u6807\u6309\u94AE", noPadding: true },
React.createElement(CnDemoBlock, { title: "\u52A0\u8F7D\u4E2D" },
React.createElement(CnBox, { direction: "row", justify: "space-between", wrap: true },
React.createElement(CnButton, { type: "normal", loading: true }, "\u52A0\u8F7D\u4E2D"),
React.createElement(CnButton, { type: "primary", loading: true }, "\u52A0\u8F7D\u4E2D"),
React.createElement(CnButton, { type: "secondary", loading: true }, "\u52A0\u8F7D\u4E2D"))),
React.createElement(CnDemoBlock, { title: "\u56FE\u6807\u6309\u94AE" },
React.createElement(CnBox, { direction: "row", justify: "space-between", wrap: true },
React.createElement(CnButton, { type: "normal" },
React.createElement(CnIcon, { type: "time" }),
" clock"),
React.createElement(CnButton, { type: "primary" },
React.createElement(CnIcon, { type: "time" }),
" clock"),
React.createElement(CnButton, { type: "secondary" },
React.createElement(CnIcon, { type: "time" }),
" clock"))),
React.createElement(CnDemoBlock, { title: "\u56FE\u6807\u6309\u94AE\u7684\u52A0\u8F7D" },
React.createElement(CnBox, { direction: "row", justify: "space-between", wrap: true },
React.createElement(CnButton, { type: "normal", loading: loading, onClick: function () {
setLoading(function (cur) { return !cur; });
} },
React.createElement(CnIcon, { type: "time" }),
" ",
loading ? '点击停止' : '点击加载')))));
};
加载中和图标按钮.desc =
'按钮中可以通过嵌入CnIcon来展示图标。当按钮状态为加载中时，加载图标的展示优先级高于原有的图标。';
export default { title: 'demo/CnButton' };