# Prompts 组件使用示例

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

---

## 基础用法

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

const mockIconUrl =
  'https://mdn.alipayobjects.com/huamei_undf5z/afts/img/A*OgBJS5Bg-aAAAAAASMAAAAgAerOIAQ/original';

const items = [
  { label: '提示1', prompt: '提示1内容', icon: mockIconUrl, disabled: false },
  { label: '提示2', prompt: '提示2内容', icon: mockIconUrl, disabled: true },
  { label: '提示3', prompt: '提示3内容', icon: mockIconUrl, disabled: false },
];

export function PromptsBasic() {
  return <Prompts items={items} />;
}
```

---

## 水平换行

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

const items = Array.from({ length: 6 }, (_, i) => ({
  label: `提示${i + 1}`,
  prompt: `内容${i + 1}`,
  disabled: false,
}));

export function PromptsWrap() {
  return <Prompts items={items} direction="horizontal" wrap />;
}
```

---

## 垂直布局

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

const items = [
  { label: 'A', prompt: '提示A', disabled: false },
  { label: 'B', prompt: '提示B', disabled: false },
];

export function PromptsVertical() {
  return <Prompts items={items} direction="vertical" />;
}
```

---

## 自定义渲染

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

const items = [
  { label: '自定义1', prompt: 'p1', disabled: false },
  { label: '自定义2', prompt: 'p2', disabled: false },
];

export function PromptsItemRender() {
  return (
    <Prompts
      items={items}
      itemRender={(item) => (
        <div
          style={{
            width: 100,
            backgroundColor: '#eee',
            padding: '4px 8px',
            borderRadius: 4,
          }}
        >
          {item.label}
        </div>
      )}
    />
  );
}
```