Tabs

OSごとの手順や、コードとプレビューの切り替えなど、コンテンツをタブで分けて表示するためのコンポーネントです。

Usage

npm install ravin

pnpm add ravin

bun add ravin

function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

<template>
  <h1>Hello, {{ name }}!</h1>
</template>
<script setup>
const props = defineProps(['name']);
</script>

<script>
  export let name;
</script>

<h1>Hello, {name}!</h1>

コンポーネントのデモ用途などで、プレビュー画面とソースコードをタブで分けることができます。

---
import Button from '@/components/Button.astro';
---

<Button href="#" type="primary">プレビューボタン</Button>