PageSourceSearch

https://knokuae.ai/assets/Tabs-Ca4XY8ug.js

js knokuae.ai collected 2026-10-05 14:01:28 UTC 6,304 bytes, 1 lines download raw bytes

1import{j as e}from"./index-DQkzoM3f.js";import{f as m,h as t,C as l}from"./DefaultLayout-BUFb5-iV.js";import"./index.esm-DWQZSujt.js";import{C as b,a as n}from"./CRow-zMswK_D2.js";import{C as i}from"./CCard-CaRIrT1p.js";import{C as r}from"./CCardHeader-CP5p4F1z.js";import{C as c}from"./CCardBody-Bw4Np1ZW.js";import{C as d,a as o,b as a,c as s}from"./CTabs-ENomckt1.js";import"./index-rF0CLpYz.js";import"./cil-user-Ddrdy7PS.js";import"./getTransitionDurationFromElement-MKUqmAos.js";const T=()=>e.jsxs(b,{children:[e.jsxs(n,{xs:12,children:[e.jsx(m,{href:"components/tabs/"}),e.jsxs(i,{className:"mb-4",children:[e.jsx(r,{children:e.jsx("strong",{children:"React Tabs"})}),e.jsxs(c,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["The basic React tabs example uses the ",e.jsx("code",{children:'variant="tabs"'})," props to generate a tabbed interface."]}),e.jsx(t,{href:"components/tabs/#example",children:e.jsxs(d,{activeItemKey:"profile",children:[e.jsxs(o,{variant:"tabs",children:[e.jsx(a,{itemKey:"home",children:"Home"}),e.jsx(a,{itemKey:"profile",children:"Profile"}),e.jsx(a,{itemKey:"contact",children:"Contact"}),e.jsx(a,{disabled:!0,itemKey:"disabled",children:"Disabled"})]}),e.jsxs(l,{children:[e.jsx(s,{className:"p-3",itemKey:"home",children:"Home tab content"}),e.jsx(s,{className:"p-3",itemKey:"profile",children:"Profile tab content"}),e.jsx(s,{className:"p-3",itemKey:"contact",children:"Contact tab content"}),e.jsx(s,{className:"p-3",itemKey:"disabled",children:"Disabled tab content"})]})]})})]})]})]}),e.jsx(n,{xs:12,children:e.jsxs(i,{className:"mb-4",children:[e.jsxs(r,{children:[e.jsx("strong",{children:"React Tabs"})," ",e.jsx("small",{children:"Unstyled"})]}),e.jsxs(c,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["If you don’t provide the ",e.jsx("code",{children:"variant"})," prop, the component will default to a basic style."]}),e.jsx(t,{href:"components/tabs/#unstyled",children:e.jsxs(d,{activeItemKey:"profile",children:[e.jsxs(o,{children:[e.jsx(a,{itemKey:"home",children:"Home"}),e.jsx(a,{itemKey:"profile",children:"Profile"}),e.jsx(a,{itemKey:"contact",children:"Contact"}),e.jsx(a,{disabled:!0,itemKey:"disabled",children:"Disabled"})]}),e.jsxs(l,{children:[e.jsx(s,{className:"p-3",itemKey:"home",children:"Home tab content"}),e.jsx(s,{className:"p-3",itemKey:"profile",children:"Profile tab content"}),e.jsx(s,{className:"p-3",itemKey:"contact",children:"Contact tab content"}),e.jsx(s,{className:"p-3",itemKey:"disabled",children:"Disabled tab content"})]})]})})]})]})}),e.jsx(n,{xs:12,children:e.jsxs(i,{className:"mb-4",children:[e.jsxs(r,{children:[e.jsx("strong",{children:"React Tabs"})," ",e.jsx("small",{children:"Pills"})]}),e.jsxs(c,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Take that same code, but use ",e.jsx("code",{children:'variant="pills"'})," instead:"]}),e.jsx(t,{href:"components/tabs/#unstyled",children:e.jsxs(d,{activeItemKey:2,children:[e.jsxs(o,{variant:"pills",children:[e.jsx(a,{"aria-controls":"home-tab-pane",itemKey:1,children:"Home"}),e.jsx(a,{"aria-controls":"profile-tab-pane",itemKey:2,children:"Profile"}),e.jsx(a,{"aria-controls":"contact-tab-pane",itemKey:3,children:"Contact"}),e.jsx(a,{"aria-controls":"disabled-tab-pane",disabled:!0,itemKey:4,children:"Disabled"})]}),e.jsxs(l,{children:[e.jsx(s,{className:"p-3","aria-labelledby":"home-tab-pane",itemKey:1,children:"Home tab content"}),e.jsx(s,{className:"p-3","aria-labelledby":"profile-tab-pane",itemKey:2,children:"Profile tab content"}),e.jsx(s,{className:"p-3","aria-labelledby":"contact-tab-pane",itemKey:3,children:"Contact tab content"}),e.jsx(s,{className:"p-3","aria-labelledby":"disabled-tab-pane",itemKey:4,children:"Disabled tab content"})]})]})})]})]})}),e.jsx(n,{xs:12,children:e.jsxs(i,{className:"mb-4",children:[e.jsxs(r,{children:[e.jsx("strong",{children:"React Tabs"})," ",e.jsx("small",{children:"Underline"})]}),e.jsxs(c,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Take that same code, but use ",e.jsx("code",{children:'variant="underline"'})," instead:"]}),e.jsx(t,{href:"components/tabs/#unstyled",children:e.jsxs(d,{activeItemKey:2,children:[e.jsxs(o,{variant:"underline",children:[e.jsx(a,{"aria-controls":"home-tab-pane",itemKey:1,children:"Home"}),e.jsx(a,{"aria-controls":"profile-tab-pane",itemKey:2,children:"Profile"}),e.jsx(a,{"aria-controls":"contact-tab-pane",itemKey:3,children:"Contact"}),e.jsx(a,{"aria-controls":"disabled-tab-pane",disabled:!0,itemKey:4,children:"Disabled"})]}),e.jsxs(l,{children:[e.jsx(s,{className:"py-3","aria-labelledby":"home-tab-pane",itemKey:1,children:"Home tab content"}),e.jsx(s,{className:"py-3","aria-labelledby":"profile-tab-pane",itemKey:2,children:"Profile tab content"}
1),e.jsx(s,{className:"py-3","aria-labelledby":"contact-tab-pane",itemKey:3,children:"Contact tab content"}),e.jsx(s,{className:"py-3","aria-labelledby":"disabled-tab-pane",itemKey:4,children:"Disabled tab content"})]})]})})]})]})}),e.jsx(n,{xs:12,children:e.jsxs(i,{className:"mb-4",children:[e.jsxs(r,{children:[e.jsx("strong",{children:"React Tabs"})," ",e.jsx("small",{children:"Underline border"})]}),e.jsxs(c,{children:[e.jsxs("p",{className:"text-body-secondary small",children:["Take that same code, but use ",e.jsx("code",{children:'variant="underline-border"'})," instead:"]}),e.jsx(t,{href:"components/tabs/#unstyled",children:e.jsxs(d,{activeItemKey:2,children:[e.jsxs(o,{variant:"underline-border",children:[e.jsx(a,{"aria-controls":"home-tab-pane",itemKey:1,children:"Home"}),e.jsx(a,{"aria-controls":"profile-tab-pane",itemKey:2,children:"Profile"}),e.jsx(a,{"aria-controls":"contact-tab-pane",itemKey:3,children:"Contact"}),e.jsx(a,{"aria-controls":"disabled-tab-pane",disabled:!0,itemKey:4,children:"Disabled"})]}),e.jsxs(l,{children:[e.jsx(s,{className:"py-3","aria-labelledby":"home-tab-pane",itemKey:1,children:"Home tab content"}),e.jsx(s,{className:"py-3","aria-labelledby":"profile-tab-pane",itemKey:2,children:"Profile tab content"}),e.jsx(s,{className:"py-3","aria-labelledby":"contact-tab-pane",itemKey:3,children:"Contact tab content"}),e.jsx(s,{className:"py-3","aria-labelledby":"disabled-tab-pane",itemKey:4,children:"Disabled tab content"})]})]})})]})]})})]});export{T as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.