test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:48:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(rightIcon): 为action组建扩展右侧icon，满足按钮左右均可以设置icon功能 (#2535)

Browse Source 
Co-authored-by: chenyang.e <chenyang.e@yuewen.com>
This commit is contained in:
hellozqy 2021-09-10 13:03:37 +08:00 committed by GitHub
parent 3e0f1bf790
commit 89b23d9b8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/zh-CN/components/action.md
View File

@ -750,6 +750,8 @@ props.onAction(event, {
| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |
| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |
| iconClassName | `string` | - | 给图标上添加类名。 |
| rightIcon | `string` | - | 在按钮文本右侧设置图标，例如`fa fa-plus`。 |
| rightIconClassName | `string` | - | 给右侧图标上添加类名。 |
| active | `boolean` | - | 按钮是否高亮。 |
| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |

37
src/renderers/Action.tsx
View File

@ -23,7 +23,17 @@ export interface ButtonSchema extends BaseSchema {
/**
* icon 上的css 类名
*/
iconClassName?: SchemaClassName;
iconClassName?: SchemaClassName;
/**
* 右侧按钮图标， iconfont 的类名
*/
rightIcon?: SchemaIcon;
/**
* 右侧 icon 上的 css 类名
*/
rightIconClassName?: SchemaClassName;
/**
* 按钮文字
@ -323,6 +333,7 @@ const ActionProps = [
'actionType',
'label',
'icon',
'rightIcon',
'reload',
'target',
'close',
@ -354,17 +365,17 @@ import {BadgeSchema, withBadge} from '../components/Badge';
import {str2AsyncFunction} from '../utils/api';
export interface ActionProps
extends Omit<ButtonSchema, 'className' | 'iconClassName'>,
extends Omit<ButtonSchema, 'className' | 'iconClassName' | 'rightIconClassName'>,
ThemeProps,
Omit<AjaxActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<UrlActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<LinkActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<DialogActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<DrawerActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<CopyActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<ReloadActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<EmailActionSchema, 'type' | 'className' | 'iconClassName'>,
Omit<OtherActionSchema, 'type' | 'className' | 'iconClassName'> {
Omit<AjaxActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<UrlActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<LinkActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<DialogActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<DrawerActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<CopyActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<ReloadActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<EmailActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'>,
Omit<OtherActionSchema, 'type' | 'className' | 'iconClassName' | 'rightIconClassName'> {
actionType: any;
onAction?: (
e: React.MouseEvent<any> | void | null,
@ -493,6 +504,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
type,
icon,
iconClassName,
rightIcon,
rightIconClassName,
primary,
size,
level,
@ -534,6 +547,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
}
const iconElement = generateIcon(cx, icon, 'Button-icon', iconClassName);
const rightIconElement = generateIcon(cx, rightIcon, 'Button-icon', rightIconClassName);
return (
<Button
@ -560,6 +574,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
>
{iconElement}
{label ? <span>{filter(String(label), data)}</span> : null}
{rightIconElement}
</Button>
);
}