tabs | components

Usage

Usage for mdx

import { Tabs, TabItem } from '@shawspring/astro-components';

<Tabs>
<TabItem label="counterStore.ts">
```ts
  ...
```
</TabItem>
<TabItem label="counterStore.js">
```js
  ...
```
</TabItem>
</Tabs>

The code above generates the following on the page:

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount(state) {
      return state.count * 2
    },
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },
})

// 你可以在 JavaScript 中使用 JSDoc (https://jsdoc.app/tags-returns.html)
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // 类型是自动推断出来的，因为我们没有使用 `this`
    doubleCount: (state) => state.count * 2,
    // 这里我们需要自己添加类型(在 JS 中使用 JSDoc)
    // 可以用 this 来引用 getter
    /**
     * 返回 count 的值乘以 2 加 1
     *
     * @returns {number}
     */
    doubleCountPlusOne() {
      // 自动补全 ✨
      return this.doubleCount + 1
    },
  },
})

Usage for astro

---
import {Tabs, TabItem} from '@shawspring/astro-components';
---
<Tabs>
    <TabItem label="npm">
        <div class="h-8 ring-1">
            <span class="font-bold text-amber-500">npm</span> add @shawspring/astro-components
        </div>
    </TabItem>
    <TabItem label="yarn">
        <div class="h-16 ring-1">
            <span class="font-bold text-amber-500">yarn</span> add @shawspring/astro-components
        </div>
    </TabItem>
</Tabs>

npm add @shawspring/astro-components

yarn add @shawspring/astro-components

Props

export interface Props {
  /**
   * All `<Tabs>` on a page with the same `syncKey` value will display the same active panel.
   */
  syncKey?: string;
  /**
   * at least one children required for slot
   */
  children: any;
  /**
   *  custom class names appended to the component
   */
  class?: string;
  /**
   * custom class names appended to the content of `<TabItem>`
   */
  itemClass?: string;
}

Synced tabs

All <Tabs> on a page with the same syncKey value will display the same active panel.

<Tabs syncKey="pkg">
  <TabItem label="npm">
    ```bash
    npm install axios
    ```
  </TabItem>
  <TabItem label="yarn">
    ```bash
    yarn add axios
    ```
  </TabItem>
  <TabItem label="pnpm">
    ```bash
    pnpm add axios
    ```
  </TabItem>
  <TabItem label="bun">
    ```bash
    bun add axios
    ```
  </TabItem>
</Tabs>

<Tabs syncKey="pkg">
  <TabItem label="npm">...</TabItem>
  <TabItem label="yarn">...</TabItem>
  <TabItem label="pnpm">...</TabItem>
  <TabItem label="bun">...</TabItem>
</Tabs>

The code above generates the following on the page:

npm install axios

yarn add axios

pnpm add axios

bun add axios

npm create vue@latest

yarn create vue@latest

pnpm create vue@latest

bun create vue@latest