-
-
Notifications
You must be signed in to change notification settings - Fork 572
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
292 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 /> |