tab-item directive

[Mpdreamz]

TabItem

Kind	Link
Reference
Documentation	https://mystmd.org/guide/dropdowns-cards-and-tabs

Implementation

• Parses directives and aliases
• Emits HTML
• Unit tests
• Validation (emits, warnings and errors).

Specification compliance:

• Arguments (string) required - title
• Options
  No options for the tab-item are required
  • sync (optional, string) - A key that is used to sync the selected tab across multiple tab-sets.
  • selected (boolean) - a flag indicating whether the tab should be selected by default.

[KOTungseth]

Asciidoc example: Tutorial: semantic search with the inference API

Notes from SEO:

• The table is rendered in html via .asciidoc.
• May need to use a different component or not use tabs for this information if needed for SEO.

I'm also including my own notes ⬇️

Purpose

Organize content: Tabs help categorize and separate related information into different sections, making it easier for users to navigate without overwhelming them with too much content at once. This is especially useful for presenting multiple views of related data, such as different configurations, platform-specific instructions, or programming language examples.

Save space: By grouping content into tabbed sections, tabs minimize the need for long, scrolling pages. This keeps the layout clean and compact, improving the user experience by allowing users to focus on one section at a time.

Improve user experience: Tabs allow users to quickly switch between different content options, like installation instructions for different operating systems or API examples in multiple programming languages. This enhances usability, as users can immediately find the version of the content that applies to them.

Support comparisons: Tabs enable easy comparison of related content by allowing users to toggle between different sections, such as various configurations or options, without leaving the page or losing context.

Reduce cognitive load: Instead of presenting all content at once, tabs break the information into smaller, digestible chunks. This reduces cognitive load and makes it easier for users to process complex technical information.

Encourage focused learning: Tabs help users focus on just the information they need, without distraction from irrelevant content. For instance, tabs can segment user roles (e.g., admin vs. developer) or steps in a process, guiding the user to the most relevant information.

Best practices

Use clear and descriptive labels: Ensure that tab labels clearly indicate the content of each tab. Users should be able to understand what information they will find in each tab without needing to click on them.

Limit the number of tabs: Keep the number of tabs manageable, ideally between three to five. Too many tabs can overwhelm users and make it difficult to navigate the content.

Group related content: Organize content logically within tabs, grouping related information together. This helps users find the information they need more efficiently.

Provide context for each tab: Include a brief description or summary of what users can expect in each tab. This can help users determine which tab is most relevant to their needs.

Limit content length in tabs: Avoid overcrowding tabs with too much text or information. Summarize key points and link to more detailed information if necessary. This keeps the interface clean and makes it easier for users to digest content.