ActionList 快捷操作

使用场景

展示一组快捷操作。

示例

基本用法

noInline

const actions = [ { label: '编辑', key: 'edit', }, { label: '删除', key: 'remove', confirm: true, }, { label: '更多', key: 'more', children: [ { label: '同意', key: 'approve' }, { label: '拒绝', key: 'reject' }, { label: '转发', key: 'forward' }, ], }, ]; const Basic = () => <ActionList actions={actions} onSelect={console.log} />; render(<Basic />)

const actions = [
  {
    label: '编辑',
    key: 'edit',
  },
  {
    label: '删除',
    key: 'remove',
    confirm: true,
  },
  {
    label: '更多',
    key: 'more',
    children: [
      { label: '同意', key: 'approve' },
      { label: '拒绝', key: 'reject' },
      { label: '转发', key: 'forward' },
    ],
  },
];

const Basic = () => <ActionList actions={actions} onSelect={console.log} />;

render(<Basic />)

二次确认

inline

() => { return ( <ActionList actions={[ { label: '编辑', key: 'edit', }, { label: '删除', key: 'remove', confirm: '确认删除吗？', }, ]} onSelect={console.log} /> ); }

() => {
  return (
    <ActionList
      actions={[
        {
          label: '编辑',
          key: 'edit',
        },
        {
          label: '删除',
          key: 'remove',
          confirm: '确认删除吗？',
        },
      ]}
      onSelect={console.log}
    />
  );
}

隐藏分隔线

noInline

const actions = [ { label: '编辑', key: 'edit', }, { label: '删除', key: 'remove', confirm: true, }, { label: '更多', key: 'more', children: [ { label: '同意', key: 'approve' }, { label: '拒绝', key: 'reject' }, { label: '转发', key: 'forward' }, ], }, ]; const HideSeparator = () => { return <ActionList hasSeparator={false} actions={actions} onSelect={console.log} />; }; render(<HideSeparator />)

const actions = [
  {
    label: '编辑',
    key: 'edit',
  },
  {
    label: '删除',
    key: 'remove',
    confirm: true,
  },
  {
    label: '更多',
    key: 'more',
    children: [
      { label: '同意', key: 'approve' },
      { label: '拒绝', key: 'reject' },
      { label: '转发', key: 'forward' },
    ],
  },
];

const HideSeparator = () => {
  return <ActionList hasSeparator={false} actions={actions} onSelect={console.log} />;
};

render(<HideSeparator />)

图标用法

noInline

const actions = [ { label: '编辑', key: 'edit', }, { label: '删除', key: 'remove', confirm: true, }, { label: '更多', key: 'more', children: [ { label: '同意', key: 'approve' }, { label: '拒绝', key: 'reject' }, { label: '转发', key: 'forward' }, ], }, ]; const Icons = () => { const actions = [ { key: 'add', icon: 'add' }, { key: 'print', icon: 'print' }, { key: 'import', icon: 'import' }, ] ; return <ActionList actions={actions} onSelect={console.log} />; }; render(<Icons />)

const actions = [
  {
    label: '编辑',
    key: 'edit',
  },
  {
    label: '删除',
    key: 'remove',
    confirm: true,
  },
  {
    label: '更多',
    key: 'more',
    children: [
      { label: '同意', key: 'approve' },
      { label: '拒绝', key: 'reject' },
      { label: '转发', key: 'forward' },
    ],
  },
];

const Icons = () => {
  const actions = [
    { key: 'add', icon: 'add' },
    { key: 'print', icon: 'print' },
    { key: 'import', icon: 'import' },
  ] ;

  return <ActionList actions={actions} onSelect={console.log} />;
};

render(<Icons />)

自定义渲染

inline

() => { const actions2 = [ { key: 'custom1', render: ({ onClick }) => <button onClick={onClick}>自定义按钮</button>, }, { key: 'custom2', render: ({ onClick }) => <button onClick={onClick}>自定义按钮</button>, }, ]; return <ActionList actions={actions2} onSelect={console.log} />; }

() => {
  const actions2 = [
    {
      key: 'custom1',
      render: ({ onClick }) => <button onClick={onClick}>自定义按钮</button>,
    },
    {
      key: 'custom2',
      render: ({ onClick }) => <button onClick={onClick}>自定义按钮</button>,
    },
  ];

  return <ActionList actions={actions2} onSelect={console.log} />;
}

API

字段	描述
actions	ActionListItem[] 行动点列表
onSelect	(key: string, detail?: any) => void 用户选择行动点时的回调
hasSeparator	boolean 是否有分割线
className	string