AI 매직 3DDocs탭
지속성 및 공유 값과 같은 추가 기능을 갖춘 Radix UI로 구축된 탭 구성 요소입니다.
Hello World in Javascript
Hello World in Rust
Also works if items are not the same
Value is shared! Try refresh and see if the value is persisted
Value is shared! Try refresh and see if the value is persisted
사용법
MDX 문서로 가져옵니다.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>value 없음
value가 없으면 하위 인덱스에서 감지합니다. 다시 렌더링할 때 오류가 발생할 수 있으므로 탭이 변경될 수 있는 경우 권장되지 않습니다.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>재렌더링이 포함된 #### Demo
Javascript is weird
Rust is fast
공유가치
groupId 속성을 전달하면 모든 탭에서 동일한 값을 공유할 수 있습니다.
아이디
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>지속적
persist 속성을 전달하여 지속성을 활성화할 수 있습니다. 값은
ID를 키로 사용하여 localStorage에 저장됩니다.
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Percious는 id를 전달한 경우에만 작동합니다.
기본값
defaultIndex를 전달하여 기본값을 설정합니다.
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>탭으로 링크
특정 탭에 연결하려면 HTML id 속성을 사용하세요.
<Tabs items={['Javascript', 'Rust', 'C++']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>URL에 해시 #tab-cpp를 추가하고 다시 로드하면 C++ 탭이 활성화됩니다.
Javascript is weird
Rust is fast
Hello World
또한 Tabs 구성 요소에서 updateAnchor 속성을 true로 설정할 수 있습니다.
새 탭을 선택할 때마다 URL 해시를 자동으로 업데이트하려면 다음을 수행하세요.
<Tabs items={['Javascript', 'Rust', 'C++']} updateAnchor>
<Tab id="tab-js" value="Javascript">
Javascript is weird
</Tab>
<Tab id="tab-rs" value="Rust">
Rust is fast
</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>Hello!
World!
고급
내보낸 Primitive에서 직접 스타일이 지정된 Radix UI 기본 요소를 사용할 수 있습니다.
import { Primitive } from 'fumadocs-ui/components/tabs';
<Primitive.Tabs>
<Primitive.TabsList>
<Primitive.TabsTrigger />
</Primitive.TabsList>
<Primitive.TabsContent />
</Primitive.Tabs>