Asides
Este conteúdo não está disponível em sua língua ainda.
To display secondary information alongside a page’s main content, use the <Aside>
component.
Import
Section titled “Import”import { Aside } from '@astrojs/starlight/components';
Display an aside (also known as “admonitions” or “callouts”) using the <Aside>
component.
An <Aside>
can have an optional type
attribute, which controls the aside’s color, icon, and default title.
import { Aside } from '@astrojs/starlight/components';
<Aside>Some content in an aside.</Aside>
<Aside type="caution">Some cautionary content.</Aside>
<Aside type="tip">
Other content is also supported in asides.
```js// A code snippet, for example.```
</Aside>
<Aside type="danger">Do not give your password to anyone.</Aside>
{% aside %}Some content in an aside.{% /aside %}
{% aside type="caution" %}Some cautionary content.{% /aside %}
{% aside type="tip" %}Other content is also supported in asides.
```js// A code snippet, for example.```{% /aside %}
{% aside type="danger" %}Do not give your password to anyone.{% /aside %}
Starlight also provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the <Aside>
component.
See the “Authoring Content in Markdown” guide for details of the custom syntax.
Use custom titles
Section titled “Use custom titles”Override the default aside titles by using the title
attribute.
import { Aside } from '@astrojs/starlight/components';
<Aside type="caution" title="Watch out!"> A warning aside *with* a custom title.</Aside>
{% aside type="caution" title="Watch out!" %}A warning aside *with* a custom title.{% /aside %}
<Aside>
Props
Section titled “<Aside> Props”Implementation: Aside.astro
The <Aside>
component accepts the following props:
type: 'note' | 'tip' | 'caution' | 'danger'
default: 'note'
The type of aside to display:
note
asides (the default) are blue and display an information icon.tip
asides are purple and display a rocket icon.caution
asides are yellow and display a triangular warning icon.danger
asides are red and display an octagonal warning icon.
type: string
The title of the aside to display.
If title
is not set, the default title for the current aside type
will be used.