All files / src/text/_example TextVerticalAlignExample.jsx

85.71% Statements 6/7
100% Branches 0/0
75% Functions 3/4
85.71% Lines 6/7

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              1x                         1x     1x     6x           1x     6x                                  
import React, { useState } from "react";
import { Text } from "@tencent/tea-component/lib/text";
import { Select } from "@tencent/tea-component/lib/select";
 
/**
 * @type {('baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom')[]}
 */
const aligns = [
  "baseline",
  "top",
  "middle",
  "bottom",
  "text-top",
  "text-bottom",
];
 
export default () => {
  /**
   * @type {[any, any]}
   */
  const [compare, setCompare] = useState("baseline");
 
  const select = (
    <Select
      style={{ fontSize: "18px" }}
      type="simulate"
      options={aligns.map(align => ({ value: align }))}
      value={compare}
      onChange={compare => setCompare(compare)}
    />
  );
 
  return (
    <>
      {aligns.map(align => (
        <p key={align} style={{ fontSize: "24px", fontFamily: "monospace" }}>
          <Text verticalAlign={compare} bgTheme="warning">
            {compare}{" "}
          </Text>
          <Text verticalAlign={align} bgTheme="success">
            {align}
          </Text>
        </p>
      ))}
      <hr />
      <section>
        <Text verticalAlign="middle">参照:</Text>
        {select}
      </section>
    </>
  );
};