<Tabs />

Componente Tabs

Docusaurus nos provee del componente <Tabs>.

Nosotros la modificamos un poco para que se vea mejor en nuestra documentación.

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
</Tabs>

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

Custom Tabs

Es posible agregarle atributos a los componentes <Tabs> y <TabItem> para que se vean de una forma diferente. Después de agregarle los atributos, se pueden modificar los estilos en el archivo custom.css.

<Tabs>
  <TabItem value="tab-1" label="Tab-1" attributes={{className: 'aurales'}} default>
    <Highlight color='#5700ae'>Esto es un ejemplo de un TabItem personalizado. (1) </Highlight>
  </TabItem>
  <TabItem value="tab-2" label="Tab-2" attributes={{className: 'fenix'}}>
    <Highlight color='#570000'>Esto es **otro** ejemplo de un TabItem personalizado. (2)</Highlight>
  </TabItem>
</Tabs>

Tab-1

Esto es un ejemplo de un TabItem personalizado. (1)

Tab-2

Esto es otro ejemplo de un TabItem personalizado. (2)