Skip to content

Commit

Permalink
Merge branch 'main' into patch-1
Browse files Browse the repository at this point in the history
  • Loading branch information
HiDeoo authored Sep 26, 2024
2 parents c17bef5 + 295100d commit ff4e209
Show file tree
Hide file tree
Showing 3 changed files with 292 additions and 0 deletions.
145 changes: 145 additions & 0 deletions docs/src/content/docs/es/components/link-buttons.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
---
title: Botones de enlace
description: Aprende a crear botones de enlace en Starlight para enlaces de llamada a la acción visualmente distintos.
---

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

Para mostrar enlaces de llamada a la acción visualmente distintos, usa el componente `<LinkButton>`.

import Preview from '~/components/component-preview.astro';

<Preview>

<LinkButton slot="preview" href="/es/getting-started/">
Lee la documentación
</LinkButton>

</Preview>

## Importación

```tsx
import { LinkButton } from '@astrojs/starlight/components';
```

## Uso

Usa el componente `<LinkButton>` para mostrar un enlace de llamada a la acción visualmente distinto.
Un botón de enlace es útil para dirigir a los usuarios al contenido más relevante o accionable y se usa a menudo en páginas de destino.

Un `<LinkButton>` requiere un atributo [`href`](#href).
Opcionalmente, personaliza la apariencia del botón de enlace usando el atributo [`variant`](#variant), que se puede establecer en `primary` (el valor predeterminado), `secondary` o `minimal`.

<Preview>

```mdx
import { LinkButton } from '@astrojs/starlight/components';

<LinkButton href="/es/getting-started/">Comienza</LinkButton>
<LinkButton href="/es/reference/configuration/" variant="secondary">
Referencia de configuración
</LinkButton>
```

<Fragment slot="markdoc">

```markdoc
{% linkbutton href="/es/getting-started/" %}Comienza{% /linkbutton %}
{% linkbutton href="/es/reference/configuration/" variant="secondary" %}
Referencia de configuración
{% /linkbutton %}
```

</Fragment>

<Fragment slot="preview">
<LinkButton href="/es/getting-started/">Comienza</LinkButton>
<LinkButton href="/es/reference/configuration/" variant="secondary">
Referencia de configuración
</LinkButton>
</Fragment>

</Preview>

### Agregar iconos a los botones de enlace

Incluye un icono en un botón de enlace usando el atributo [`icon`](#icon) establecido en el nombre de [uno de los iconos integrados de Starlight](/es/reference/icons/#todos-los-iconos).

El atributo [`iconPlacement`](#iconplacement) se puede usar para colocar el icono antes del texto estableciéndolo en `start` (el valor predeterminado es `end`).

<Preview>

```mdx {6-7}
import { LinkButton } from '@astrojs/starlight/components';

<LinkButton
href="https://docs.astro.build"
variant="secondary"
icon="external"
iconPlacement="start"
>
Relacionado: Astro
</LinkButton>
```

<Fragment slot="markdoc">

```markdoc {4-5}
{% linkbutton
href="https://docs.astro.build"
variant="secondary"
icon="external"
iconPlacement="start" %}
Relacionado: Astro
{% /linkbutton %}
```

</Fragment>

<LinkButton
slot="preview"
href="https://docs.astro.build"
variant="secondary"
icon="external"
iconPlacement="start"
>
Relacionado: Astro
</LinkButton>

</Preview>

## Props de `<LinkButton>`

**Implementación:** [`LinkButton.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkButton.astro)

El componente `<LinkButton>` acepta las siguientes props y también cualquier [otro atributo `<a>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/a):

### `href`

**requerido**
**tipo:** `string`

El URL al que apunta el botón de enlace.

### `variant`

**tipo:** `'primary' | 'secondary' | 'minimal'`
**por defecto:** `'primary'`

La apariencia del botón de enlace.
Establece `primary` para un enlace de llamada a la acción prominente que usa el color de acento del tema, `secondary` para un enlace menos prominente o `minimal` para un enlace con un estilo mínimo.

### `icon`

**tipo:** `string`

Un botón de enlace puede incluir un atributo `icon` establecido en el nombre de [uno de los iconos integrados de Starlight](/es/reference/icons/#todos-los-iconos).

### `iconPlacement`

**tipo:** `'start' | 'end'`
**por defecto:** `'end'`

Determina la ubicación del icono en relación con el texto del botón de enlace.
128 changes: 128 additions & 0 deletions docs/src/content/docs/es/components/link-cards.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
---
title: Tarjetas de enlace
description: Aprende a mostrar enlaces de forma destacada como tarjetas en Starlight.
sidebar:
order: 3
---

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

Para mostrar enlaces a diferentes páginas de forma destacada, utiliza el componente `<LinkCard>`.

import Preview from '~/components/component-preview.astro';

<Preview>

<LinkCard
slot="preview"
title="Personalización de Starlight"
description="Aprende a personalizar tu sitio de Starlight con estilos personalizados, fuentes y más."
href="/es/guides/customization/"
/>

</Preview>

## Importación

```tsx
import { LinkCard } from '@astrojs/starlight/components';
```

## Uso

Mostrar un enlace de forma destacada utilizando el componente `<LinkCard>`.
Cada `<LinkCard>` requiere un atributo [`title`](#title) y un atributo [`href`](#href).

<Preview>

```mdx
import { LinkCard } from '@astrojs/starlight/components';

<LinkCard
title="Creación de contenido en Markdown"
href="/es/guides/authoring-content/"
/>
```

<Fragment slot="markdoc">

```markdoc
{% linkcard title="Creación de contenido en Markdown" href="/es/guides/authoring-content/" /%}
```

</Fragment>

<LinkCard
slot="preview"
title="Creación de contenido en Markdown"
href="/es/guides/authoring-content/"
/>

</Preview>

### Agregar una descripción de enlace

Agrega una descripción breve a una tarjeta de enlace utilizando el atributo [`description`](#description).

<Preview>

```mdx {6}
import { LinkCard } from '@astrojs/starlight/components';

<LinkCard
title="Internacionalización"
href="/es/guides/i18n/"
description="Configura Starlight para admitir varios idiomas."
/>
```

<Fragment slot="markdoc">

```markdoc {4}
{% linkcard
title="Internacionalización"
href="/es/guides/i18n/"
description="Configura Starlight para admitir varios idiomas." /%}
```

</Fragment>

<LinkCard
slot="preview"
title="Internacionalización"
href="/es/guides/i18n/"
description="Configura Starlight para admitir varios idiomas."
/>

</Preview>

### Agrupar tarjetas de enlace

Muestra varias tarjetas de enlace una al lado de la otra cuando hay suficiente espacio agrupándolas con el componente [`<CardGrid>`](/es/components/card-grids/).
Ve la guía [“Agrupar tarjetas de enlace”](/es/components/card-grids/#agrupar-tarjetas) para un ejemplo.

## Props de `<LinkCard>`

**Implementación:** [`LinkCard.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkCard.astro)

El componente `<LinkCard>` acepta las siguientes propiedades, así como todos los demás atributos de los elementos [`<a>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/a):

### `title`

**requerido**
**tipo:** `string`

El título de la tarjeta de enlace a mostrar.

### `href`

**requerido**
**tipo:** `string`

El URL al que enlazar cuando se interactúa con la tarjeta.

### `description`

**tipo:** `string`

Una descripción opcional para mostrar debajo del título.
19 changes: 19 additions & 0 deletions docs/src/content/docs/es/reference/icons.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: Referencia de iconos
description: Una descripción general de todos los iconos disponibles en Starlight.
---

Starlight proporciona un conjunto de iconos integrados que puedes mostrar en tu contenido usando el componente `<Icon>`.

## Usar iconos

Los iconos se pueden mostrar usando el componente [`<Icon>`](/es/components/icons/).
Estos también se utilizan a menudo en otros componentes, como [tarjetas](/es/components/cards/) o configuraciones como [acciones de hero](/es/reference/frontmatter/#hero).

## Todos los iconos

Una lista de todos los iconos disponibles se muestra a continuación con sus nombres asociados. Haz clic en un icono para copiar su nombre al portapapeles.

import IconsList from '~/components/icons-list.astro';

<IconsList />

0 comments on commit ff4e209

Please sign in to comment.