Pular para o conteúdo
Starlight

Componentes

Componentes te permitem facilmente reutilizar pedaços da UI ou estilizar consistentemente. Alguns exemplos são um cartão de link ou um embed do YouTube. Starlight suporta o uso de componentes em arquivos MDX e providencia alguns components comuns para você utilizar.

Aprenda mais sobre como construir componentes na documentação do Astro.

Utilizando um componente

Você pode utilizar um componente ao importá-lo em seu arquivo MDX e então renderizá-lo como uma tag JSX.

Elas se parecem com tags HTML porém começam com uma letra maiúscula correspondente ao nome na sua declaração import:

src/content/docs/index.mdx
---
title: Bem-vindo a minha documentação
---


import AlgumComponente from '../../components/AlgumComponente.astro';
import OutroComponente from '../../components/OutroComponente.astro';


<AlgumComponente prop="algo" />


<OutroComponente>
  Componentes também podem conter **conteúdo aninhado**.
</OutroComponente>

Já que Starlight é feito com Astro, você pode adicionar suporte para componentes feitos com qualquer framework de UI suportado (React, Preact, Svelte, Vue, Solid, Lit e Alpine) em seus arquivos MDX. Aprenda mais sobre como utilizar componentes no MDX na documentação do Astro.

Compatibilidade com os estilos do Starlight

Starlight aplica estilos padrões para seu conteúdo Markdown, como por exemplo, adicionando margem entre elementos. Se esses estilos conflitam com a aparência do seu componente, defina a classe not-content no seu componente para desabilitá-los.

src/components/Exemplo.astro
<div class="not-content">
  <p>Não é impactado pelos estilos padrões de conteúdo do Starlight.</p>
</div>

Componentes integrados

Starlight providencia alguns componentes integrados para casos de uso comuns em documentações. Esses componentes estão disponíveis através do pacote @astrojs/starlight/components.

Abas

Você pode mostrar uma interface com abas utilizando os componentes <Tabs> e <TabItem>. Cada <TabItem> tem que ter uma label para mostrar aos usuários.

import { Tabs, TabItem } from '@astrojs/starlight/components';


<Tabs>
  <TabItem label="Estrelas">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Luas">Io, Europa, Ganymede</TabItem>
</Tabs>

O código acima gera as seguintes abas na página:

Sirius, Vega, Betelgeuse

Cartões

Você pode mostrar conteúdo em uma caixa seguindo os estilos do Starlight utilizando o componente <Card>. Coloque múltiplos cartões no componente <CardGrid> para mostrar cartões lado a lado quando houver espaço suficiente.

Um <Card> precisa de um title e pode opcionalmente incluir o atributo icon para definir o nome de um dos ícones integrados do Starlight.

import { Card, CardGrid } from '@astrojs/starlight/components';


<Card title="Veja isso">Conteúdo interessante que você quer destacar.</Card>


<CardGrid>
  <Card title="Estrelas" icon="star">
    Sirius, Vega, Betelgeuse
  </Card>
  <Card title="Luas" icon="moon">
    Io, Europa, Ganymede
  </Card>
</CardGrid>

O código acima gera o seguinte na página:

Veja isso

Conteúdo interessante que você quer destacar.

Estrelas

Sirius, Vega, Betelgeuse

Luas

Io, Europa, Ganymede

Utilize o componente <LinkCard> para fazer um link proeminente para outras páginas.

Um <LinkCard> precisa de um title e um atributo href. Você pode opcionalmente incluir uma pequena description ou outros atributos de link como target.

Agrupe múltiplos componentes <LinkCard> em <CardGrid> para mostrar cartões lado a lado quando houver espaço suficiente.

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


<LinkCard
  title="Customizando Starlight"
  description="Aprenda como fazer seu site Starlight único com estilos customizados, fontes e mais."
  href="/pt-br/guides/customization/"
/>


<CardGrid>
  <LinkCard
    title="Escrevendo Markdown"
    href="/pt-br/guides/authoring-content/"
  />
  <LinkCard title="Componentes" href="/pt-br/guides/components/" />
</CardGrid>

O código acima gera o seguinte na página:

Customizando Starlight Aprenda como fazer seu site Starlight único com estilos customizados, fontes e mais.
Escrevendo Markdown
Componentes

Ícone

Starlight providencia um conjunto comum de ícones que você pode mostrar em seu conteúdo utilizando o componente <Icon>.

Cada <Icon> requer um name e pode opcionalmente incluir um atributo label, size e color.

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


<Icon name="star" color="goldenrod" size="2rem" />

O código acima gera o seguinte na página:

Todos os ícones

Uma lista de todos os ícones disponíveis é mostrada abaixo com seus nomes associados. Clique em um ícone para copiar o código do componente dele.