ant-design/components/alert/demo/action.md
jesse 4b3aa350b8
feat: Add action in Alert and replace with flexbox layout (#25892)
* feat: Add action in Alert and replace with flexbox layout

* update

* update test

* doc

* Revert "update"

This reverts commit aef6e135a757341becdb01082238d48f7648ec5e.

* Update index.less

* Update index.less

* update test

* Update index.test.tsx.snap

* @alert-closable-padding-right

* Update index.less

* correct top of icon

* correct top of close icon

* fix @alert-closable-padding-right

* update

* doc

* Update components/alert/demo/action.md

Co-authored-by: 偏右 <afc163@gmail.com>

* Remove duplicate css

* Simplify styles of close-icon

* font size of close icon

* update test

* update test

* Remove unused less var

Co-authored-by: 偏右 <afc163@gmail.com>
2020-11-30 11:04:56 +08:00

1.4 KiB

order title
13
zh-CN en-US
操作 Custom action

zh-CN

可以在右上角自定义操作项。

en-US

Custom action.

import React from 'react';
import { Alert, Button, Space } from 'antd';

ReactDOM.render(
  <>
    <Alert
      message="Success Tips"
      type="success"
      showIcon
      action={
        <Button size="small" type="text">
          UNDO
        </Button>
      }
      closable
    />
    <Alert
      message="Error Text"
      showIcon
      description="Error Description Error Description Error Description Error Description"
      type="error"
      action={
        <Button size="small" danger>
          Detail
        </Button>
      }
    />
    <Alert
      message="Warning Text"
      type="warning"
      action={
        <Space>
          <Button size="small" type="ghost">
            Done
          </Button>
        </Space>
      }
      closable
    />
    <Alert
      message="Info Text"
      description="Info Description Info Description Info Description Info Description"
      type="info"
      action={
        <Space direction="vertical">
          <Button size="small" type="primary">
            Accept
          </Button>
          <Button size="small" danger type="ghost">
            Decline
          </Button>
        </Space>
      }
      closable
    />
  </>,
  mountNode,
);