All files / src/justify/_example JustifyTopBottomExample.jsx

100% Statements 2/2
100% Branches 0/0
100% Functions 1/1
100% Lines 2/2

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              1x                               1x                                              
import React from "react";
import { Justify } from "@tencent/tea-component/lib/justify";
import { Button } from "@tencent/tea-component/lib/button";
import { Card } from "@tencent/tea-component/lib/card";
import { H3 } from "@tencent/tea-component/lib/heading";
 
export default function JustifyExample() {
  const text = `
    高高山上一老僧,身穿衲头几千层。
    若问老僧年高迈?曾记得黄河九澄清。
    五百年前,清一澄,总共是四千五百冬。
    老僧收了八个徒弟,八个弟子都有法名。
    大徒弟名字就叫青头愣,二徒弟名叫愣头青。
    三徒弟名字就叫僧三点,四徒弟名字就叫做点三僧。
    五徒弟名叫蹦葫芦把儿,六徒弟名叫把儿葫芦蹦。
    七徒弟名字就叫随风倒,八徒弟名字就叫做倒随风。
    老师傅教给他们八宗艺,八仙过海,各显其能:
    青头愣会打磬,愣头青会撞钟。
    僧三点会吹管,点三僧会捧笙。
    蹦葫芦把儿会打鼓,把儿葫芦蹦会念经。
    随风倒他会扫地,这个倒随风他会点灯。
  `;
 
  return (
    <section style={{ maxWidth: 800 }}>
      <Card>
        <Card.Body>
          <Justify
            top
            left={<H3>{text}</H3>}
            right={<Button type="link">文本按钮</Button>}
          />
        </Card.Body>
      </Card>
      <Card>
        <Card.Body>
          <Justify
            bottom
            left={<H3>{text}</H3>}
            right={<Button type="link">文本按钮</Button>}
          />
        </Card.Body>
      </Card>
    </section>
  );
}