All files / src/grid/_example GridExample.jsx

100% Statements 2/2
100% Branches 0/0
100% Functions 2/2
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104        1x                                                                                                                                                                           17x                          
import React, { Fragment } from "react";
import { Row, Col } from "@tencent/tea-component/lib/grid";
 
export default function GridExample() {
  return (
    <Fragment>
      <section>
        <Row>
          <Col span={24}>
            <Box>col-24</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={12}>
            <Box>col-12</Box>
          </Col>
          <Col span={12}>
            <Box>col-12</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={8}>
            <Box>col-8</Box>
          </Col>
          <Col span={16}>
            <Box>col-16</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={18}>
            <Box>col-18</Box>
          </Col>
        </Row>
      </section>
      <section>
        <Row>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
          <Col span={12}>
            <Box>col-12</Box>
          </Col>
          <Col span={6}>
            <Box>col-6</Box>
          </Col>
        </Row>
      </section>
    </Fragment>
  );
}
 
function Box({ children }) {
  return (
    <div
      style={{
        height: 30,
        lineHeight: "30px",
        textAlign: "center",
        background: "#eee",
      }}
    >
      {children}
    </div>
  );
}