mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
4b3aa350b8
* 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>
1.4 KiB
1.4 KiB
order | title | ||||
---|---|---|---|---|---|
13 |
|
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,
);