All files / src/grid/_example GridAlignExample.jsx

75% Statements 3/4
100% Branches 0/0
66.67% Functions 2/3
75% Lines 3/4

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                                                                     6x                          
import React, { Fragment, useState } from "react";
import { Row, Col } from "@tencent/tea-component/lib/grid";
import { RadioGroup, Radio } from "@tencent/tea-component/lib/radio";
 
export default function GridAlignExample() {
  const [align, setAlign] = useState(null);
 
  return (
    <Fragment>
      <section>
        <RadioGroup value={align} onChange={value => setAlign(value)}>
          <Radio name={null}>默认等高</Radio>
          <Radio name="top">顶部对齐</Radio>
          <Radio name="middle">居中对齐</Radio>
          <Radio name="bottom">底部对齐</Radio>
        </RadioGroup>
      </section>
      <Row verticalAlign={align}>
        <Col span={8}>
          <div style={{ height: "100%", background: "gray" }}>
            <Box>col-8</Box>
            <Box>col-8</Box>
          </div>
        </Col>
        <Col span={8}>
          <div style={{ height: "100%", background: "gray" }}>
            <Box>col-8</Box>
          </div>
        </Col>
        <Col span={8}>
          <div style={{ height: "100%", background: "gray" }}>
            <Box>col-8</Box>
            <Box>col-8</Box>
            <Box>col-8</Box>
          </div>
        </Col>
      </Row>
    </Fragment>
  );
}
 
function Box({ children }) {
  return (
    <div
      style={{
        height: 30,
        lineHeight: "30px",
        textAlign: "center",
        background: "#eee",
      }}
    >
      {children}
    </div>
  );
}