Вкладки

Пример

pnpm – быстрый и экономичный в использовании дискового пространства менеджер пакетов.

Реализация

По умолчанию

import { Tabs } from 'nextra/components'
 
<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tabs.Tab>**pnpm** – быстрый и экономичный в использовании дискового пространства менеджер пакетов.</Tabs.Tab>
  <Tabs.Tab>**npm** – это менеджер пакетов для языка программирования JavaScript.</Tabs.Tab>
  <Tabs.Tab>**Yarn** – это система пакетирования программного обеспечения.</Tabs.Tab>
</Tabs>

Выбранная вкладка

Свойство defaultIndex позволяет установить вкладку, которая будет отображаться по умолчанию. Например, в данном случае:

import { Tabs } from 'nextra/components'
 
<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
  ...
</Tabs>

по умолчанию будет отображаться вкладка npm:

Выноски Карточки