@cainiaofe/cn-ui-m
Version:
45 lines (44 loc) • 2.59 kB
JavaScript
import * as React from 'react';
import { CnCard, CnPage } from "../../..";
export default { title: 'demo/CnCard' };
export var 折叠卡片 = function () {
var _a = React.useState(false), fold = _a[0], setFold = _a[1];
return (React.createElement(CnPage, null,
React.createElement(CnCard, { shape: "normal", title: "\u5F00\u542F\u5361\u7247\u6298\u53E0\u529F\u80FD", titleTips: "Tips", titleTag: {
type: 'normal',
children: '标签',
}, desc: "\u63CF\u8FF0\u6587\u6848\uFF1A\u6B64\u5904\u653E\u7F6E\u5BF9\u5E94\u5361\u7247\u4FE1\u606F\u7684\u63CF\u8FF0\u6027\u6587\u6848\uFF1B\u9009\u586B", foldable: true },
React.createElement("div", { style: {
height: '80px',
backgroundColor: '#F7F8FA',
borderRadius: '2px',
textAlign: 'center',
lineHeight: '80px',
color: '#B5B6B8',
} }, "\u5185\u5BB9\u533A")),
React.createElement(CnCard, { shape: "normal", title: "\u8BBE\u7F6E\u521D\u59CB\u72B6\u6001\u4E3A\u6536\u8D77", titleTips: "Tips", titleTag: {
type: 'normal',
children: '标签',
}, desc: "\u63CF\u8FF0\u6587\u6848\uFF1A\u6B64\u5904\u653E\u7F6E\u5BF9\u5E94\u5361\u7247\u4FE1\u606F\u7684\u63CF\u8FF0\u6027\u6587\u6848\uFF1B\u9009\u586B", foldable: true, initFold: true },
React.createElement("div", { style: {
height: '80px',
backgroundColor: '#F7F8FA',
borderRadius: '2px',
textAlign: 'center',
lineHeight: '80px',
color: '#B5B6B8',
} }, "\u5185\u5BB9\u533A")),
React.createElement(CnCard, { shape: "normal", title: "\u53D7\u63A7\u6536\u8D77", titleTips: "Tips", titleTag: {
type: 'normal',
children: '标签',
}, desc: "\u63CF\u8FF0\u6587\u6848\uFF1A\u6B64\u5904\u653E\u7F6E\u5BF9\u5E94\u5361\u7247\u4FE1\u606F\u7684\u63CF\u8FF0\u6027\u6587\u6848\uFF1B\u9009\u586B", foldable: true, fold: fold, onFoldChange: setFold },
React.createElement("div", { style: {
height: '80px',
backgroundColor: '#F7F8FA',
borderRadius: '2px',
textAlign: 'center',
lineHeight: '80px',
color: '#B5B6B8',
} }, "\u5185\u5BB9\u533A"))));
};
折叠卡片.desc = '收起后，操作栏隐藏不显示。';