All files / src/alert/_example AlertComposingExample.jsx

100% Statements 2/2
50% Branches 1/2
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            1x                                                     1x                          
import React from "react";
import { Alert } from "@tencent/tea-component/lib/alert";
import { List } from "@tencent/tea-component/lib/list";
import { Collapse } from "@tea/component/collapse";
 
export default function AlertComposingExample() {
  return (
    <>
      <Alert>
        <h4 style={{ marginBottom: 8 }}>重要声明</h4>
        <p>本功能将在 2019 年 2 月 29 日下线,请注意做好下列迁移工作:</p>
        <List type="bullet">
          <List.Item>小程序云服务器有奖内测中,即刻成为产品体验官</List.Item>
          <List.Item>
            云服务器限时秒杀,首购1C1G仅需99元/年,还有多款配置供您选择
          </List.Item>
        </List>
      </Alert>
      <Alert type="warning">
        <h4 style={{ marginBottom: 8 }}>重要声明</h4>
        <p>本功能将在 2019 年 2 月 29 日下线,请注意做好下列迁移工作:</p>
        <List type="bullet">
          <List.Item>小程序云服务器有奖内测中,即刻成为产品体验官</List.Item>
          <List.Item>
            云服务器限时秒杀,首购1C1G仅需99元/年,还有多款配置供您选择
          </List.Item>
          <List.Item>
            让企业普惠上云,云服务器最低至2.5折,还有更多产品更低折扣满足您的需求
          </List.Item>
        </List>
        <Collapse iconPosition="right" style={{ marginTop: 8 }}>
          <Collapse.Panel
            id="1"
            title={active => (active ? "收起" : "展开")}
            position="top"
          >
            <List type="bullet" style={{ marginTop: 8 }}>
              <List.Item>更多提示语</List.Item>
              <List.Item>More</List.Item>
            </List>
          </Collapse.Panel>
        </Collapse>
      </Alert>
    </>
  );
}