# Actions 组件使用示例

以下为片段，实际页面请自行布局。

---

## 基础用法

```tsx
import { Actions } from '@alipay/agentic-design-mobile';

const actions = [
  { icon: 'Copy' as const, text: '复制', onClick: () => console.log('复制') },
  { icon: 'RefreshCcw' as const, text: '刷新', onClick: () => console.log('刷新') },
  { icon: 'SquareArrowOutUpRight' as const, text: '分享', onClick: () => console.log('分享') },
  { icon: 'Trash2' as const, text: '删除', onClick: () => console.log('删除') },
];

export function ActionsBasic() {
  return <Actions actions={actions} />;
}
```

---

## 最大显示数量

```tsx
import { Actions } from '@alipay/agentic-design-mobile';

const actions = [
  { icon: 'Copy' as const, text: '复制', onClick: () => {} },
  { icon: 'RefreshCcw' as const, text: '刷新', onClick: () => {} },
  { icon: 'SquareArrowOutUpRight' as const, text: '分享', onClick: () => {} },
  { icon: 'Trash2' as const, text: '删除', onClick: () => {} },
];

export function ActionsMaxCount() {
  return <Actions maxCount={2} actions={actions} />;
}
```

---

## 额外内容

```tsx
import { Actions } from '@alipay/agentic-design-mobile';

const actions = [
  { icon: 'Copy' as const, text: '复制', onClick: () => {} },
  { icon: 'Trash2' as const, text: '删除', onClick: () => {} },
];

export function ActionsExtra() {
  const extra = (
    <div style={{ borderRadius: '50%', border: '1px solid #eee', padding: '6px 8px' }}>额外内容</div>
  );
  return <Actions actions={actions} extra={extra} />;
}
```

---

## 方向

```tsx
import { Actions } from '@alipay/agentic-design-mobile';

const actions = [
  { icon: 'Copy' as const, text: '复制', onClick: () => {} },
  { icon: 'Trash2' as const, text: '删除', onClick: () => {} },
];

export function ActionsDirection() {
  const extra = <span style={{ padding: '6px 8px' }}>额外</span>;
  return <Actions actions={actions} direction="ltr" extra={extra} />;
}
```