#ScrollArea 滚动区域

import { ScrollArea } from '@ifhover/leaf-ui';

export function ScrollAreaBasic() {
  return (
    <ScrollArea height={180} aria-label="项目列表">
      {Array.from({ length: 20 }, (_, i) => (
        <div key={String(i)} style={{ padding: '12px 16px' }}>
          项目 {i + 1}
        </div>
      ))}
    </ScrollArea>
  );
}

import { Card, ScrollArea, Space } from '@ifhover/leaf-ui';

export function ScrollAreaHorizontal() {
  return (
    <ScrollArea orientation="horizontal" aria-label="横向卡片">
      <Space size={12}>
        {['A', 'B', 'C', 'D', 'E'].map((name) => (
          <Card key={name} title={name} style={{ width: 180, flex: 'none' }}>
            横向浏览内容
          </Card>
        ))}
      </Space>
    </ScrollArea>
  );
}