Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x | import React, { useState, Fragment } from "react"; import { Card } from "@tencent/tea-component/lib/card"; import { Button } from "@tencent/tea-component/lib/button"; import { Switch } from "@tencent/tea-component/lib/switch"; import { useClassNames } from "@tencent/tea-component/lib/util"; export default function CardExample() { const [headerVisible, setHeaderVisible] = useState(false); const [footerVisible, setFooterVisible] = useState(false); const [borderVisible, setBorderVisible] = useState(false); const { Padding } = useClassNames(); return ( <Fragment> <section> <Switch value={headerVisible} onChange={value => setHeaderVisible(value)} > 显示头部 </Switch> <Switch value={footerVisible} onChange={value => setFooterVisible(value)} > 显示底部 </Switch> <Switch value={borderVisible} onChange={value => setBorderVisible(value)} > 显示边框 </Switch> </section> <div className="example-stage"> <Card bordered={borderVisible}> {headerVisible && ( <Card.Header> <h3>卡片头部</h3> </Card.Header> )} <Card.Body title="内容区标题" subtitle="(小标题)" operation={<Button type="link">操作区</Button>} > 内容区 </Card.Body> {footerVisible && ( <Card.Footer> <p className={Padding["5n"]}>卡片底部</p> </Card.Footer> )} </Card> </div> </Fragment> ); } |