cpoerschke commented on code in PR #2550: URL: https://github.com/apache/solr/pull/2550#discussion_r1668427293
########## dev-docs/ref-guide/asciidoc-syntax.adoc: ########## @@ -503,90 +503,88 @@ This means that if we want an entire section of content to be given a specific r TIP: For more on Roles in Asciidoctor, see https://docs.asciidoctor.org/asciidoc/latest/attributes/roles/[Role Attribute] in the Asciidoctor User Guide. -=== Creating Tabbed Sections -Hopefully a little bit of background on roles is helpful to understanding the rest of what we'll do to create a tabbed section in a page. - -See the Bootstrap docs on https://getbootstrap.com/docs/4.1/components/navs/#tabs[nav tabs] for details on how to use tabs and pills with Bootstrap. -As a quick overview, tabs in Bootstrap are defined like this: - -[source,html] ----- -<ul class="nav nav-pills"> <--1--> - <li class="active"><a data-toggle="pill" href="#sec1">Section 1</a></li> - <li><a data-toggle="pill" href="#sect2">Section 2</a></li> -</ul> - -<div class="tab-content"> <--2--> - <div id="sect1" class="tab-pane active"> <--3--> - <h3>Section 1</h3> - <p>Some content.</p> - </div> - <div id="sect2" class="tab-pane"> - <h3>Section 2</h3> - <p>Some other content.</p> - </div> -</div> ----- -<1> This section creates an unordered list with a line item for each tab. -The `data-toggle` and `class` parameters are what tell Bootstrap how to render the content. -<2> Note the class defined here: `<div class="tab-content">`. -This defines that what follows is the content that will make up the panes of our tabs. -We will need to define these in our document. -<3> In our document, we need to delineate the separate sections of content that will make up each pane. - -We have created some custom JavaScript that will do part of the above for us if we assign the proper roles to the blocks of content that we want to appear in the tab panes. -To do this, we can use Asciidoctor's block delimiters to define the tabbed content, and the content between the tab. - -. Define an "open block" (an unformatted content block), and give it the role `.dynamic-tabs`. -An open block is defined by two hyphens on a line before the content that goes in the block, and two hyphens on a line after the content to end the block. -We give a block a role by adding a period before the role name, like this: +== Tabbed Sections +Tabbed sections are supported via https://github.com/asciidoctor/asciidoctor-tabs[`@asciidoctor/tabs`]. + +There are different ways to display tabbed sections via the asciidoctor tabs extension, but most of the time only the format of an example is needed. +This format wraps each tab content into an example block. + +=== Referencing + +By providing an ID to the `[tabs]` block like below, you can control the ID used for referencing the tabbed section. +An ID is also generated for each tab by aggregating the normalized tab label to the end of the `[tabs]` ID. +This allows a direct referencing of a specific tab, even if it is not currently selected. + +=== Tab Synchronization + +The IDs are also used for synchronizing the tab selection across the entire page. +This synchronization requires the tab labels to be named the same, so that the generated ID is correctly recognized. +To enable this feature, add `:tabs-sync-option:` below the page title. + +[source,asciidoc] +---- += Page Title +:tab-sync-option: +... +---- + +It is also possible to group tabbed sections to sync only a set of tabs, or disable the syncing entirely. +See the https://github.com/asciidoctor/asciidoctor-tabs?tab=readme-ov-file#syntax[@asciidoctor/tabs syntax] fore more information. + +=== Tabs Exmaple Review Comment: ```suggestion === Tabs Example ``` -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: issues-unsubscr...@solr.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: issues-unsubscr...@solr.apache.org For additional commands, e-mail: issues-h...@solr.apache.org
