All files / src/card/_example CardExample.jsx

62.5% Statements 5/8
50% Branches 2/4
25% Functions 1/4
62.5% Lines 5/8

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>
  );
}