linkTabs

You can use Tabs and Tab components in conjuction for tabbed content:

1link> :Tabs

2link> > :Tab title=First tab

3link> >                                 <!--> This whitespace after first line is important -->

4link> > **The standard Lorem Ipsum passage, used since the 1500s**

5link> > 

6link> > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 

7link> > labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

8link> > nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 

9link> > velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 

10link> > sunt in culpa qui officia deserunt mollit anim id est laborum.

11link>                                    <!--> This white space between tabs is important -->

12link> > :Tab title=Second tab

13link> >

14link> > **Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC**

15link> > 

16link> > Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 

17link> > totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 

18link> > sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 

19link> > consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem 

20link> > ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 

21link> > labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 

22link> > ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 

23link> > qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 

24link> > voluptas nulla pariatur?

linkIcons in Tab Title

You can uses the icon property to include an icon the title of a tab as well:

1link> :Tabs

2link> > :Tab title=First tab, icon=cloud

3link> >

4link> > **The standard Lorem Ipsum passage, used since the 1500s**

5link> > 

6link> > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 

7link> > labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 

8link> > nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 

9link> > velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 

10link> > sunt in culpa qui officia deserunt mollit anim id est laborum.

11link>

12link> > :Tab title=Second tab, icon=settings

13link> >

14link> > **Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC**

15link> > 

16link> > Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 

17link> > totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 

18link> > sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 

19link> > consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem 

20link> > ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 

21link> > labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 

22link> > ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 

23link> > qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 

24link> > voluptas nulla pariatur?

By default, the Material Icons icon-font is used. You can of-course override that and use your own custom icon-font via .codedoc/config.ts.

linkReferencing Tabs in Code

You can reference another tab from a code snippet within one tab:

1link> :Tabs

2link> > :Tab title=Component Code

3link> >

4link> > ```tsx | index.tsx

5link> > import { CompStyles } from './styles'  // @see tab:Styling Code

6link> >

7link> > export function Comp() {

8link> >   ... 

9link> > }

10link> > ```

11link>

12link> > :Tab title=Styling Code

13link> > ```tsx | style.ts

14link> > export const CompStyle = { ... }

15link> > ```

index.ts
1linkimport { CompStyles } from './styles'  // @see tab:Styling Code

2link

3linkexport function Comp() {

4link  ...

5link}

style.ts
1linkexport const CompStyle = { ... }

linkReferencing via Tab IDs

In case the title of a tab is too long, you can also give it an id and use that id to reference it from code snippet in another tab:

1link> :Tabs

2link> > :Tab title=Component Code

3link> >

4link> > ```tsx | index.tsx

5link> > import { CompStyles } from './styles'  // @see [Styling code](tab:styling)

6link> >

7link> > export function Comp() {

8link> >   ... 

9link> > }

10link> > ```

11link>

12link> > :Tab title=Styling Code, id=styling

13link> > ```tsx | style.ts

14link> > export const CompStyle = { ... }

15link> > ```

index.tsx
1linkimport { CompStyles } from './styles'  // @see [Styling code](tab:styling)

2link

3linkexport function Comp() {

4link  ... 

5link}

style.ts
1linkexport const CompStyle = { ... }

info IMPORTANT

If you specify id property of a tab, then all references MUST use id to link to the tab.

Basically, you are always using id to reference a particular tab. Just when you don't specify it, it defaults to the value provided for title for convenience.

Read this entry for more information on in-code references.