Tabs Component Example

This page demonstrates the usage of the Tabs component in documentation.

Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

body {
  font-family: system-ui, sans-serif;
  color: #333;
  background-color: #f9f9f9;
}

h1 {
  color: navy;
}

document.addEventListener('DOMContentLoaded', () => {
  console.log('Hello, world!');
});

These tabs are synchronized across the page using the syncKey prop.

// JavaScript example
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

// TypeScript example
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

# Python example
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))

Another set of tabs with the same syncKey will stay in sync with the above tabs:

JavaScript is a scripting language that enables dynamic content on web pages.

" data-astro-cid-cukmqugu="true" class="tab-item">

This tab has an information icon.