Carbon Components Svelte 组件库深度解析：核心组件API详解

Carbon Components Svelte 是基于IBM Carbon设计系统的Svelte实现版本，提供了一系列高质量的UI组件。本文将深入解析该库中核心组件的API设计和使用方法。

一、Accordion 手风琴组件

1.1 Accordion 基础组件

Accordion组件提供了可折叠内容区域的功能，主要属性包括：

• align: 控制展开图标对齐方式（"start"或"end"）
• size: 设置尺寸（"sm"或"xl"）
• disabled: 禁用整个手风琴
• skeleton: 显示骨架屏状态

<script>
  import { Accordion } from 'carbon-components-svelte';
</script>

<Accordion align="start" size="sm">
  <!-- 子内容 -->
</Accordion>

1.2 AccordionItem 子项组件

每个可折叠区域使用AccordionItem组件：

• title: 设置标题文本
• open: 控制是否默认展开
• disabled: 禁用单个项
• iconDescription: 设置展开图标的ARIA标签

<AccordionItem title="Section 1" open={true}>
  <p>这里是可折叠的内容</p>
</AccordionItem>

1.3 骨架屏状态

AccordionSkeleton组件用于加载状态展示：

• count: 控制渲染的项数
• open: 控制第一个项是否显示为展开状态

二、Breadcrumb 面包屑导航

2.1 基础面包屑

Breadcrumb组件提供导航路径展示：

• noTrailingSlash: 隐藏末尾斜杠
• skeleton: 显示骨架屏状态

<Breadcrumb>
  <BreadcrumbItem href="/">首页</BreadcrumbItem>
  <BreadcrumbItem href="/products">产品</BreadcrumbItem>
  <BreadcrumbItem isCurrentPage={true}>详情</BreadcrumbItem>
</Breadcrumb>

2.2 BreadcrumbItem 子项

• href: 设置链接地址
• isCurrentPage: 标记当前页面项

三、Button 按钮组件

Button组件提供了多种样式和尺寸：

• kind: 按钮类型（primary/secondary/tertiary等）
• size: 尺寸（default/field/small等）
• expressive: 使用更大的字体
• isSelected: 选中状态（仅图标按钮）
• icon: 设置图标
• iconDescription: 图标ARIA标签

<Button kind="primary" size="lg" icon={Add16}>
  主要按钮
</Button>

四、Breakpoint 响应式断点

Breakpoint组件用于响应式布局：

• size: 当前断点大小（sm/md/lg/xlg/max）
• sizes: 包含所有断点状态的对象

<Breakpoint let:size let:sizes>
  {#if sizes.lg}
    <p>在大屏幕上显示</p>
  {/if}
</Breakpoint>

五、AspectRatio 宽高比组件

AspectRatio组件用于保持特定宽高比：

• ratio: 设置比例（2x1/16x9/4x3等）

<AspectRatio ratio="16x9">
  <img src="hero-image.jpg" alt="Hero image" />
</AspectRatio>

最佳实践建议

1. 无障碍性：始终为图标按钮提供iconDescription
2. 响应式设计：合理使用Breakpoint组件实现响应式布局
3. 加载状态：在数据加载时使用骨架屏提升用户体验
4. 组件组合：将基础组件组合成更复杂的UI模块

通过合理使用这些组件，开发者可以快速构建符合Carbon设计规范的现代化Web应用界面。每个组件都经过精心设计，既保证了视觉一致性，又提供了足够的灵活性来满足各种业务需求。