All files / src/mediaobject/_example MediaObjectExample.jsx

75% Statements 6/8
100% Branches 0/0
33.33% Functions 1/3
75% Lines 6/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              1x     1x 1x 1x     1x                             1x                                                  
import React, { useState } from "react";
import { MediaObject } from "@tencent/tea-component/lib/mediaobject";
import { Segment } from "@tencent/tea-component/lib/segment";
import { Switch } from "@tencent/tea-component/lib/switch";
import { H4 } from "@tencent/tea-component/lib/heading";
import { useClassNames } from "@tencent/tea-component/lib/util";
 
const media = <img src="//placehold.it/64x64" alt="Generic placeholder" />;
 
export default function MediaObjectExample() {
  const [align, setAlign] = useState("top");
  const [reverse, setReverse] = useState(false);
  const { Margin } = useClassNames();
 
  const content = (
    <>
      <H4 className={Margin.Bottom["2n"]}>Media heading</H4>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
        ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
        tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
        fringilla. Donec lacinia congue felis in faucibus. Cras sit amet nibh
        libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
        commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
        turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
        lacinia congue felis in faucibus.
      </p>
    </>
  );
 
  return (
    <>
      <MediaObject
        media={media}
        // @ts-ignore
        align={align}
        reverse={reverse}
      >
        {content}
      </MediaObject>
      <section>
        对齐方式:
        <Segment
          options={[{ value: "top" }, { value: "middle" }, { value: "bottom" }]}
          value={align}
          onChange={value => setAlign(value)}
        />
      </section>
      <section>
        反置:
        <Switch value={reverse} onChange={value => setReverse(value)} />
      </section>
    </>
  );
}