MDUI

https://github.com/zdhxiong/mdui
Admin
Material Design 3(Material You) UI components using Web Components.
Tokens:120,900
Snippets:1,302
Trust Score:9.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Markdown URL conversion examples

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/ai/llms.md

Examples showing how to append .md or index.md to documentation URLs to retrieve the Markdown source.

```text
https://www.mdui.org/en/docs/2/components/button → https://www.mdui.org/en/docs/2/components/button.md
https://www.mdui.org/en/docs/2/ → https://www.mdui.org/en/docs/2/index.md
```

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

### Badge Component Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/badge.html

Initial setup required to use the Badge component, including CSS and JS imports.

```css
body { font-family: Roboto; }
```

```javascript
import '../../packages/mdui/mdui.css';
import '../../packages/mdui/components/badge.js';
```

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

### Switch Component Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/switch.html

Initial setup for the Switch component, including necessary CSS and JS imports, and a global event listener to prevent default invalid behavior.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/switch.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/mdui/components/button.js'; import { $ } from '../../packages/jq/index.js'; $('.prevent-default').on('invalid', (e) => { e.preventDefault(); });
```

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

### Table Component Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/table.html

Initial setup for the Table component including font configuration and required library imports.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/table.js';
```

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

### Surface component setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/surface.html

Basic setup for the Surface component including font configuration and required CSS and JavaScript imports.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/button.js';
```

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

### Install @mdui/icons

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/libraries/icons.md

Install the icon package as a dependency in your project.

```bash
npm install @mdui/icons --save
```

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

### Divider Component Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/divider.html

Initial setup including font configuration and required CSS and JS imports for the Divider component.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/divider.js';
```

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

### Install aurelia-mdui package

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/frameworks/others.md

Install the required package for Aurelia 2 integration after completing the standard mdui installation.

```bash
npm install aurelia-mdui --save
```

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

### Linear Progress Basic Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/linear-progress.html

Basic CSS and import configuration for the linear progress component.

```html
body { font-family: Roboto; } mdui-linear-progress { margin: 16px 0; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/linear-progress.js';
```

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

### Using the prompt function

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/prompt.md

An example showing how to trigger a prompt dialog with custom configuration and event handlers.

```html
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { prompt } from "mdui/functions/prompt.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    prompt({
      headline: "Prompt Title",
      description: "Prompt description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: (value) => console.log("confirmed: " + value),
      onCancel: () => console.log("canceled"),
    });
  });
</script>
```

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

### Basic Select Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/select.md

A standard select component with predefined menu items.

```html
<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Item 2</mdui-menu-item>
</mdui-select>
```

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

### Basic Menu Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/menu.md

A standard menu containing multiple menu items.

```html
<mdui-menu>
  <mdui-menu-item>Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
```

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

### Basic FAB example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/fab.md

A basic implementation of the FAB component using the icon attribute.

```html
<mdui-fab icon="edit"></mdui-fab>
```

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

### Basic Switch example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/switch.md

A standard, unconfigured switch component.

```html
<mdui-switch></mdui-switch>
```

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

### Basic mdui setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/index.html

Initial CSS and component imports required to use mdui in a project.

```css
body { font-family: Roboto; }
```

```javascript
import '../packages/mdui/mdui.css';
import '../packages/mdui/components/list.js';
import '../packages/mdui/components/list-item.js';
```

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

### Checkbox Initialization and Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/checkbox.html

Basic setup for the checkbox component including CSS and JS imports, and a script to prevent default browser validation messages.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/checkbox.js'; import '../../packages/mdui/components/button.js'; import { $ } from '../../packages/jq/index.js'; // 隐藏默认错误提示 $('.prevent-default').on('invalid', function (e) { e.preventDefault(); });
```

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

### Basic Collapse Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/collapse.md

A basic implementation of the collapse component with two items.

```html
<mdui-collapse>
  <mdui-collapse-item header="first header">first content</mdui-collapse-item>
  <mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>
```

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

### Set Locale Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/setLocale.md

Example of calling setLocale with a locale code and handling the completion via a promise.

```js
setLocale('zh-cn').then(() => {
  // The locale switch is complete once the promise resolves
});
```

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

### Open dialog with actions

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/dialog.md

This example demonstrates how to trigger a dialog with a headline, description, and action buttons when a button is clicked.

```html
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { dialog } from "mdui/functions/dialog.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    dialog({
      headline: "Dialog Title",
      description: "Dialog description",
      actions: [
        {
          text: "Cancel",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("confirmed");
            return false;
          },
        }
      ]
    });
  });
</script>
```

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

### Navigation Drawer Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/navigation-drawer.md

A basic implementation of a navigation drawer with open and close functionality controlled by buttons.

```html
<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Close Navigation Drawer</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Open Navigation Drawer</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>
```

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

### Basic CSS and JS Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/text-field.html

Initial CSS styling for the text-field and the required JavaScript imports for the component and validation logic.

```css
body { font-family: Roboto; } mdui-text-field { width: 280px; } @media (max-width: 600px) { mdui-text-field { width: 100%; } mdui-text-field + mdui-text-field { } }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/text-field.js'; import '../../packages/mdui/components/button.js'; import '../../packages/mdui/components/button-icon.js'; import '../../packages/mdui/components/chip.js'; import { $ } from '../../packages/jq/index.js'; $('.invalid').on('input', function () { if (this.value !== 'success') { this.setCustomValidity('请输入 success'); } else { this.setCustomValidity(''); } });
```

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

### Basic Snackbar Usage

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/snackbar.md

A basic example showing how to trigger a snackbar using a button click.

```html
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>
```

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

### Basic Card example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/card.md

A basic implementation of the mdui-card component.

```html
<mdui-card style="width: 200px;height: 124px">Card</mdui-card>
```

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

### Basic Dialog Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/dialog.md

A standard dialog implementation with an open and close button.

```html
<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>Close</mdui-button>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>
```

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

### Basic Slider Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/slider.md

A standard slider component implementation.

```html
<mdui-slider></mdui-slider>
```

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

### Basic Tooltip Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/tooltip.md

A standard tooltip using the content attribute.

```html
<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>
```

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

### Chip Component Setup and Interaction

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/chip.html

Initializes the chip component and provides logic for switching variants and handling loading states.

```css
body { font-family: Roboto; } .diff-variant { margin-top: 16px; }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/chip.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/mdui/components/avatar.js'; import '../../packages/mdui/components/segmented-button-group.js'; import '../../packages/mdui/components/segmented-button.js'; import { $ } from '../../packages/jq/index.js'; $('.change-variant').on('change', function() { $('.diff-variant').find('mdui-chip').prop('variant', this.value); }); $('.loading').on('click', function () { this.loading = true; setTimeout(() => { this.loading = false; }, 2000); });
```

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

### Basic Navigation Bar Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/navigation-bar.md

A standard navigation bar implementation. The style attribute is used here for demonstration purposes only.

```html
<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
```

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

### Navigation Rail Setup and Event Handling

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/navigation-rail.html

Initializes the navigation rail components and sets up event listeners for changing placement and alignment dynamically.

```css
body { font-family: Roboto; } .container { position: relative; width: 800px; height: 675px; box-sizing: border-box; overflow: auto; box-shadow: 0 0.85px 3px 0 rgba(0, 0, 0, 19%), 0 0.25px 1px 0 rgba(0, 0, 0, 3.9%); }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/button-icon.js'; import '../../packages/mdui/components/fab.js'; import '../../packages/mdui/components/navigation-rail.js'; import '../../packages/mdui/components/navigation-rail-item.js'; import '../../packages/mdui/components/segmented-button-group.js'; import '../../packages/mdui/components/segmented-button.js'; import '../../packages/mdui/components/badge.js'; import '../../packages/icons/folder-open--outlined.js'; import '../../packages/icons/library-music--outlined.js'; import '../../packages/icons/library-music.js'; import '../../packages/icons/watch-later.js'; import '../../packages/icons/image--outlined.js'; import { $ } from '../../packages/jq/index.js'; $(() => { $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`)); $('.change-placement').on('change', function () { $(this).next().find('mdui-navigation-rail')[0].placement = this.value; }); $('.change-alignment').on('change', function () { $(this).next().find('mdui-navigation-rail')[0].alignment = this.value; }); $('#default-value').on('change', e => { console.log('change event: ', e.target); }); });
```

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

### Top App Bar CSS and JS Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/top-app-bar.html

Basic CSS styling for the container and imports for the Top App Bar component and its dependencies.

```css
body { font-family: Roboto; } .container { display: flex; flex-direction: column; position: relative; width: 667px; height: 375px; overflow: hidden; box-shadow: 0 0.85px 3px 0 rgba(0, 0, 0, 19%), 0 0.25px 1px 0 rgba(0, 0, 0, 3.9%); } @media (min-width: 667px) { mdui-top-app-bar { width: 667px; } } @media (max-width: 666px) { .container { width: 100%; } }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/top-app-bar.js'; import '../../packages/mdui/components/top-app-bar-title.js'; import '../../packages/mdui/components/button-icon.js'; import '../../packages/mdui/components/button.js'; import '../../packages/mdui/components/segmented-button-group.js'; import '../../packages/mdui/components/segmented-button.js'; import '../../packages/mdui/components/avatar.js'; import '../../packages/mdui/components/dropdown.js'; import '../../packages/mdui/components/menu.js'; import '../../packages/mdui/components/menu-item.js'; import { $ } from '../../packages/jq/index.js';
```

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

### Basic Dropdown Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/dropdown.md

A standard implementation of the dropdown component using a button as the trigger.

```html
<mdui-dropdown>
  <mdui-button slot="trigger">Open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>
```

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

### Open confirmation dialog

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/confirm.md

Example of triggering a confirmation dialog with custom text and event handlers.

```html
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { confirm } from "mdui/functions/confirm.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    confirm({
      headline: "Confirm Title",
      description: "Confirm description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: () => console.log("confirmed"),
      onCancel: () => console.log("canceled"),
    });
  });
</script>
```

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

### Basic Tabs Example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/tabs.md

A standard implementation of the tabs component with three tabs and corresponding panels.

```html
<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>
```

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

### ChatGPT/Claude prompt: Read online

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/ai/llms.md

Example prompt for instructing the model to load and use the llms-full.txt URL directly.

```text
"Please load and use https://www.mdui.org/en/docs/2/llms-full.txt as context for my mdui questions."
```

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

### Triggering events with .trigger()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Examples of triggering events, passing parameters, using namespaces, and configuring CustomEvent options.

```js
// Trigger a specified event
$('.box').trigger('click');

// Pass parameters when triggering an event
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

// Event names support namespaces
$('.box').trigger('click.myPlugin');

// CustomEvent parameters
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});
```

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

### Usage Examples for getTheme

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/getTheme.md

Demonstrates how to retrieve the theme from the root html element, a CSS selector, or a direct DOM element reference.

```js
// Get the theme on <html>
getTheme();

// Get the theme on an element with class="element"
getTheme('.element');

// Get the theme on a specified DOM element
const element = document.querySelector('.element');
getTheme(element);
```

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

### Navigation Rail basic example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/navigation-rail.md

A basic implementation of the navigation rail with three items. The style attribute is for demonstration purposes only.

```html
<mdui-navigation-rail value="recent" style="position: relative">
  <mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recent</mdui-navigation-rail-item>
  <mdui-navigation-rail-item icon="image--outlined" value="images">Images</mdui-navigation-rail-item>
  <mdui-navigation-rail-item icon="library_music--outlined" value="library">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
```

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

### Trigger alert dialog

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/alert.md

Example showing how to trigger an alert dialog when a button is clicked.

```html
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { alert } from "mdui/functions/alert.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    alert({
      headline: "Alert Title",
      description: "Alert description",
      confirmText: "OK",
      onConfirm: () => console.log("confirmed"),
    });
  });
</script>
```

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

### Icon Avatar examples

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/avatar.md

Demonstrates using the icon attribute or passing an icon element into the default slot.

```html
<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>
```

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

### Character Avatar example

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/avatar.md

Demonstrates using text characters in the default slot as an avatar.

```html
<mdui-avatar>A</mdui-avatar>
```

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

### Image Avatar examples

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/avatar.md

Demonstrates using the src attribute or passing an img element into the default slot.

```html
<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="Example of profile picture"/>
</mdui-avatar>
```

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

### Initialize Button Component

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/button.html

Basic setup for the MDUl button component including necessary imports and a loading state demonstration.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/button.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/icons/settings.js'; import { $ } from '../../packages/jq/index.js'; $('.loading').on('click', function () { this.loading = true; setTimeout(() => { this.loading = false; }, 2000); });
```

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

### Install mdui via npm

Source: https://github.com/zdhxiong/mdui/blob/v2/README.md

Use this command to add the mdui package to your project dependencies.

```sh
npm install mdui --save
```

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

### Navigation Bar CSS and JS Setup

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/navigation-bar.html

Initializes the navigation bar container styles and imports necessary components and icons. It also sets up event listeners for the navigation bar's lifecycle events.

```css
body { font-family: Roboto; } .container { position: relative; width: 500px; height: 375px; overflow: hidden; box-shadow: 0 0.85px 3px 0 rgba(0, 0, 0, 19%), 0 0.25px 1px 0 rgba(0, 0, 0, 3.9%); } @media (min-width: 500px) { mdui-navigation-bar { width: 500px; } } @media (max-width: 499px) { .container { width: 100%; } }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/navigation-bar.js'; import '../../packages/mdui/components/navigation-bar-item.js'; import '../../packages/mdui/components/badge.js'; import '../../packages/icons/place.js'; import '../../packages/icons/place--outlined.js'; import { $ } from '../../packages/jq/index.js'; $(() => { $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`)); $('#default-value').on({ change: (e) => { console.log('change event: ', e.target); }, show: (e) => { console.log('show event: ', e.target); }, shown: (e) => { console.log('shown event: ', e.target); }, hide: (e) => { console.log('hide event: ', e.target); }, hidden: (e) => { console.log('hidden event: ', e.target); }, }); });
```

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

### ChatGPT/Claude prompt: Upload file

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/ai/llms.md

Example prompt for instructing the model to use an uploaded llms-full.txt or llms.txt file as the primary context.

```text
"Based on the attached mdui docs, describe how to use <mdui-button> and list common pitfalls."
```

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

### Collapse Component Styling and Initialization

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/collapse.html

CSS styles for the collapse component and the necessary JavaScript imports and event listener setup.

```css
body { font-family: Roboto; } .preset { border: thin solid #a9acaa; border-radius: .5rem; overflow: hidden; max-width: 600px; } .preset mdui-collapse-item { border-top: thin solid #a9acaa; } .preset mdui-collapse-item:first-child { border-top-left-radius: .625rem; border-top-right-radius: .625rem; border-top: none; } .preset mdui-collapse-item:last-child { border-bottom-left-radius: .625rem; border-bottom-right-radius: .625rem; } .preset mdui-collapse-item::part(header) { cursor: pointer; padding: 1rem; } .preset[disabled] mdui-collapse-item::part(header), .preset mdui-collapse-item[disabled]::part(header) { cursor: not-allowed; opacity: 0.38; user-select: none; } .preset:not([disabled]) mdui-collapse-item:not([disabled])::part(header):hover { background-color: #efefef; } .preset .header-expand { display: flex; align-items: center; justify-content: space-between; } .preset mdui-collapse-item[active] mdui-icon-expand-more { transform: rotate(180deg); }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/collapse.js'; import '../../packages/mdui/components/collapse-item.js'; import '../../packages/icons/expand-more.js'; import '../../packages/icons/favorite.js'; import '../../packages/mdui/components/list.js'; import '../../packages/mdui/components/list-item.js'; import '../../packages/mdui/components/card.js'; import '../../packages/mdui/components/button-icon.js'; import { $ } from '../../packages/jq/index.js'; $(() => { $('#default-value').on('change', (e) => { console.log('change event: ', e.target); }) });
```

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

### Initialize Button Icon Component

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/button-icon.html

Basic setup required to use the icon button component in an MDUI project.

```css
body { font-family: Roboto; }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/button-icon.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/icons/settings.js'; import '../../packages/icons/settings--outlined.js';
```

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

### Chip Icons

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/chip.md

Shows how to add icons using attributes or slots for both start and end positions.

```html
<mdui-chip icon="search">Icon</mdui-chip>
<mdui-chip end-icon="arrow_forward">End Icon</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>
```

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

### Use named slot in mdui-button

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/getting-started/usage.md

Named slots are specified using the slot attribute. This example positions an mdui-icon to the start of an mdui-button.

```html
<mdui-button>
  <mdui-icon slot="start" name="settings"></mdui-icon>
  Settings
</mdui-button>
```

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

### ChatGPT/Claude prompt: Specific page

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/ai/llms.md

Example prompt for providing a specific component's Markdown URL to focus the model's context.

```text
"Please read https://www.mdui.org/en/docs/2/components/button.md and provide three best practices based on it."
```

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

### Focusable Element tabindex Examples

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/shared/focusable.html

HTML markup demonstrating various tabindex values for focusable elements.

```html
tabindex=-1 tabindex=3 tabindex=2 tabindex=1 no tabindex
```

```html
tabindex=-1 tabindex=3 tabindex=2 tabindex=1 no stabindex
```

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

### Binding event handlers with .on()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Examples of binding single or multiple events, using event delegation, and passing parameters to event handlers.

```js
// Bind a click event
$('.box').on('click', function (e) {
  console.log('Clicked on .box element');
});

// Bind multiple events
$('.box').on('click focus', function (e) {
  console.log(
    'This function will be triggered for both click and focus events',
  );
});

// Event delegation
$(document).on('click', '.box', function (e) {
  console.log('This function will be triggered when a .box element is clicked');
});

// Binding multiple events and handlers
$('.box').on({
  click: function (e) {
    console.log('Clicked on .box element');
  },
  focus: function (e) {
    console.log('Focused on .box element');
  },
});

// Passing parameters
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log(
    'Clicked on .box element and passed parameters to the event handler',
  );
  // e._data is {key1: 'value1', key2: 'value2'}
});

// Binding multiple events and handlers with parameters
$('.box').on(
  {
    click: function (e) {
      console.log('Clicked on .box element');
      // e._data is {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('Focused on .box element');
      // e._data is {key1: 'value1', key2: 'value2'}
    },
  },
  { key1: 'value1', key2: 'value2' },
);

// Event delegation with parameters
$(document).on(
  'click',
  '.box',
  { key1: 'value1', keys: 'value2' },
  function (e) {
    console.log(
      'Clicked on .box element and passed parameters to the event handler',
    );
    // e._data is {key1: 'value1', key2: 'value2'}
  },
);

// Bind multiple events and handlers with event delegation
$(document).on(
  {
    click: function (e) {
      console.log('Clicked on .box element');
    },
    focus: function (e) {
      console.log('Focused on .box element');
    },
  },
  '.box',
);

// Bind multiple events and handlers with event delegation and parameters
$(document).on(
  {
    click: function (e) {
      console.log('Clicked on .box element');
      // e._data is {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('Focused on .box element');
      // e._data is {key1: 'value1', key2: 'value2'}
    },
  },
  '.box',
  { key1: 'value1', key2: 'value2' },
);

// Get event parameters
$('.box').on('click', function (e, data) {
  // data is equal to e.detail
});

// Event namespaces
$('.box').on('click.myPlugin', function () {
  console.log('Clicked on .box element');
});
```

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

### Avatar Component Initialization

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/avatar.html

Basic setup required to use the Avatar component, including importing the necessary CSS and JavaScript modules.

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/avatar.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/icons/settings.js';
```

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

### Basic Badge usage

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/badge.md

A simple example of a badge displaying a numeric value.

```html
<mdui-badge>12</mdui-badge>
```

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

### Basic Avatar usage

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/avatar.md

A simple example of an avatar using the src attribute.

```html
<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
```

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

### CSS Icon Styling

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/independent/icons.html

Example of applying a green color class to icons.

```css
.green { color: green; }
```

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

### Theme Initialization and Logic

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/mockups/feed.html

Imports and JavaScript logic for handling dark mode, global/local theme switching, and color extraction from images.

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/card.js'; import '../../packages/mdui/components/button.js'; import '../../packages/mdui/components/button-icon.js'; import '../../packages/mdui/components/avatar.js'; import '../../packages/mdui/components/fab.js'; import '../../packages/mdui/components/navigation-bar.js'; import '../../packages/mdui/components/navigation-bar-item.js'; import '../../packages/mdui/components/switch.js'; import { $ } from '../../packages/jq/index.js'; import { setColorScheme } from '../../packages/mdui/functions/setColorScheme.js' import { getColorFromImage } from '../../packages/mdui/functions/getColorFromImage.js'; $(() => { const customColors = [ { name: 'yellow', value: '#ebc248' }, { name: 'orange', value: '#fd9b40' }, { name: 'green', value: '#6e970c' } ]; $('#change-dark-mode').on('change', (e) => { $('html')[e.target.checked ? 'addClass' : 'removeClass']('mdui-theme-dark'); }); $('#change-theme-global').on('input', (e) => { setColorScheme(e.target.value, { customColors, }); }); $('#change-theme-demo').on('input', (e) => { setColorScheme(e.target.value, { target: document.querySelector('.demo') }); }); $('#change-theme-card').on('input', (e) => { setColorScheme(e.target.value, { target: document.querySelector('.card1') }); }); $('#change-theme-from-image').on('change', (e) => { if (!e.target.files.length) { return; } const file = e.target.files[0]; const reader = new FileReader(); reader.onload = evt => { $('body').css({ backgroundImage: `url(${evt.target.result})` }) const image = new Image(); image.src = evt.target.result; getColorFromImage(image).then(color => setColorScheme(color, { customColors })); } reader.readAsDataURL(file); }) });
```

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

### Use mdui-button component

Source: https://github.com/zdhxiong/mdui/blob/v2/README.md

Example of using the mdui-button Web Component in your HTML.

```html
<mdui-button>Button</mdui-button>
```

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

### Get collection length with .length

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Returns the number of elements in the current collection.

```js
$('body').length; // 1
```

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

### FAB icon options

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/fab.md

Demonstrates setting the icon using the icon attribute or the icon slot.

```html
<mdui-fab icon="edit"></mdui-fab>
<mdui-fab>
  <mdui-icon slot="icon" name="edit"></mdui-icon>
</mdui-fab>
```

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

### $.ajaxSetup()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Sets global parameters for all subsequent AJAX requests.

```APIDOC
## $.ajaxSetup()

### Description
Sets global parameters for AJAX requests.

### Parameters
- **options** (object) - Required - Configuration object containing AJAX settings (see Ajax Options).

### Example
```js
$.ajaxSetup({
  global: false,
  method: 'POST'
});
```
```

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

### Basic Icon Button

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/button-icon.md

A simple example of an icon button using the icon attribute.

```html
<mdui-button-icon icon="search"></mdui-button-icon>
```

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

### Initialize FAB and Loading State

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/fab.html

Initializes the FAB component and demonstrates how to toggle the loading state on click.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/fab.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/mdui/components/button.js'; import '../../packages/icons/edit.js'; import { $ } from '../../packages/jq/index.js'; $('.loading').on('click', function () { this.loading = true; setTimeout(() => { this.loading = false; }, 2000); });
```

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

### Localization and Dialog Implementation

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/functions/localize.html

Imports necessary modules, sets up the localization status listener, and demonstrates switching locales and triggering dialogs.

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/text-field.js'; import '../../packages/mdui/components/button.js'; import { $ } from '../../packages/jq/index.js'; import { loadLocale } from '../../packages/mdui/functions/loadLocale.js'; import { getLocale } from '../../packages/mdui/functions/getLocale.js'; import { setLocale } from '../../packages/mdui/functions/setLocale.js'; import { alert } from '../../packages/mdui/functions/alert.js'; import { confirm } from '../../packages/mdui/functions/confirm.js'; import { prompt } from '../../packages/mdui/functions/prompt.js'; window.addEventListener('mdui-localize-status', (event) => { console.log(event); }); loadLocale((locale) => import(`../../packages/mdui/locales/${locale}.js`)); setInterval(async () => { await setLocale('zh-cn'); console.log('current locale: ', getLocale()); setTimeout(async () => { await setLocale('en-us'); console.log('current locale: ', getLocale()); }, 2000) }, 4000) $('#alert').on('click', () => { alert({ headline: 'headline' }); }); $('#confirm').on('click', () => { confirm({ headline: 'headline' }); }); $('#prompt').on('click', () => { prompt({ headline: 'headline' }); });
```

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

### Initialize Segmented Button Imports

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/segmented-button.html

Required imports and global setup for the segmented button component.

```javascript
body { font-family: Roboto; } import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/segmented-button-group.js'; import '../../packages/mdui/components/segmented-button.js'; import '../../packages/mdui/components/icon.js'; import '../../packages/mdui/components/button.js'; import { $ } from '../../packages/jq/index.js'; $('.prevent-default').on('invalid', (e) => { e.preventDefault() }); $('.loading').on('click', function () { this.loading = true; setTimeout(() => { this.loading = false; }, 2000); });
```

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

### Tooltip Placement Options

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/tooltip.md

Demonstrates various placement positions for the tooltip.

```html
<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>
```

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

### Get attribute value with .attr()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Retrieves the HTML attribute value of the first element in the collection.

```js
// Get the 'username' attribute value of the first div element
$('div').attr('username');
```

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

### Get property value with .prop()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Retrieves the JavaScript property value of the first element in the collection.

```js
// Get the 'checked' property value of the first input element
$('input').prop('checked');
```

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

### List all cherry-pickable components and functions

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/getting-started/installation.md

A complete list of individual component and function paths available for cherry-picking.

```js
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
```

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

### Get last element with .last()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Returns a collection containing only the last element of the current collection.

```js
$('div').last(); // Returns a collection with the last div
```

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

### Manual Tooltip Control and Event Handling

Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/tooltip.html

Demonstrates how to programmatically open and close tooltips using the mdui API and how to listen for lifecycle events like open, opened, close, and closed.

```css
body { font-family: Roboto; } mdui-button { display: inline-block; }
```

```javascript
import '../../packages/mdui/mdui.css'; import '../../packages/mdui/components/tooltip.js'; import '../../packages/mdui/components/button.js'; import '../../packages/mdui/components/avatar.js'; import { $ } from '../../packages/jq/index.js'; $(() => { const $tooltip = $('.manual-tooltip') $('#manual-open').on('click', () => { $tooltip.each((_, tooltip) => { tooltip.open = true; }); }); $('#manual-close').on('click', () => { $tooltip.each((_, tooltip) => { tooltip.open = false; }); }); $('#default-open').on({ open: (e) => { console.log('open event: ', e.target); }, opened: (e) => { console.log('opened event: ', e.target); }, close: (e) => { console.log('close event: ', e.target); }, closed: (e) => { console.log('closed event: ', e.target); }, }); });
```

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

### Get first element with .first()

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md

Returns a collection containing only the first element of the current collection.

```js
$('div').first(); // Returns a collection with the first div
```

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

### Get current locale code

Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/getLocale.md

Call the getLocale function to retrieve the current locale code.

```js
// Get the current locale code
getLocale();
```
Tokens:
Raw