### Default Layout Order Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/layout.md
Demonstrates how the order of layout components in the HTML affects their placement and the space they occupy. This example shows a top app bar and a navigation drawer.
```html
Top App Bar
Navigation drawer
Main
```
```html
Navigation drawer
Top App Bar
Main
```
--------------------------------
### Basic Navigation Bar Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/navigation-bar.md
A basic example of the navigation bar with three items. Note: The `style="position: relative"` is for demonstration; remove it in actual use.
```html
Item 1
Item 2
Item 3
```
--------------------------------
### Open Confirm Dialog Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/confirm.md
This example demonstrates how to open a confirmation dialog when a button is clicked. It configures the dialog's title, description, button texts, and callback functions for confirmation and cancellation.
```html
open
```
--------------------------------
### Snackbar Placement Examples
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/snackbar.html
These examples demonstrate various placement options for the snackbar component using the 'placement' attribute. The available placements include top, bottom, and their start/end variants.
```html
Your photo has been archived
Your photo has been archived
Your photo has been archived
Your photo has been archived
Your photo has been archived
Your photo has been archived
```
--------------------------------
### Basic Menu Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/menu.md
A simple menu with two items.
```html
Item 1
Item 2
```
--------------------------------
### Basic Fab Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/fab.md
A simple Floating Action Button with an icon.
```html
```
--------------------------------
### Basic Tabs Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/tabs.md
A fundamental example of the tabs component with three tabs and their corresponding panels.
```html
Tab 1
Tab 2
Tab 3
Panel 1
Panel 2
Panel 3
```
--------------------------------
### Layout Item Placement Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/layout.md
Illustrates how to use the `placement` attribute on `` to position components on the left and right sides of the layout. This example includes a top app bar and two layout items.
```html
Top App Bar
Layout Item
Layout Item
Main
```
--------------------------------
### Basic Navigation Rail Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/navigation-rail.md
A fundamental example of a navigation rail with three items. The `style="position: relative"` is for demonstration; remove it in actual use.
```html
Recent
Images
Library
```
--------------------------------
### Basic Snackbar Usage
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/snackbar.md
This example shows how to display a basic Snackbar with custom text and open it using a button click.
```html
Photo archived
Open Snackbar
```
--------------------------------
### Static Imports
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/loadLocale.md
This example demonstrates loading locale modules using static imports and managing them in a Map.
```javascript
import { loadLocale } from 'mdui/functions/loadLocale.js';
import * as locale_zh_cn from 'mdui/locales/zh-cn.js';
import * as locale_zh_tw from 'mdui/locales/zh-tw.js';
const localizedTemplates = new Map([
['zh-cn', locale_zh_cn],
['zh-tw', locale_zh_tw]
]);
loadLocale(async (locale) => localizedTemplates.get(locale));
```
--------------------------------
### Dynamic Import (Pre-load)
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/loadLocale.md
This example shows how to pre-load locale modules using dynamic imports and store them in a Map.
```javascript
import { loadLocale } from 'mdui/functions/loadLocale.js';
const localizedTemplates = new Map([
['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)],
['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)]
]);
loadLocale(async (locale) => localizedTemplates.get(locale));
```
--------------------------------
### Temperature MDUI Slider Example
Source: https://context7.com/zdhxiong/mdui/llms.txt
A practical example of a slider configured for temperature selection, including custom label formatting.
```html
```
```javascript
const tempSlider = document.querySelector('.temp-slider');
tempSlider.labelFormatter = (value) => `${value}°F`;
```
--------------------------------
### Basic Collapse Usage
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/collapse.md
A simple example of the collapse component with basic headers and content.
```html
first content
second content
```
--------------------------------
### Basic Select Component Usage
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/select.md
A fundamental example of the `` component with predefined menu items.
```html
Item 1
Item 2
```
--------------------------------
### Snackbar Event Handling
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/snackbar.html
This example shows how to handle various events emitted by the snackbar component, such as 'open', 'opened', 'close', and 'closed'. It logs the target element to the console for each event. This setup should be attached to the snackbar element.
```javascript
$('#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);
},
});
```
--------------------------------
### Basic MDUI Collapse Example
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/collapse.html
Demonstrates the basic usage of the MDUI collapse component with multiple collapsible items.
```html
one content
two content
three content
```
--------------------------------
### Basic Chip Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/chip.md
A simple chip element.
```html
Chip
```
--------------------------------
### Basic Table Structure Example
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/table.html
An example demonstrating the basic HTML structure for an MDUI table, including table headers and data rows. This structure is used to display tabular data.
```html
Table body { font-family: Roboto; }
图片
--
Name
Calories
item.name
item.calories
```
--------------------------------
### Cherry-picking Import Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/getting-started/installation.md
Import only the necessary CSS, a specific component ('mdui-button'), and a function ('snackbar') to optimize project size. This is ideal for performance-critical applications.
```javascript
// Always import the CSS file
import 'mdui/mdui.css';
// Import the component
import 'mdui/components/button.js';
// Import the snackbar function
import { snackbar } from 'mdui/functions/snackbar.js';
```
--------------------------------
### Basic Segmented Button Group Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/segmented-button.md
A simple example of a segmented button group with three options: Day, Week, and Month.
```html
Day
Week
Month
```
--------------------------------
### Basic Dropdown Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/dropdown.md
A standard dropdown with a button trigger and a menu containing two items.
```html
open dropdown
Item 1
Item 2
```
--------------------------------
### Basic TextField Example
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/text-field.md
A simple text field with a label.
```html
```
--------------------------------
### Dynamic Import (Lazy-load)
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/loadLocale.md
This example demonstrates how to dynamically import locale modules using a lazy-loading approach.
```javascript
import { loadLocale } from 'mdui/functions/loadLocale.js';
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));
```
--------------------------------
### Import getTheme Function
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/getTheme.md
Import the getTheme function from the MDUI library before use. This is a required setup step.
```javascript
import { getTheme } from 'mdui/functions/getTheme.js';
```
--------------------------------
### Snackbar with Loading Action
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/snackbar.html
This example shows a snackbar with an action button that indicates a loading state. This is useful for asynchronous actions where user feedback is required.
```html
Your photo has been archived
Action
```
--------------------------------
### Dropdown Placement
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/dropdown.md
Control the dropdown's open position using the `placement` attribute. Example shows 'right-start'.
```html
open dropdown
Item 1
Item 2
```
--------------------------------
### Style Icons with CSS
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/independent/icons.html
Apply CSS to style icons, such as setting their color. This example demonstrates how to make an icon appear green.
```css
.green { color: green; }
```
--------------------------------
### Text Field with Start and End Slots
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/text-field.html
Example of using start and end slots to place custom content at the beginning and end of the text field.
```html
```
--------------------------------
### Get Element Position
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md
Retrieves the offset of the first element relative to its positioned parent. Example output shows top and left offsets.
```javascript
$('.box').position(); // { top: 20, left: 30 }
```
--------------------------------
### Basic Card Usage
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/card.md
A basic example of the MDUI Card component. Set its dimensions using inline styles.
```html
Card
```
--------------------------------
### Basic Linear Progress Usage
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/linear-progress.html
This example shows the basic HTML structure for a linear progress bar. It requires the mdui-linear-progress class for styling.
```html
```
--------------------------------
### Get a subset of elements with .slice()
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md
The .slice() method returns a portion of the current collection. Specify a start index and an optional end index (exclusive). If the end index is omitted, it slices to the end of the collection.
```javascript
$('div').slice(3); // Returns all elements from the third position onwards
$('div').slice(3, 5); // Returns elements from the third to the fifth position (excluding the fifth)
```
--------------------------------
### Use mdui Button Component
Source: https://github.com/zdhxiong/mdui/blob/v2/README.md
Example of using the mdui button component in your HTML. This demonstrates basic component integration after importing the library.
```html
Button
```
--------------------------------
### Basic Dialog Usage
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/dialog.md
A basic example of how to use the mdui dialog component. It includes an open button and a close button within the dialog.
```html
Dialog
Close
Open Dialog
```
--------------------------------
### Insert Content Using Named Slot
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/getting-started/usage.md
Use named slots with the `slot` attribute to position specific content within an MDUI component. The example shows inserting an icon into the `start` slot of a `mdui-button`.
```html
Settings
```
--------------------------------
### Install @mdui/jq
Source: https://github.com/zdhxiong/mdui/blob/v2/packages/jq/README.md
Install the @mdui/jq library using npm. This command adds the library as a dependency to your project.
```bash
npm install @mdui/jq --save
```
--------------------------------
### AJAX Global Setup with $.ajaxSetup()
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md
Sets global parameters for all AJAX requests made using MDUI. Allows configuration of default settings like request method and global event handling.
```APIDOC
## $.ajaxSetup() {#d-ajaxSetup}
### Description
This method sets global parameters for AJAX requests.
### Method
`$.ajaxSetup(options)`
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
$.ajaxSetup({
// Disable global Ajax events by default
global: false,
// Default to POST request
method: 'POST',
});
```
Refer to [Ajax options](#ajax-options) for a detailed list of parameters.
### Response
#### Success Response (200)
None
#### Response Example
None
```
--------------------------------
### Install @mdui/icons Package
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/libraries/icons.md
Install the @mdui/icons package using npm. This is a prerequisite for using individual Material Icons.
```bash
npm install @mdui/icons --save
```
--------------------------------
### Install aurelia-mdui Package
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/frameworks/others.md
Install the aurelia-mdui package using npm. This is a prerequisite for integrating mdui with Aurelia 2.
```bash
npm install aurelia-mdui --save
```
--------------------------------
### Tooltip Placement Examples
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/tooltip.md
Demonstrates various `placement` options for positioning the tooltip relative to its trigger element. Includes top, bottom, left, right, and diagonal placements.
```html
```
--------------------------------
### Install mdui with npm
Source: https://github.com/zdhxiong/mdui/blob/v2/README.md
Install the mdui library using npm. This command adds mdui as a dependency to your project.
```sh
npm install mdui --save
```
--------------------------------
### Import MDUI Components and CSS
Source: https://context7.com/zdhxiong/mdui/llms.txt
Import all components and CSS for full functionality, or cherry-pick specific components and their CSS for a smaller bundle size. This example shows importing the button and dialog components, along with the snackbar function.
```javascript
// Full import - includes all components
import 'mdui/mdui.css';
import 'mdui';
```
```javascript
// Cherry-pick specific components for smaller bundle size
import 'mdui/mdui.css';
import 'mdui/components/button.js';
import 'mdui/components/dialog.js';
import { snackbar } from 'mdui/functions/snackbar.js';
```
--------------------------------
### Theme Toggle Button Example
Source: https://context7.com/zdhxiong/mdui/llms.txt
An example of a theme toggle button that switches between dark and light modes using JavaScript and MDUI theme functions.
```html
```
```javascript
```
--------------------------------
### Get Inner Height of Element
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md
Retrieves the height of an element, including padding but excluding border and margin. Use this to get the content area height.
```javascript
$('.box').innerHeight();
```
--------------------------------
### Open Prompt Dialog with Button Click
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/prompt.md
This example demonstrates how to use the prompt function when a button is clicked. It configures the dialog with a title, description, and custom button texts, and logs the returned value or cancellation to the console.
```html
open
```
--------------------------------
### Multi-line Snackbar with Action and Close
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/snackbar.html
This example combines a multi-line message with both an action button and a close button, offering full functionality for user interaction.
```html
multiple line with action & close snackbar
Action
close
```
--------------------------------
### Example Usage of mdui Localization Functions
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/getting-started/localization.md
Demonstrates how to import and use `loadLocale`, `setLocale`, and `getLocale` to manage language settings in your project. Call `loadLocale` in your entry point and use `setLocale` to switch languages, optionally logging the current locale with `getLocale`.
```javascript
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { getLocale } from 'mdui/functions/getLocale.js';
// Load locale modules in the entry point of your project
loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));
// Switch locale, and returns a promise that resolves when the new locale has loaded
setLocale('zh-cn').then(() => {
// You can use getLocale() to get the current locale code
console.log(getLocale()); // zh-cn
});
```
--------------------------------
### Initialize Navigation Bar with Event Listeners
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/navigation-bar.html
Initializes the navigation bar and sets up event listeners for 'change', 'show', 'shown', 'hide', and 'hidden' events. Ensure the DOM is ready before executing.
```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 => `${item}
`));
$('#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);
},
});
});
```
--------------------------------
### Basic Navigation Drawer Example
Source: https://context7.com/zdhxiong/mdui/llms.txt
Demonstrates a basic navigation drawer with list items and a toggle button. The drawer can be opened and closed by clicking the button. It closes automatically when clicking the overlay or pressing the Escape key.
```html
Home
Inbox
Drafts
Labels
Work
Personal
Toggle Navigation
```
--------------------------------
### Input Validation Example
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/components/text-field.html
This example demonstrates how to implement custom input validation using JavaScript and the 'input' event. It checks if the input value is 'success' and sets a custom validity message otherwise.
```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('');
}
});
```
--------------------------------
### Wait for Component Registration with JavaScript
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/getting-started/faq.md
Use `customElements.whenDefined()` and `Promise.allSettled()` to ensure all mdui components are registered before making the page visible. This example initially hides the body and fades it in once components are ready.
```html
```
--------------------------------
### Get following siblings until a condition is met
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md
Use `.nextUntil()` to get all following sibling elements until an element matching the provided selector or condition is found. The matching element itself is excluded. If no parameter is provided, it behaves like `.nextAll()`.
```javascript
$('.box').nextUntil();
```
```javascript
$('.box').nextUntil('.until');
```
```javascript
$('.box').nextUntil('.until', 'div');
```
--------------------------------
### Initialize and Display Snackbar
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/functions/snackbar.html
This snippet demonstrates how to initialize and display a snackbar with various options. It requires importing the snackbar function and necessary components. The options are dynamically generated from form data.
```javascript
import '../../packages/mdui/mdui.css';
import { $ } from '../../packages/jq/index.js';
import '../../packages/mdui/components/button.js';
import '../../packages/mdui/components/text-field.js';
import '../../packages/mdui/components/radio-group.js';
import '../../packages/mdui/components/radio.js';
import '../../packages/mdui/components/select.js';
import '../../packages/mdui/components/menu-item.js';
import '../../packages/mdui/components/checkbox.js';
import { snackbar } from '../../packages/mdui/functions/snackbar.js';
const form = $('.form')[0];
const currentEvent = $('.current-event')[0];
$('.snackbar').on('click', () => {
const formData = new FormData(form);
const options = {
message: formData.get('message'),
placement: formData.get('placement'),
action: formData.get('action'),
closeable: !!formData.get('closeable'),
messageLine: formData.get('messageLine'),
autoCloseDelay: formData.get('autoCloseDelay'),
closeOnOutsideClick: !!formData.get('closeOnOutsideClick'),
queue: !!formData.get('queue'),
onClick: () => currentEvent.textContent = 'onClick',
onActionClick: () => {
const onActionClickReturn = formData.get('onActionClick');
switch (onActionClickReturn) {
case 'false':
return false;
case 'promise-resolve':
return new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
case 'promise-reject':
return new Promise((resolve, reject) => {
setTimeout(reject, 2000);
});
}
},
onOpen: () => currentEvent.textContent = 'onOpen',
onOpened: () => currentEvent.textContent = 'onOpened',
onClose: () => currentEvent.textContent = 'onClose',
onClosed: () => currentEvent.textContent = 'onClosed',
};
console.log(options);
snackbar(options);
});
```
--------------------------------
### Snackbar with Action Button
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/components/snackbar.md
This example shows a Snackbar with a configurable action button. The `action-click` event is handled to show a loading state on the button, and the Snackbar is opened via a separate button.
```html
Photo archived
Open Snackbar
```
--------------------------------
### Initialize MDUI Components and Theme Customization
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/mockups/feed.html
This script initializes MDUI components and sets up theme color schemes. It includes event listeners for dark mode toggling, global theme changes, demo-specific theme changes, card theme changes, and theme extraction from images. Requires MDUI CSS and component imports.
```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);
});
});
```
--------------------------------
### Dimension Manipulation
Source: https://github.com/zdhxiong/mdui/blob/v2/docs/en/functions/jq.md
Methods for getting and setting element dimensions.
```APIDOC
## .width()
### Description
This method retrieves the width (in pixels) of the first element in the collection, excluding `padding`, `border`, and `margin`. It can also set the width for all elements in the collection.
### Method
`GET` or `POST` (implicitly, for setting values)
### Endpoint
N/A (JavaScript method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **value** (string | number | function) - The width value to set. Can be a string with units, a number, or a callback function. If `null` or `undefined`, the width remains unchanged. For numbers, 'px' is appended as the unit.
### Request Example
```javascript
// Get width
$('.box').width();
// Set width
$('.box').width('20%');
// Set width with numeric value (defaults to px)
$('.box').width(10);
// Set width using a callback function
$('.box').width(function (index, oldWidth) {
return 10;
});
```
### Response
#### Success Response (200)
- **number** - The width in pixels when getting.
- **jQuery Object** - The collection itself when setting values.
#### Response Example
```json
100 // Example response when getting the width
```
```
```APIDOC
## .height()
### Description
This method retrieves the height (in pixels) of the first element in the collection, excluding `padding`, `border`, and `margin`. It can also set the height for all elements in the collection.
### Method
`GET` or `POST` (implicitly, for setting values)
### Endpoint
N/A (JavaScript method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **value** (string | number | function) - The height value to set. Can be a string with units, a number, or a callback function. If `null` or `undefined`, the height remains unchanged. For numbers, 'px' is appended as the unit.
### Request Example
```javascript
// Get height
$('.box').height();
// Set height
$('.box').height('20%');
// Set height with numeric value (defaults to px)
$('.box').height(10);
// Set height using a callback function
$('.box').height(function (index, oldHeight) {
return 10;
});
```
### Response
#### Success Response (200)
- **number** - The height in pixels when getting.
- **jQuery Object** - The collection itself when setting values.
#### Response Example
```json
100 // Example response when getting the height
```
```
```APIDOC
## .innerWidth()
### Description
This method retrieves the width (in pixels) of the first element in the collection, including `padding` but excluding `border` and `margin`. It can also set the width (including `padding` but excluding `border` and `margin`) for all elements in the collection.
### Method
`GET` or `POST` (implicitly, for setting values)
### Endpoint
N/A (JavaScript method)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
- **value** (string | number | function) - The inner width value to set. Can be a string with units, a number, or a callback function. If `null` or `undefined`, the width remains unchanged. For numbers, 'px' is appended as the unit.
### Request Example
```javascript
// Get inner width
$('.box').innerWidth();
// Set inner width
$('.box').innerWidth('20%');
// Set inner width with numeric value (defaults to px)
$('.box').innerWidth(10);
// Set inner width using a callback function
$('.box').innerWidth(function (index, oldWidth) {
return 10;
});
```
### Response
#### Success Response (200)
- **number** - The inner width in pixels when getting.
- **jQuery Object** - The collection itself when setting values.
#### Response Example
```json
120 // Example response when getting the inner width
```
```
--------------------------------
### Using MDUI Prompt with Custom Options
Source: https://github.com/zdhxiong/mdui/blob/v2/demos/functions/prompt.html
Demonstrates how to invoke the MDUI prompt function with various configuration options, including callbacks for confirmation, cancellation, and lifecycle events. This example shows how to handle different return types from callbacks, such as booleans, promises, and custom validation messages.
```javascript
import '../../packages/mdui/mdui.css';
import { $ } from '../../packages/jq/index.js';
import '../../packages/mdui/components/button.js';
import '../../packages/mdui/components/text-field.js';
import '../../packages/mdui/components/checkbox.js';
import '../../packages/mdui/components/select.js';
import '../../packages/mdui/components/menu-item.js';
import { prompt } from '../../packages/mdui/functions/prompt.js';
const form = $('.form')[0];
const currentEvent = $('.current-event')[0];
const returnPromise = $('.return-promise')[0];
$('.prompt').on('click', () => {
const formData = new FormData(form);
const options = {
headline: formData.get('headline'),
description: formData.get('description'),
icon: formData.get('icon'),
closeOnEsc: !!formData.get('closeOnEsc'),
closeOnOverlayClick: !!formData.get('closeOnOverlayClick'),
confirmText: formData.get('confirmText'),
cancelText: formData.get('cancelText'),
stackedActions: !!formData.get('stackedActions'),
queue: !!formData.get('queue'),
onConfirm: () => {
const onConfirmReturn = formData.get('onConfirm');
switch (onConfirmReturn) {
case 'false':
return false;
case 'promise-resolve':
return new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
case 'promise-reject':
return new Promise((resolve, reject) => {
setTimeout(reject, 2000);
});
}
},
onCancel: () => {
const onCancelReturn = formData.get('onCancel');
switch (onCancelReturn) {
case 'false':
return false;
case 'promise-resolve':
return new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
case 'promise-reject':
return new Promise((resolve, reject) => {
setTimeout(reject, 2000);
});
}
},
onOpen: () => currentEvent.textContent = 'onOpen',
onOpened: () => currentEvent.textContent = 'onOpened',
onClose: () => currentEvent.textContent = 'onClose',
onClosed: () => currentEvent.textContent = 'onClosed',
onOverlayClick: () => currentEvent.textContent = 'onOverlayClick',
validator: (value) => {
const validator = formData.get('validator');
switch (validator) {
case 'true':
return true;
case 'false':
return false;
case 'error-message':
return 'error-message:' + value;
case 'promise-resolve':
return new Promise((resolve, reject) => {
setTimeout(resolve, 2000);
});
case 'promise-reject':
return new Promise((resolve, reject) => {
setTimeout(() => reject('promise-reject:' + value), 2000);
});
}
},
textFieldOptions: {
autosize: true,
minRows: 2,
maxRows: 8,
required: !!formData.get('required'),
}
};
console.log(options);
returnPromise.textContent = '';
prompt(options).then((value) => {
returnPromise.textContent = 'resolve ' + value;
}).catch(() => {
returnPromise.textContent = 'reject';
});
})
```
--------------------------------
### Manage Theme and Color Scheme with JavaScript
Source: https://context7.com/zdhxiong/mdui/llms.txt
Use these functions to get and set the theme (light, dark, auto) and color schemes programmatically. Imports are required.
```javascript
import { getTheme, setTheme } from 'mdui/functions/getTheme.js';
import { setColorScheme, removeColorScheme } from 'mdui/functions/setColorScheme.js';
// Get current theme
const currentTheme = getTheme(); // 'light', 'dark', or 'auto'
// Set theme on entire page
setTheme('dark');
setTheme('light');
setTheme('auto'); // Follow system preference
// Set theme on specific element
setTheme('dark', '.my-container');
setTheme('dark', document.querySelector('.my-element'));
// Get theme of specific element
const elementTheme = getTheme('.my-container');
// Set color scheme (dynamic colors)
setColorScheme('#6750A4'); // Primary color
// Set color scheme on specific element
setColorScheme('#FF5722', {
target: '.my-section'
});
// Custom colors
setColorScheme('#6750A4', {
customColors: [
{ name: 'custom-color', value: '#FF5722' }
]
});
// Remove color scheme
removeColorScheme();
removeColorScheme({ target: '.my-section' });
```