Apartados

Para mostrar información secundaria junto al contenido principal de una página, usa el componente <Aside>.

Preview

Nota

Incluye información no esencial y complementaria en un <Aside>.

Importación

import { Aside } from '@astrojs/starlight/components';

Uso

Muestra un apartado (también conocido como “admoniciones” o “llamadas”) usando el componente <Aside>.

Un <Aside> también puede tener un atributo opcional type, que controla el color, el icono y el título predeterminado del apartado.

MDX

import { Aside } from '@astrojs/starlight/components';

<Aside>Contenido en un apartado.</Aside>

<Aside type="caution">Contenido de precaución.</Aside>

<Aside type="tip">

Otro tipo de contenido también es compatible en los apartados.

```js
// Por ejemplo, un fragmento de código.
```

</Aside>

<Aside type="danger">No des tu contraseña a nadie.</Aside>

Markdoc

{% aside %}
Contenido en un apartado.
{% /aside %}

{% aside type="caution" %}
Contenido de precaución.
{% /aside %}

{% aside type="tip" %}
Otro tipo de contenido también es compatible en los apartados.

```js
// Por ejemplo, un fragmento de código.
```
{% /aside %}

{% aside type="danger" %}
No des tu contraseña a nadie.
{% /aside %}

Preview

Nota

Contenido en un apartado.

Precaución

Contenido de precaución.

Consejo

Otro tipo de contenido también es compatible en los apartados.

// Por ejemplo, un fragmento de código.

Peligro

No des tu contraseña a nadie.

Starlight también proporciona una sintaxis personalizada para renderizar apartados en Markdown y MDX como una alternativa al componente <Aside>. Ver la guía “Redacción de contenido en Markdown” para obtener detalles de la sintaxis personalizada.

Usa títulos personalizados

Sobreescribe los títulos predeterminados de los apartados usando el atributo title.

MDX

import { Aside } from '@astrojs/starlight/components';

<Aside type="caution" title="¡Cuidado!">
  Una advertencia *con* un título personalizado.
</Aside>

Markdoc

{% aside type="caution" title="¡Cuidado!" %}
Una advertencia *con* un título personalizado.
{% /aside %}

Preview

¡Cuidado!

Una advertencia con un título personalizado.

Usar iconos personalizados

Para sobreescribir los iconos predeterminados de los apartados, utiliza el atributo icon y asígnale el nombre de uno de los iconos integrados de Starlight.

MDX

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" icon="starlight">
  Una sugerencia *con* un icono personalizado.
</Aside>

Markdoc

{% aside type="tip" icon="starlight" %}
Una sugerencia *con* un icono personalizado.
{% /aside %}

Preview

Consejo

Una sugerencia con un icono personalizado.

Props de <Aside>

Implementación: Aside.astro

El componente <Aside> acepta las siguientes propiedades:

type

tipo: 'note' | 'tip' | 'caution' | 'danger'
por defecto: 'note'

El tipo de apartado a mostrar:

• apartados note (el predeterminado) son azules y muestran un icono de información.
• apartados tip son morados y muestran un icono de cohete.
• apartados caution son amarillos y muestran un icono de advertencia.
• apartados danger son rojos y muestran un icono de advertencia octogonal.

title

tipo: string

El título del apartado a mostrar. Si title no está establecido, se usará el título predeterminado para el type actual del apartado.

icon

tipo: StarlightIcon

Un apartado puede incluir un atributo icon con el nombre de uno de los iconos integrados de Starlight.