ActionSheet 操作列表

使用场景

展示一组快捷操作。

示例

基本用法

noInline

const dataSource = [ { label: '同意', key: 'accept' }, { label: '拒绝', key: 'reject' }, { label: '转发', key: 'forward' }, { label: '删除', key: 'delete' }, ] ; function Basic() { return ( <ActionSheet target={<Button>选择操作</Button>} title="选择你的操作" dataSource={dataSource} onItemClick={console.log} /> ); } render(<Basic />)

const dataSource = [
  { label: '同意', key: 'accept' },
  { label: '拒绝', key: 'reject' },
  { label: '转发', key: 'forward' },
  { label: '删除', key: 'delete' },
] ;

function Basic() {
  return (
    <ActionSheet
      target={<Button>选择操作</Button>}
      title="选择你的操作"
      dataSource={dataSource}
      onItemClick={console.log}
    />
  );
}

render(<Basic />)

API

字段	描述
title	string 面板标题
target	ReactNode
renderTarget	(params_0: { ref: RefObject<any>; onClick(e: MouseEvent<Element, MouseEvent>): void; onMouseEnter(e: MouseEvent<Element, MouseEvent>): void; onMouseLeave(e: MouseEvent<...>): void; onFocus(e: FocusEvent<...>): void; onBlur(e: FocusEvent<...>): void; }, params_1: Pick<...>) => ReactNode
dataSource	MenuItem[] 菜单列表
onItemClick	(key: string, detail: { item: MenuItem; event: MouseEvent<HTMLDivElement, MouseEvent>; }) => void 点击列表项时的回调