Test: enhanced <Aside> Component • CCM

本页面展示了 <Aside> 组件的各种用法。

1. 标准卡片类型 (Standard Card Types)#

1.1. 注意 (Note)#

<Aside type='note' title='注意' style='card'>
  这是一个卡片样式的注意提示。适用于补充细节。
</Aside>

1.2. 信息 (Info)#

<Aside type='info' title='信息' style='card'>
  这是一个信息卡片。用于重要信息。
</Aside>

1.3. 提示 (Tip)#

<Aside type='tip' title='提示' style='card'>
  一个有用的提示或建议。
</Aside>

1.4. 警告 (Warning)#

<Aside type='warning' title='警告' style='card'>
  关于潜在问题的警告，需要谨慎。
</Aside>

1.5. 警示 (Caution)#

<Aside type='caution' title='警示' style='card'>
  用于可能产生负面后果的操作。
</Aside>

1.6. 重要 (Important)#

<Aside type='important' title='重要' style='card'>
  用于不应错过的重要信息。
</Aside>

1.7. 引用 (Quote)#

<Aside type='quote' title='引用' style='card'>
  引用卡片用于展示引用的内容。
</Aside>

2. 属性使用示例 (Attribute Usage Examples)#

2.1. 可折叠 (Collapsible)#

<Aside type='note' title='初始折叠' open={false} style='card'>
  此内容最初是隐藏的。点击可查看。
</Aside>

<Aside type='info' title='初始展开' open={true} style='card'>
  此内容最初是可见的。您可以折叠它。
</Aside>

2.2. 自定义图标与标题 (Custom Icons & Titles)#

2.2.1. Emoji 图标#

<Aside type="info" icon="💡" title="Emoji 图标" style='card'>
  使用 `icon` 属性设置一个表情符号作为图标。
</Aside>

2.2.2. 具名图标#

<Aside type="tip" icon="heart" title="具名图标" style='card'>
  您也可以使用项目图标库中的任何图标名称（例如 `heart`）。
</Aside>

2.3. 极简样式 (Minimalist Styles)#

2.3.1. 无类型徽章#

<Aside type='info' title='无类型徽章' showTypeBadge={false} style='card'>
  有时您只想要一个图标和一个标题。
</Aside>

2.3.2. 无标题仅徽章#

<Aside type='tip' showTypeBadge={true} style='card'>
  这也是可能的。
</Aside>

2.3.2. 无标题无徽章#

<Aside type='tip' showTypeBadge={false} style='card'>
  这也是可能的。
</Aside>

2.4. 嵌套 Aside (Nested Asides)#

<Aside type='important' title='外部 Aside' style='card'>
  这是外部组件。
  <Aside type='warning' title='内部 Aside' style='solid'>
    这是一个嵌套的 Aside。请注意，过度嵌套可能会使视觉变得混乱。
  </Aside>
</Aside>

2.5. 实心样式示例 (Solid Style Examples)#

2.5.1. 实心注意#

<Aside type='note' title='实心注意'>
  一个简单的实心样式注意提示。
</Aside>

2.5.2. 实心警告 (可折叠)#

<Aside type='warning' title='实心警告' open={false}>
  一个可折叠的实心样式警告。
</Aside>

3. 具名插槽解析行为 (Named Slot Parsing Behavior)#

3.1. 空行问题 (Empty Line Issue)#

当您使用具名插槽（例如 <span slot="title">...</span>）并且其后紧跟着一行普通文本而没有空行时，MDX 解析器可能会错误地将插槽内容解释为组件默认内容的一部分，从而不会出现在组件的指定位置（例如，Aside 组件的标题栏）。

3.1.1. 问题用法#

1
<Aside type='warning' style='card' >
2
<span slot="title">此标题不会出现在标题栏中</span>
3

4
这段普通文本紧随插槽内容。
5
</Aside>

3.1.2. 带空行的正确用法#

在具名插槽内容后添加一个空行，有助于 MDX 解析器正确识别具名插槽，确保其内容出现在组件的指定插槽区域。

1
<Aside type='tip' style='card' >
2
<span slot="title">此标题将出现在标题栏中</span>
3

4
这段普通文本与插槽内容之间有一个空行。
5
</Aside>

3.2. 块级内容后的正确用法 (Correct Usage with Block-Level Content)#

当具名插槽后跟一个块级元素（例如代码块或 MDX 标题）时，即使没有空行，具名插槽通常也会被正确解析，因为块级元素提供了清晰的边界。

3.2.1. 代码块后#

<Aside type='info' style='card' >
<span slot="title">此标题也将出现在标题栏中</span>
```js
console.log('Code block follows the slot.')
```
</Aside>

3.2.2. MDX 标题后#

<Aside type='info' style='card' >
<span slot="title">此标题也将出现在标题栏中</span>
#### 一个 MDX 标题
</Aside>