### Install eslint-plugin-mdx

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-plugin-mdx/README.md

Install the eslint-plugin-mdx package as a development dependency using yarn or npm.

```sh
# yarn
yarn add -D eslint-plugin-mdx
```

```sh
# npm
npm i -D eslint-plugin-mdx
```

--------------------------------

### Remark Lint Configuration Example

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

Example of how to configure remark-lint plugins within an ESLint JSONC configuration. This demonstrates enabling, disabling, and changing the severity of remark rules.

```jsonc
{
  "plugins": [
    "@1stg/remark-config",
    // change to error severity, notice `[]` is required
    ["lint-no-duplicate-headings", [2]],
    // disable following plugin
    [
      "lint-no-multiple-toplevel-headings",
      [0], // or false
    ],
  ],
}
```

--------------------------------

### MDX Template Example

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/unicorn.mdx

Example of an MDX template within a Story component, demonstrating nested HTML structure and text content.

```html
<Story>
  {{
    template: /* HTML */ `<div abc>
      <div>Nested</div>
      Hello World
    </div>`,
  }}
</Story>
```

--------------------------------

### Install ESLint Plugin for MDX

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

Install the `eslint-plugin-mdx` package as a development dependency using either yarn or npm.

```sh
# yarn
yarn add -D eslint-plugin-mdx

# npm
npm i -D eslint-plugin-mdx
```

--------------------------------

### CSS Media Query Example

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/basic.mdx

Demonstrates a basic CSS media query for applying styles based on screen width. Ensure this CSS is included in your project's stylesheets.

```css
@media (min-width: 400px) {
  border-color: #000;
}
```

--------------------------------

### Render a Button Component

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/435.mdx

Example of rendering a simple button component with inline styles in JSX.

```jsx
<button
	style={{
		background: 'red',
		border: '1px solid red',
	}}
>
	Hello
</button>
```

--------------------------------

### JavaScript Export Example

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/code-blocks/278.md

Demonstrates basic JavaScript variable exports within an MDX context. This snippet is processed by ESLint.

```JavaScript
export var a = 1 == 2

export const b = [].concat(a)
```

--------------------------------

### Render DefinitionList Component

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/445.mdx

Example of rendering a DefinitionList component with a title. Ensure the DefinitionList component is correctly imported and available in the scope.

```jsx
import { DefinitionList } from './DefinitionList'

<DefinitionList disabled>
  <DefinitionList.Title>Hello World !</DefinitionList.Title>
</DefinitionList>
```

--------------------------------

### JSX Element with Namespace

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/445.mdx

Example of a JSX element with a namespace 'A:B'. This syntax is valid in JSX.

```jsx
<A:B ></A:B >
```

--------------------------------

### Prettier Integration with Remark-Lint

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

Configuration snippet for integrating remark-lint with Prettier using presets. This setup aims to disable conflicting rules and ensure consistent markdown styling.

```json
{
  "plugins": [
    "preset-lint-consistent",
    "preset-lint-recommended",
    "preset-lint-markdown-style-guide",
    "preset-prettier"
  ]
}
```

--------------------------------

### MDX Component with React Import

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/code-blocks/278.md

An example of an MDX file that imports React and includes JSX syntax for a header element. This demonstrates MDX processing capabilities.

```mdx
import React from 'react'

<header>Header</header>
```

--------------------------------

### Use a Custom Components Tag

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/435.mdx

Example of using a custom Components tag with a data prop, likely for rendering dynamic content within MDX.

```jsx
<Components data={`
    `} />
```

--------------------------------

### JavaScript Export Snippet

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/code-blocks/278.md

A simplified JavaScript export example. Note that this snippet is not processed by the MDX ESLint plugin due to the preceding comment.

```JavaScript
export var a = 1 == 2
```

--------------------------------

### Flat ESLint Configuration for MDX

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

Configure ESLint using the flat config system in eslint.config.js. This setup integrates the MDX plugin and allows for detailed configuration of remark processors and code block linting.

```js
import * as mdx from 'eslint-plugin-mdx'

export default [
  {
    ...mdx.flat,
    // optional, if you want to lint code blocks at the same
    processor: mdx.createRemarkProcessor({
      lintCodeBlocks: true,
      // optional, if you want to disable language mapper, set it to `false`
      // if you want to override the default language mapper inside, you can provide your own
      languageMapper: {},
      // optional, same as the `parserOptions.ignoreRemarkConfig`, you have to specify it twice unfortunately
      ignoreRemarkConfig: true,
      // optional, same as the `parserOptions.remarkConfigPath`, you have to specify it twice unfortunately
      remarkConfigPath: 'path/to/your/remarkrc',
    }),
  },
  {
    ...mdx.flatCodeBlocks,
    rules: {
      ...mdx.flatCodeBlocks.rules,
      // if you want to override some rules for code blocks
      'no-var': 'error',
      'prefer-const': 'error',
    },
  },
]
```

--------------------------------

### JSX Element with Nested Namespace

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/445.mdx

Example of a JSX element with a nested namespace 'A.B.C'. This syntax is valid in JSX.

```jsx
<A.B.C></A.B.C>
```

--------------------------------

### MDX Remark ESLint Disable Example

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

Demonstrates how to disable the `mdx/remark` rule for a specific block of MDX code when using Prettier. Use `eslint-disable` and `eslint-enable` for multi-line disabling.

```mdx
{/* eslint-disable mdx/remark */}

# Heading

{/* eslint-enable mdx/remark */}
```

--------------------------------

### HTML Image Element with Attributes

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/450.mdx

Example of an HTML img tag with various attributes including src, alt, title, aria-disabled, className, width, height, loading, style, onLoad, onError, and onClick.

```html
<img
  src="https://via.placeholder.com/250x250"
  alt=""
  title=""
  aria-disabled
  className="my-image"
  width={250}
  height={250}
  loading="eager"
  style={{ display: 'block' }}
  onLoad={() => console.log('onLoad')}
  onError={() => console.log('onError')}
  onClick={() => console.log('onClick')}
/>
```

--------------------------------

### Basic Component Usage

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/basic.mdx

Shows how to use the 'Basic' component, which is imported from a local file. This is a common pattern for integrating custom components.

```jsx
import Basic from './basic'

<Basic>{/* This is a comment */}</Basic>
```

--------------------------------

### Importing Components in MDX

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/jsx-imports.mdx

Demonstrates how to import and use React components within an MDX file.

```mdx
import { Card } from './card'
import { Button } from './button'

# Hello

<Card>
  <Button>Click me</Button>
</Card>
```

--------------------------------

### Register Commands with CommandRegister

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/code-blocks/534.mdx

This TypeScript code demonstrates how to register commands using the CommandRegister. Ensure the CommandRegister and DeployProjectCommand are properly imported and defined.

```typescript
import { CommandRegister } from "@foo";
export function registerCommands(commandRegister: CommandRegister) {
  let deployProjectCommand: DeployProjectCommand = new DeployProjectCommand();
  commandRegister.addCommand(deployProjectCommand);
}
```

--------------------------------

### Import Meta Component for Storybook

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/450.mdx

Import the Meta component from Storybook's addon-docs for configuring story metadata.

```javascript
import { Meta } from '@storybook/addon-docs';
```

--------------------------------

### ESLint Command for MDX Files

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

This command tells ESLint to scan the current directory and its subdirectories for files with .js, .md, and .mdx extensions.

```sh
eslint . --ext js,md,mdx
```

--------------------------------

### Rebass Box Component Usage

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/blank-lines.mdx

Demonstrates using the Rebass Box component with padding, background color, and inline styles for centering text and making it bold. This is used for navigation links.

```jsx
<Box
  p={3}
  bg='lightgray'
  style={{
    textAlign: 'center',
    fontWeight: 'bold',
  }}
>

[Next.js](/getting-started/next) |
[Gatsby](/getting-started/gatsby)
[Create React App](/getting-started/create-react-app)
[React Static](/getting-started/react-static)
[Webpack](/getting-started/webpack)
[Parcel](/getting-started/parcel)
[Zero](/getting-started/zero)

</Box>
```

--------------------------------

### Classic ESLint Configuration for MDX

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

Use this configuration in your .eslintrc file to enable MDX linting. It extends the recommended MDX plugin and can optionally lint code blocks within MDX files.

```jsonc
{
  "extends": ["plugin:mdx/recommended"],
  // optional, if you want to lint code blocks at the same time
  "settings": {
    "mdx/code-blocks": true,
    // optional, if you want to disable language mapper, set it to `false`
    // if you want to override the default language mapper inside, you can provide your own
    "mdx/language-mapper": {},
    // optional, same as the `parserOptions.ignoreRemarkConfig`, you have to specify it twice unfortunately
    "mdx/ignore-remark-config": true,
    // optional, same as the `parserOptions.remarkConfigPath`, you have to specify it twice unfortunately
    "mdx/remark-config-path": "path/to/your/remarkrc",
  },
}
```

--------------------------------

### Nested AUI TabGroups with Lazy Loading

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Demonstrates nesting `aui-tab-group` components, with the inner group also configured for lazy loading. This allows for complex hierarchical tab structures.

```html
<aui-form-item>
  <label auiFormItemLabel>启用 Lazy</label>
  <aui-radio-group
    auiFormItemControl
    [(ngModel)]="lazy"
    [plain]="false"
  >
    <aui-radio-button [value]="true">是</aui-radio-button>
    <aui-radio-button [value]="false">否</aui-radio-button>
  </aui-radio-group>
</aui-form-item>
<aui-tab-group [lazy]="lazy">
  <aui-tab label="Tab 1">
    <tabs-active-test *auiTabContent
      ><aui-card>Content 1</aui-card></tabs-active-test
    >
  </aui-tab>
  <aui-tab label="Tab 2">
    <tabs-active-test *auiTabContent>
      <aui-tab-group [lazy]="true">
        <aui-tab label="Tab 2-1">
          <tabs-active-test *auiTabContent>
            <aui-card> Content 2-1 </aui-card>
          </tabs-active-test>
        </aui-tab>
        <aui-tab label="Tab 2-2">
          <tabs-active-test *auiTabContent>
            <aui-card> Content 2-2 </aui-card>
          </tabs-active-test>
        </aui-tab>
      </aui-tab-group>
    </tabs-active-test>
  </aui-tab>
</aui-tab-group>
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/450.mdx

Configure the title for a Storybook story using the Meta component.

```javascript
<Meta title="Test" />
```

--------------------------------

### Nested Tab Groups

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Illustrates how to nest `aui-tab-group` components within each other, allowing for complex hierarchical tab structures.

```APIDOC
## Nested Tab Groups

### Description
This example demonstrates nesting `aui-tab-group` components. A tab can contain another `aui-tab-group`, enabling multi-level tab navigation.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<aui-form-item>
  <label auiFormItemLabel>启用 Lazy</label>
  <aui-radio-group
    auiFormItemControl
    [(ngModel)]="lazy"
    [plain]="false"
  >
    <aui-radio-button [value]="true">是</aui-radio-button>
    <aui-radio-button [value]="false">否</aui-radio-button>
  </aui-radio-group>
</aui-form-item>
<aui-tab-group [lazy]="lazy">
  <aui-tab label="Tab 1">
    <tabs-active-test *auiTabContent
      ><aui-card>Content 1</aui-card></tabs-active-test
    >
  </aui-tab>
  <aui-tab label="Tab 2">
    <tabs-active-test *auiTabContent>
      <aui-tab-group [lazy]="true">
        <aui-tab label="Tab 2-1">
          <tabs-active-test *auiTabContent>
            <aui-card> Content 2-1 </aui-card>
          </tabs-active-test>
        </aui-tab>
        <aui-tab label="Tab 2-2">
          <tabs-active-test *auiTabContent>
            <aui-card> Content 2-2 </aui-card>
          </tabs-active-test>
        </aui-tab>
      </aui-tab-group>
    </tabs-active-test>
  </aui-tab>
</aui-tab-group>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Import Rebass Box Component

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/blank-lines.mdx

Imports the Box component from the Rebass library for layout and styling.

```jsx
import {Box} from '@rebass/emotion'
```

--------------------------------

### TabGroupComponent Inputs

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Lists and describes the available input properties for the `TabGroupComponent`, including `type`, `size`, `tab`, `selectedIndex`, and `lazy`.

```APIDOC
## TabGroupComponent Inputs

### Description
This section details the input properties available for the `TabGroupComponent`, which control its appearance and behavior.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Inputs
- **type** (TabType) - Optional - Style theme. Default: `TabType.Line`
- **size** (TabSize) - Optional - Size of the component. Default: `TabSize.Medium`
- **tab** (string) - Optional - Name of the selected tab. Default: `-`
- **selectedIndex** (number) - Optional - Index of the selected tab. Default: `-`
- **lazy** (boolean) - Optional - Lazy loading mode. Default: `false`
```

--------------------------------

### TabGroupComponent Outputs

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Details the output events emitted by the `TabGroupComponent`, such as `tabChange`, `selectedIndexChange`, `selectedTabChange`, and `focusChange`, along with their associated event data.

```APIDOC
## TabGroupComponent Outputs

### Description
This section describes the output events emitted by the `TabGroupComponent` in response to user interactions or state changes.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Outputs
- **tabChange** (string) - Emitted when the tab changes, providing the name of the tab.
- **selectedIndexChange** (number) - Emitted when the tab changes, providing the index of the selected tab.
- **selectedTabChange** (TabChangeEvent) - Emitted when the tab changes, providing a `TabChangeEvent` object containing the index and the tab component.
- **focusChange** (TabChangeEvent) - Emitted when the tab `focus` changes, providing a `TabChangeEvent` object.
```

--------------------------------

### Custom Tab Title

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Shows how to customize the title of a tab using the `auiTabTitle` directive, allowing for more descriptive or complex tab headers.

```APIDOC
## Custom Tab Title

### Description
This example demonstrates how to use `*auiTabTitle` to define a custom title for a tab. This allows for more flexibility in tab header content beyond simple text.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<aui-tab-group size="large">
  <ng-container *auiTabTitle>Title</ng-container>
  <aui-tab label="Tab 0"> <aui-card> Content 1 </aui-card> </aui-tab>
  <aui-tab label="Tab 1"><aui-card> Content 2 </aui-card></aui-tab>
  <aui-tab label="Tab 2"><aui-card> Content 3 </aui-card></aui-tab>
  <aui-tab label="Tab 3"><aui-card> Content 4 </aui-card></aui-tab>
</aui-tab-group>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### MDX Text Gradient Shortcode

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/blank-lines.mdx

Applies a text gradient effect using a custom TextGradient shortcode.

```jsx
<TextGradient>

# Here's a text gradient shortcode!

</TextGradient>
```

--------------------------------

### Lazy Loading Mode

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Explains the lazy loading mode for the Tab Group, which caches tab content after it's loaded, improving performance for frequently accessed tabs.

```APIDOC
## Lazy Loading Mode

### Description
The `lazy` mode enables on-demand loading and caching of tab content. Unlike the default mode where tab content is destroyed and recreated on each switch, lazy mode caches the content after the initial load.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<aui-form-item>
  <label auiFormItemLabel>启用</label>
  <aui-radio-group
    auiFormItemControl
    [(ngModel)]="lazy"
    [plain]="false"
  >
    <aui-radio-button [value]="true">是</aui-radio-button>
    <aui-radio-button [value]="false">否</aui-radio-button>
  </aui-radio-group>
</aui-form-item>
<aui-tab-group [lazy]="lazy">
  <aui-tab label="Tab 1">
    <tabs-lazy-test *auiTabContent
      ><aui-card> Content 1 </aui-card></tabs-lazy-test
    >
  </aui-tab>
  <aui-tab label="Tab 2">
    <tabs-lazy-test *auiTabContent
      ><aui-card> Content 2 </aui-card></tabs-lazy-test
    >
  </aui-tab>
  <aui-tab label="Tab 3">
    <tabs-lazy-test *auiTabContent
      ><aui-card> Content 3 </aui-card></tabs-lazy-test
    >
  </aui-tab>
</aui-tab-group>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### MDX YouTube Shortcode

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/blank-lines.mdx

Embeds a YouTube video using the YouTube shortcode with a specific video ID.

```jsx
<YouTube videoId="4fHw4GeW3EU" />
```

--------------------------------

### Disabled Tabs

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Demonstrates how to disable specific tabs within the Tab Group component by setting the `disabled` attribute to `true`.

```APIDOC
## Disabled Tabs

### Description
This example shows how to disable tabs in the `aui-tab-group` component. Tabs with the `[disabled]="true"` attribute will not be selectable.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<aui-tab-group>
  <aui-tab label="Tab 0"> <aui-card> Content 1 </aui-card> </aui-tab>
  <aui-tab
    label="Tab 1"
    [disabled]="true"
    ><aui-card> Content 2 </aui-card></aui-tab
  >
  <aui-tab label="Tab 2"><aui-card> Content 3 </aui-card></aui-tab>
  <aui-tab
    label="Tab 3"
    [disabled]="true"
    ><aui-card> Content 4 </aui-card></aui-tab
  >
</aui-tab-group>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Enable Lazy Loading in AUI TabGroup

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Set the `[lazy]="true"` attribute on the `aui-tab-group` component to enable lazy loading. This caches tab content, preventing re-creation on each switch, unlike the default mode.

```html
<aui-form-item>
  <label auiFormItemLabel>启用</label>
  <aui-radio-group
    auiFormItemControl
    [(ngModel)]="lazy"
    [plain]="false"
  >
    <aui-radio-button [value]="true">是</aui-radio-button>
    <aui-radio-button [value]="false">否</aui-radio-button>
  </aui-radio-group>
</aui-form-item>
<aui-tab-group [lazy]="lazy">
  <aui-tab label="Tab 1">
    <tabs-lazy-test *auiTabContent
      ><aui-card> Content 1 </aui-card></tabs-lazy-test
    >
  </aui-tab>
  <aui-tab label="Tab 2">
    <tabs-lazy-test *auiTabContent
      ><aui-card> Content 2 </aui-card></tabs-lazy-test
    >
  </aui-tab>
  <aui-tab label="Tab 3">
    <tabs-lazy-test *auiTabContent
      ><aui-card> Content 3 </aui-card></tabs-lazy-test
    >
  </aui-tab>
</aui-tab-group>
```

--------------------------------

### JSX Component Definition

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/code-blocks/278.md

Defines a React component using JSX syntax within an MDX file. This is enabled by the MDX ESLint plugin.

```jsx
export const App = () => <div>2 > 1</div>
```

--------------------------------

### TabChangeEvent Interface Definition

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Defines the structure of the event object emitted when a tab change occurs. It includes the index of the new tab and the TabComponent instance.

```typescript
interface TabChangeEvent {
  index: number
  tab: TabComponent
}
```

--------------------------------

### MDXHeading Estree Node Type Definition

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

TypeScript definition for the MDXHeading estree node, representing markdown headings in MDX. It specifies the heading depth and its children.

```ts
export type HeadingDepth = 1 | 2 | 3 | 4 | 5 | 6

export interface MDXHeading extends BaseNode {
  type: 'MDXHeading'
  depth: HeadingDepth
  children: JSXElement['children']
}
```

--------------------------------

### MDXCode Estree Node Type Definition

Source: https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/README.md

TypeScript definition for the MDXCode estree node, representing code blocks within MDX. It includes properties for the code's value, language, and metadata.

```ts
import type { BaseNode } from 'estree'
import type { JSXElement } from 'estree-jsx'

export interface MDXCode extends BaseNode {
  type: 'MDXCode'
  value: string
  lang?: string | null
  meta?: string | null
}
```

--------------------------------

### Disable Tabs in AUI TabGroup

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Use the `[disabled]="true"` attribute on an `aui-tab` to disable it. Disabled tabs are not clickable and visually indicate they are inactive.

```html
<aui-tab-group>
  <aui-tab label="Tab 0"> <aui-card> Content 1 </aui-card> </aui-tab>
  <aui-tab
    label="Tab 1"
    [disabled]="true"
    ><aui-card> Content 2 </aui-card></aui-tab
  >
  <aui-tab label="Tab 2"><aui-card> Content 3 </aui-card></aui-tab>
  <aui-tab
    label="Tab 3"
    [disabled]="true"
    ><aui-card> Content 4 </aui-card></aui-tab
  >
</aui-tab-group>
```

--------------------------------

### TypeScript Type Definition

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/code-blocks/278.md

Defines a TypeScript type alias for a union of numbers. This snippet is skipped by ESLint due to the 'eslint-skip' directive.

```TypeScript
export type Value = 1 | 2 | 3 | 4 | 5
```

--------------------------------

### MDX Tweet Shortcode

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/blank-lines.mdx

Embeds a tweet using the Tweet shortcode with a specific tweet ID.

```jsx
<Tweet tweetId="1116723357410447360" />
```

--------------------------------

### Custom Tab Title in AUI TabGroup

Source: https://github.com/mdx-js/eslint-mdx/blob/master/test/fixtures/380.mdx

Customize the title of a tab by using the `<ng-container *auiTabTitle>` element within an `aui-tab`. This allows for more flexible labeling than just the `label` attribute.

```html
<aui-tab-group size="large">
  <ng-container *auiTabTitle>Title</ng-container>
  <aui-tab label="Tab 0"> <aui-card> Content 1 </aui-card> </aui-tab>
  <aui-tab label="Tab 1"><aui-card> Content 2 </aui-card></aui-tab>
  <aui-tab label="Tab 2"><aui-card> Content 3 </aui-card></aui-tab>
  <aui-tab label="Tab 3"><aui-card> Content 4 </aui-card></aui-tab>
</aui-tab-group>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.