mdui
Version:
实现 material you 设计规范的 Web Components 组件库
11,834 lines • 675 kB
JSON
{
"$schema": "http://json.schemastore.org/web-types",
"name": "mdui",
"version": "2.1.5",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"framework-config": {
"enable-when": {
"node-packages": [
"mdui"
]
}
},
"contributions": {
"html": {
"elements": [
{
"name": "mdui-avatar",
"description": "Avatar Component \n\n```html\n<mdui-avatar src=\"https://avatars githubusercontent com/u/3030330?s=40&v=4\"></mdui-avatar>\n```",
"attributes": [
{
"name": "src",
"description": "URL of the avatar image.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-src"
},
{
"name": "fit",
"description": "Image resizing method, similar to the CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property. Possible values:\n\n* `contain`: Scales the image to fit within the box while preserving aspect ratio. The image will be \"letterboxed\" if the aspect ratios do not match.\n* `cover`: Scales the image to fill the box while preserving aspect ratio. The image will be clipped if the aspect ratios do not match.\n* `fill`: Default. Scales the image to fill the box; the image may be stretched if aspect ratios do not match.\n* `none`: No resizing.\n* `scale-down`: Scales the image down to fit. Behaves like `none` or `contain`, whichever results in the smaller image.",
"value": {
"type": [
"'contain'",
"'cover'",
"'fill'",
"'none'",
"'scale-down'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-fit"
},
{
"name": "icon",
"description": "The Material Icons name for the avatar.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-icon"
},
{
"name": "label",
"description": "Text description of the avatar.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-label"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar",
"slots": [
{
"name": "",
"description": "Custom avatar content, such as letters, `<img>` elements, icons, etc.",
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#slots-default"
}
],
"js": {
"properties": [
{
"name": "src",
"description": "URL of the avatar image.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-src"
},
{
"name": "fit",
"description": "Image resizing method, similar to the CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property. Possible values:\n\n* `contain`: Scales the image to fit within the box while preserving aspect ratio. The image will be \"letterboxed\" if the aspect ratios do not match.\n* `cover`: Scales the image to fill the box while preserving aspect ratio. The image will be clipped if the aspect ratios do not match.\n* `fill`: Default. Scales the image to fill the box; the image may be stretched if aspect ratios do not match.\n* `none`: No resizing.\n* `scale-down`: Scales the image down to fit. Behaves like `none` or `contain`, whichever results in the smaller image.",
"value": {
"type": [
"'contain'",
"'cover'",
"'fill'",
"'none'",
"'scale-down'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-fit"
},
{
"name": "icon",
"description": "The Material Icons name for the avatar.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-icon"
},
{
"name": "label",
"description": "Text description of the avatar.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#attributes-label"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "image",
"description": "Internal `<img>` element when using an image avatar.",
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#cssParts-image"
},
{
"name": "icon",
"description": "Internal `<mdui-icon>` element when using an icon avatar.",
"doc-url": "https://www.mdui.org/en/docs/2/components/avatar#cssParts-icon"
}
]
}
},
{
"name": "mdui-badge",
"description": "Badge Component \n\n```html\n<mdui-badge>12</mdui-badge>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the badge size. Possible values:\n* `small`: A small badge without text.\n* `large`: A large badge with text.",
"value": {
"type": [
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/badge#attributes-variant"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/badge",
"slots": [
{
"name": "",
"description": "The text to be displayed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/badge#slots-default"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the badge size. Possible values:\n* `small`: A small badge without text.\n* `large`: A large badge with text.",
"value": {
"type": [
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/badge#attributes-variant"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/badge#cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-bottom-app-bar",
"description": "Bottom App Bar Component \n\n```html\n<mdui-bottom-app-bar>\n <mdui-button-icon icon=\"check_box--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"edit--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"mic_none--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"image--outlined\"></mdui-button-icon>\n <div style=\"flex-grow: 1\"></div>\n <mdui-fab icon=\"add\"></mdui-fab>\n</mdui-bottom-app-bar>\n```",
"attributes": [
{
"name": "hide",
"description": "Whether the bottom app bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-hide"
},
{
"name": "fab-detach",
"description": "If set, detaches the [`<mdui-fab>`](/en/docs/2/components/fab) from the bottom app bar. The [`<mdui-fab>`](/en/docs/2/components/fab) remains on the page even after the app bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-fab-detach"
},
{
"name": "scroll-behavior",
"description": "Specifies the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scroll-behavior"
},
{
"name": "scroll-target",
"description": "The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). Defaults to `window`.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scroll-target"
},
{
"name": "scroll-threshold",
"description": "The scroll distance (in pixels) required to trigger the scroll behavior.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scroll-threshold"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar",
"slots": [
{
"name": "",
"description": "Elements within the bottom app bar.",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#slots-default"
}
],
"js": {
"properties": [
{
"name": "hide",
"description": "Whether the bottom app bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-hide"
},
{
"name": "fabDetach",
"description": "If set, detaches the [`<mdui-fab>`](/en/docs/2/components/fab) from the bottom app bar. The [`<mdui-fab>`](/en/docs/2/components/fab) remains on the page even after the app bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-fabDetach"
},
{
"name": "scrollBehavior",
"description": "Specifies the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scrollBehavior"
},
{
"name": "scrollTarget",
"description": "The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). Defaults to `window`.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scrollTarget"
},
{
"name": "scrollThreshold",
"description": "The scroll distance (in pixels) required to trigger the scroll behavior.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-scrollThreshold"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#attributes-order"
}
],
"events": [
{
"name": "show",
"description": "Emitted when the bottom app bar starts to show. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-show"
},
{
"name": "shown",
"description": "Emitted after the bottom app bar has shown and animations are complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-shown"
},
{
"name": "hide",
"description": "Emitted when the bottom app bar starts to hide. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-hide"
},
{
"name": "hidden",
"description": "Emitted after the bottom app bar has hidden and animations are complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#events-hidden"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/bottom-app-bar#cssProperties-z-index"
}
]
}
},
{
"name": "mdui-button-icon",
"description": "Icon Button Component \n\n```html\n<mdui-button-icon icon=\"search\"></mdui-button-icon>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the icon button variant. Possible values:\n* `standard`: For low-priority actions.\n* `filled`: Has the strongest visual emphasis and works well for high-priority actions.\n* `tonal`: Blends `filled` and `outlined`, and works well for medium- to high-priority actions.\n* `outlined`: For medium-priority or secondary actions.",
"value": {
"type": [
"'standard'",
"'filled'",
"'tonal'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-variant"
},
{
"name": "icon",
"description": "Specifies the Material Icons name. Alternatively, use the default slot.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-icon"
},
{
"name": "selected-icon",
"description": "Specifies the Material Icons name when selected. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selected-icon"
},
{
"name": "selectable",
"description": "Makes the button selectable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selectable"
},
{
"name": "selected",
"description": "Indicates whether the button is selected.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selected"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-tabindex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-form"
},
{
"name": "formaction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formaction"
},
{
"name": "formenctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formenctype"
},
{
"name": "formmethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon",
"slots": [
{
"name": "",
"description": "Icon component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#slots-default"
},
{
"name": "selected-icon",
"description": "Icon in the selected state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#slots-selected-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the icon button variant. Possible values:\n* `standard`: For low-priority actions.\n* `filled`: Has the strongest visual emphasis and works well for high-priority actions.\n* `tonal`: Blends `filled` and `outlined`, and works well for medium- to high-priority actions.\n* `outlined`: For medium-priority or secondary actions.",
"value": {
"type": [
"'standard'",
"'filled'",
"'tonal'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-variant"
},
{
"name": "icon",
"description": "Specifies the Material Icons name. Alternatively, use the default slot.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-icon"
},
{
"name": "selectedIcon",
"description": "Specifies the Material Icons name when selected. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selectedIcon"
},
{
"name": "selectable",
"description": "Makes the button selectable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selectable"
},
{
"name": "selected",
"description": "Indicates whether the button is selected.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-selected"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-tabIndex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-form"
},
{
"name": "formAction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formAction"
},
{
"name": "formEnctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-formTarget"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-validity"
},
{
"name": "validationMessage",
"description": "The validation message. Returns an empty string when the element is valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the button gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-focus"
},
{
"name": "blur",
"description": "Emitted when the button loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-blur"
},
{
"name": "change",
"description": "Emitted when the selected state changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-change"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "button",
"description": "Internal `<button>` or `<a>` element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-button"
},
{
"name": "icon",
"description": "Icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-icon"
},
{
"name": "selected-icon",
"description": "Icon in the selected state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-selected-icon"
},
{
"name": "loading",
"description": "The `<mdui-circular-progress>` element for the loading state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button-icon#cssParts-loading"
}
]
}
},
{
"name": "mdui-button",
"description": "Button Component \n\n```html\n<mdui-button>Button</mdui-button>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the button variant. Possible values:\n* `elevated`: A button with a shadow for visual emphasis.\n* `filled`: Used for final actions like 'Save' or 'Confirm'.\n* `tonal`: Blends `filled` and `outlined`, and works well for medium- to high-priority actions.\n* `outlined`: A bordered button for medium-priority and secondary actions.\n* `text`: A text button for low-priority actions.",
"value": {
"type": [
"'elevated'",
"'filled'",
"'tonal'",
"'outlined'",
"'text'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-variant"
},
{
"name": "full-width",
"description": "If set, the button expands to fill the width of its container.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-full-width"
},
{
"name": "icon",
"description": "Specifies the Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-icon"
},
{
"name": "end-icon",
"description": "Specifies the Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-end-icon"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-tabindex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-form"
},
{
"name": "formaction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formaction"
},
{
"name": "formenctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formenctype"
},
{
"name": "formmethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/button",
"slots": [
{
"name": "",
"description": "Button text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#slots-default"
},
{
"name": "icon",
"description": "Element on the left side of the button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#slots-icon"
},
{
"name": "end-icon",
"description": "Element on the right side of the button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#slots-end-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the button variant. Possible values:\n* `elevated`: A button with a shadow for visual emphasis.\n* `filled`: Used for final actions like 'Save' or 'Confirm'.\n* `tonal`: Blends `filled` and `outlined`, and works well for medium- to high-priority actions.\n* `outlined`: A bordered button for medium-priority and secondary actions.\n* `text`: A text button for low-priority actions.",
"value": {
"type": [
"'elevated'",
"'filled'",
"'tonal'",
"'outlined'",
"'text'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-variant"
},
{
"name": "fullWidth",
"description": "If set, the button expands to fill the width of its container.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-fullWidth"
},
{
"name": "icon",
"description": "Specifies the Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-icon"
},
{
"name": "endIcon",
"description": "Specifies the Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-endIcon"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-tabIndex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-form"
},
{
"name": "formAction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formAction"
},
{
"name": "formEnctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-formTarget"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-validity"
},
{
"name": "validationMessage",
"description": "The validation message. Returns an empty string when the element is valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/button#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the button gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#events-focus"
},
{
"name": "blur",
"description": "Emitted when the button loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#events-blur"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "button",
"description": "Internal `<button>` or `<a>` element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-button"
},
{
"name": "label",
"description": "Button text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-label"
},
{
"name": "icon",
"description": "Icon on the left side of the button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-icon"
},
{
"name": "end-icon",
"description": "Icon on the right side of the button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-end-icon"
},
{
"name": "loading",
"description": "The `<mdui-circular-progress>` element for the loading state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/button#cssParts-loading"
}
]
}
},
{
"name": "mdui-card",
"description": "Card Component \n\n```html\n<mdui-card>card content</mdui-card>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the card variant. Possible values:\n* `elevated`: Shadowed, offering more separation from the background than `filled`, but less than `outlined`.\n* `filled`: Provides minimal separation from the background.\n* `outlined`: Bordered, providing the most separation from the background.",
"value": {
"type": [
"'elevated'",
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-variant"
},
{
"name": "clickable",
"description": "Makes the card clickable. If set, hover and click ripple effects are added.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-clickable"
},
{
"name": "disabled",
"description": "Disables the card.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-disabled"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/card",
"slots": [
{
"name": "",
"description": "Card content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/card#slots-default"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the card variant. Possible values:\n* `elevated`: Shadowed, offering more separation from the background than `filled`, but less than `outlined`.\n* `filled`: Provides minimal separation from the background.\n* `outlined`: Bordered, providing the most separation from the background.",
"value": {
"type": [
"'elevated'",
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-variant"
},
{
"name": "clickable",
"description": "Makes the card clickable. If set, hover and click ripple effects are added.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-clickable"
},
{
"name": "disabled",
"description": "Disables the card.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-disabled"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/card#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the card gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/card#events-focus"
},
{
"name": "blur",
"description": "Emitted when the card loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/card#events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/card#cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-checkbox",
"description": "Checkbox Component \n\n```html\n<mdui-checkbox>Checkbox</mdui-checkbox>\n```",
"attributes": [
{
"name": "disabled",
"description": "Disables the checkbox.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-disabled"
},
{
"name": "checked",
"description": "Sets the checkbox to the checked state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checked"
},
{
"name": "indeterminate",
"description": "Sets the checkbox to an indeterminate state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminate"
},
{
"name": "required",
"description": "The checkbox must be checked to submit the form.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-required"
},
{
"name": "form",
"description": "Associates the checkbox with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the checkbox uses its parent `<form>`, if any.\n\nThis lets the checkbox work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-form"
},
{
"name": "name",
"description": "Sets the checkbox's name, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-name"
},
{
"name": "value",
"description": "Sets the checkbox's value, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-value"
},
{
"name": "unchecked-icon",
"description": "Sets the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Sets the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checked-icon"
},
{
"name": "indeterminate-icon",
"description": "Sets the Material Icons name for the indeterminate state. Alternatively, use `slot=\"indeterminate-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminate-icon"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox",
"slots": [
{
"name": "",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-default"
},
{
"name": "unchecked-icon",
"description": "Icon for the unchecked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Icon for the checked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-checked-icon"
},
{
"name": "indeterminate-icon",
"description": "Icon for the indeterminate state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#slots-indeterminate-icon"
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "Disables the checkbox.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-disabled"
},
{
"name": "checked",
"description": "Sets the checkbox to the checked state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checked"
},
{
"name": "defaultChecked",
"description": "Sets the default checked state. The checkbox resets to this state when the form is reset. JavaScript only.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-defaultChecked"
},
{
"name": "indeterminate",
"description": "Sets the checkbox to an indeterminate state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminate"
},
{
"name": "required",
"description": "The checkbox must be checked to submit the form.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-required"
},
{
"name": "form",
"description": "Associates the checkbox with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the checkbox uses its parent `<form>`, if any.\n\nThis lets the checkbox work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-form"
},
{
"name": "name",
"description": "Sets the checkbox's name, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-name"
},
{
"name": "value",
"description": "Sets the checkbox's value, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-value"
},
{
"name": "uncheckedIcon",
"description": "Sets the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-uncheckedIcon"
},
{
"name": "checkedIcon",
"description": "Sets the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-checkedIcon"
},
{
"name": "indeterminateIcon",
"description": "Sets the Material Icons name for the indeterminate state. Alternatively, use `slot=\"indeterminate-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-indeterminateIcon"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-validationMessage"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the checkbox gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-focus"
},
{
"name": "blur",
"description": "Emitted when the checkbox loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-blur"
},
{
"name": "change",
"description": "Emitted when the checked state changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-change"
},
{
"name": "input",
"description": "Emitted when the checked state changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-input"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "control",
"description": "Container for the left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-control"
},
{
"name": "unchecked-icon",
"description": "Icon for the unchecked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Icon for the checked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-checked-icon"
},
{
"name": "indeterminate-icon",
"description": "Icon for the indeterminate state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-indeterminate-icon"
},
{
"name": "label",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/checkbox#cssParts-label"
}
]
}
},
{
"name": "mdui-chip",
"description": "Chip Component \n\n```html\n<mdui-chip>Chip</mdui-chip>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the chip variant. Possible values:\n\n* `assist`: Shows contextual actions, such as sharing or favoriting on a meal-ordering page.\n* `filter`: Filters content, such as search results.\n* `input`: Represents user input, such as contacts in Gmail's 'To' field.\n* `suggestion`: Shows dynamic suggestions that help users act more quickly, such as message suggestions in a chat app.",
"value": {
"type": [
"'assist'",
"'filter'",
"'input'",
"'suggestion'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-variant"
},
{
"name": "elevated",
"description": "Adds a shadow to the chip.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-elevated"
},
{
"name": "selectable",
"description": "Makes the chip selectable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selectable"
},
{
"name": "selected",
"description": "Marks the chip as selected.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selected"
},
{
"name": "deletable",
"description": "Makes the chip deletable. If set, a delete icon appears on the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-deletable"
},
{
"name": "icon",
"description": "Sets the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-icon"
},
{
"name": "selected-icon",
"description": "Sets the Material Icons name for the left icon when selected. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selected-icon"
},
{
"name": "end-icon",
"description": "Sets the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-end-icon"
},
{
"name": "delete-icon",
"description": "Sets the Material Icons name for the delete icon when deletable. Alternatively, use `slot=\"delete-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-delete-icon"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-tabindex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-form"
},
{
"name": "formaction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formaction"
},
{
"name": "formenctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formenctype"
},
{
"name": "formmethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip",
"slots": [
{
"name": "",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-default"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-end-icon"
},
{
"name": "selected-icon",
"description": "Left icon when selected.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-selected-icon"
},
{
"name": "delete-icon",
"description": "Delete icon when deletable.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#slots-delete-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the chip variant. Possible values:\n\n* `assist`: Shows contextual actions, such as sharing or favoriting on a meal-ordering page.\n* `filter`: Filters content, such as search results.\n* `input`: Represents user input, such as contacts in Gmail's 'To' field.\n* `suggestion`: Shows dynamic suggestions that help users act more quickly, such as message suggestions in a chat app.",
"value": {
"type": [
"'assist'",
"'filter'",
"'input'",
"'suggestion'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-variant"
},
{
"name": "elevated",
"description": "Adds a shadow to the chip.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-elevated"
},
{
"name": "selectable",
"description": "Makes the chip selectable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selectable"
},
{
"name": "selected",
"description": "Marks the chip as selected.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selected"
},
{
"name": "deletable",
"description": "Makes the chip deletable. If set, a delete icon appears on the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-deletable"
},
{
"name": "icon",
"description": "Sets the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-icon"
},
{
"name": "selectedIcon",
"description": "Sets the Material Icons name for the left icon when selected. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-selectedIcon"
},
{
"name": "endIcon",
"description": "Sets the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-endIcon"
},
{
"name": "deleteIcon",
"description": "Sets the Material Icons name for the delete icon when deletable. Alternatively, use `slot=\"delete-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-deleteIcon"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-tabIndex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-form"
},
{
"name": "formAction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formAction"
},
{
"name": "formEnctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-formTarget"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-validity"
},
{
"name": "validationMessage",
"description": "The validation message. Returns an empty string when the element is valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the chip gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-focus"
},
{
"name": "blur",
"description": "Emitted when the chip loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-blur"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-invalid"
},
{
"name": "change",
"description": "Emitted when the selected state changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-change"
},
{
"name": "delete",
"description": "Emitted when the delete icon is clicked.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#events-delete"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "button",
"description": "Internal `<button>` or `<a>` element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-button"
},
{
"name": "label",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-label"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-end-icon"
},
{
"name": "selected-icon",
"description": "Left icon when selected.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-selected-icon"
},
{
"name": "delete-icon",
"description": "Delete icon on the right.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-delete-icon"
},
{
"name": "loading",
"description": "The `<mdui-circular-progress>` element for the loading state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/chip#cssParts-loading"
}
]
}
},
{
"name": "mdui-circular-progress",
"description": "Circular Progress Component \n\n```html\n<mdui-circular-progress></mdui-circular-progress>\n```",
"attributes": [
{
"name": "max",
"description": "Sets the maximum value for the progress indicator. The default value is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-max"
},
{
"name": "value",
"description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress",
"js": {
"properties": [
{
"name": "max",
"description": "Sets the maximum value for the progress indicator. The default value is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-max"
},
{
"name": "value",
"description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/circular-progress#attributes-value"
}
]
}
},
{
"name": "mdui-collapse-item",
"description": "Collapse Item Component Use with the `<mdui-collapse>` component \n\n```html\n<mdui-collapse>\n <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
"attributes": [
{
"name": "value",
"description": "Specifies the value of the collapsible panel item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-value"
},
{
"name": "header",
"description": "Sets the header text for the collapsible panel item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-header"
},
{
"name": "disabled",
"description": "Disables the collapsible panel item.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-disabled"
},
{
"name": "trigger",
"description": "The element that toggles collapse on click. This can be a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). By default, the entire header area is the trigger.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-trigger"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse",
"slots": [
{
"name": "",
"description": "Main content of the collapsible panel item.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-slots-default"
},
{
"name": "header",
"description": "Content of the collapsible panel item's header.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-slots-header"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "Specifies the value of the collapsible panel item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-value"
},
{
"name": "header",
"description": "Sets the header text for the collapsible panel item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-header"
},
{
"name": "disabled",
"description": "Disables the collapsible panel item.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-disabled"
},
{
"name": "trigger",
"description": "The element that toggles collapse on click. This can be a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). By default, the entire header area is the trigger.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-attributes-trigger"
}
],
"events": [
{
"name": "open",
"description": "Emitted when the collapse item starts to open.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-open"
},
{
"name": "opened",
"description": "Emitted after the collapse item has opened and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-opened"
},
{
"name": "close",
"description": "Emitted when the collapse item starts to close.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-close"
},
{
"name": "closed",
"description": "Emitted after the collapse item has closed and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-events-closed"
}
]
},
"css": {
"parts": [
{
"name": "header",
"description": "Content of the collapsible panel's header.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-cssParts-header"
},
{
"name": "body",
"description": "Content of the collapsible panel's body.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-item-cssParts-body"
}
]
}
},
{
"name": "mdui-collapse",
"description": "Collapse Panel Component Use with the `<mdui-collapse-item>` component \n\n```html\n<mdui-collapse>\n <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
"attributes": [
{
"name": "accordion",
"description": "Activates accordion mode.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-accordion"
},
{
"name": "value",
"description": "Specifies the open `<mdui-collapse-item>` value.\n\n**Note**: The HTML attribute is always a string and can only be set initially when `accordion` is `true`. The JavaScript property is a string when `accordion` is `true` and a string array when `accordion` is `false`. To change this value when `accordion` is `false`, update the JavaScript property.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-value"
},
{
"name": "disabled",
"description": "Disables the collapsible panel.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-disabled"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse",
"slots": [
{
"name": "",
"description": "The `<mdui-collapse-item>` components.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-slots-default"
}
],
"js": {
"properties": [
{
"name": "accordion",
"description": "Activates accordion mode.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-accordion"
},
{
"name": "value",
"description": "Specifies the open `<mdui-collapse-item>` value.\n\n**Note**: The HTML attribute is always a string and can only be set initially when `accordion` is `true`. The JavaScript property is a string when `accordion` is `true` and a string array when `accordion` is `false`. To change this value when `accordion` is `false`, update the JavaScript property.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-value"
},
{
"name": "disabled",
"description": "Disables the collapsible panel.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-attributes-disabled"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the currently open collapsible item changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/collapse#collapse-events-change"
}
]
}
},
{
"name": "mdui-dialog",
"description": "Dialog Component \n\n```html\n<mdui-dialog>content</mdui-dialog>\n```",
"attributes": [
{
"name": "icon",
"description": "Sets the Material Icons name for the top icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-icon"
},
{
"name": "headline",
"description": "Sets the dialog title. Alternatively, use `slot=\"headline\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-headline"
},
{
"name": "description",
"description": "The text displayed below the title. Alternatively, use `slot=\"description\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-description"
},
{
"name": "open",
"description": "Opens the dialog.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-open"
},
{
"name": "fullscreen",
"description": "Displays the dialog in full-screen mode.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-fullscreen"
},
{
"name": "close-on-esc",
"description": "Closes the dialog when the ESC key is pressed.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-close-on-esc"
},
{
"name": "close-on-overlay-click",
"description": "Closes the dialog when the overlay is clicked.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-close-on-overlay-click"
},
{
"name": "stacked-actions",
"description": "Stacks the bottom action buttons vertically.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-stacked-actions"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog",
"slots": [
{
"name": "header",
"description": "Header area; contains the `icon` and `headline` slots by default.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-header"
},
{
"name": "icon",
"description": "Top icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-icon"
},
{
"name": "headline",
"description": "Top headline.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-headline"
},
{
"name": "description",
"description": "Text below the title.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-description"
},
{
"name": "",
"description": "Main content of the dialog.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-default"
},
{
"name": "action",
"description": "Elements in the bottom action bar.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#slots-action"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "Sets the Material Icons name for the top icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-icon"
},
{
"name": "headline",
"description": "Sets the dialog title. Alternatively, use `slot=\"headline\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-headline"
},
{
"name": "description",
"description": "The text displayed below the title. Alternatively, use `slot=\"description\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-description"
},
{
"name": "open",
"description": "Opens the dialog.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-open"
},
{
"name": "fullscreen",
"description": "Displays the dialog in full-screen mode.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-fullscreen"
},
{
"name": "closeOnEsc",
"description": "Closes the dialog when the ESC key is pressed.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-closeOnEsc"
},
{
"name": "closeOnOverlayClick",
"description": "Closes the dialog when the overlay is clicked.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-closeOnOverlayClick"
},
{
"name": "stackedActions",
"description": "Stacks the bottom action buttons vertically.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#attributes-stackedActions"
}
],
"events": [
{
"name": "open",
"description": "Emitted when the dialog starts to open. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-open"
},
{
"name": "opened",
"description": "Emitted after the dialog has opened and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-opened"
},
{
"name": "close",
"description": "Emitted when the dialog starts to close. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-close"
},
{
"name": "closed",
"description": "Emitted after the dialog has closed and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-closed"
},
{
"name": "overlay-click",
"description": "Emitted when the overlay is clicked.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#events-overlay-click"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssProperties-z-index"
}
],
"parts": [
{
"name": "overlay",
"description": "Overlay layer.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-overlay"
},
{
"name": "panel",
"description": "Dialog container.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-panel"
},
{
"name": "header",
"description": "Dialog header, includes icon and headline.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-header"
},
{
"name": "icon",
"description": "Top icon in header.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-icon"
},
{
"name": "headline",
"description": "Top headline in header.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-headline"
},
{
"name": "body",
"description": "Dialog body.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-body"
},
{
"name": "description",
"description": "Subtext in body.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-description"
},
{
"name": "action",
"description": "Bottom action buttons.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dialog#cssParts-action"
}
]
}
},
{
"name": "mdui-divider",
"description": "Divider Component \n\n```html\n<mdui-divider></mdui-divider>\n```",
"attributes": [
{
"name": "vertical",
"description": "Displays the divider vertically.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-vertical"
},
{
"name": "inset",
"description": "Adds an inset from the left side.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-inset"
},
{
"name": "middle",
"description": "Adds insets from both the left and right sides.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-middle"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/divider",
"js": {
"properties": [
{
"name": "vertical",
"description": "Displays the divider vertically.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-vertical"
},
{
"name": "inset",
"description": "Adds an inset from the left side.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-inset"
},
{
"name": "middle",
"description": "Adds insets from both the left and right sides.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/divider#attributes-middle"
}
]
}
},
{
"name": "mdui-dropdown",
"description": "Dropdown Component \n\n```html\n<mdui-dropdown>\n <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n <mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n </mdui-menu>\n</mdui-dropdown>\n```",
"attributes": [
{
"name": "open",
"description": "Opens the dropdown.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open"
},
{
"name": "disabled",
"description": "Disables the dropdown.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-disabled"
},
{
"name": "trigger",
"description": "Defines how the dropdown opens. Multiple space-separated values are supported. Possible values:\n\n* `click`: Triggers on click.\n* `hover`: Triggers on mouse hover.\n* `focus`: Triggers on focus.\n* `contextmenu`: Triggers on right-click or long press.\n* `manual`: If used, the dropdown can only be opened and closed programmatically, and no other trigger methods can be specified.",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'contextmenu'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-trigger"
},
{
"name": "placement",
"description": "Sets the dropdown position. Possible values:\n\n* `auto`: Automatically determined.\n* `top-start`: Above and left-aligned.\n* `top`: Above and centered.\n* `top-end`: Above and right-aligned.\n* `bottom-start`: Below and left-aligned.\n* `bottom`: Below and centered.\n* `bottom-end`: Below and right-aligned.\n* `left-start`: Left and top-aligned.\n* `left`: Left and centered.\n* `left-end`: Left and bottom-aligned.\n* `right-start`: Right and top-aligned.\n* `right`: Right and centered.\n* `right-end`: Right and bottom-aligned.",
"value": {
"type": [
"'auto'",
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-placement"
},
{
"name": "stay-open-on-click",
"description": "Prevents the dropdown from closing when a [`<mdui-menu-item>`](/en/docs/2/components/menu#menu-item-api) is clicked.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-stay-open-on-click"
},
{
"name": "open-delay",
"description": "Sets the delay (in ms) for opening the dropdown on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open-delay"
},
{
"name": "close-delay",
"description": "Sets the delay (in ms) for closing the dropdown on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-close-delay"
},
{
"name": "open-on-pointer",
"description": "Opens the dropdown at the pointer position. This is typically used for context menus.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open-on-pointer"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown",
"slots": [
{
"name": "",
"description": "The content of the dropdown.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#slots-default"
},
{
"name": "trigger",
"description": "The element that triggers the dropdown, such as an [`<mdui-button>`](/en/docs/2/components/button) element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#slots-trigger"
}
],
"js": {
"properties": [
{
"name": "open",
"description": "Opens the dropdown.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-open"
},
{
"name": "disabled",
"description": "Disables the dropdown.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-disabled"
},
{
"name": "trigger",
"description": "Defines how the dropdown opens. Multiple space-separated values are supported. Possible values:\n\n* `click`: Triggers on click.\n* `hover`: Triggers on mouse hover.\n* `focus`: Triggers on focus.\n* `contextmenu`: Triggers on right-click or long press.\n* `manual`: If used, the dropdown can only be opened and closed programmatically, and no other trigger methods can be specified.",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'contextmenu'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-trigger"
},
{
"name": "placement",
"description": "Sets the dropdown position. Possible values:\n\n* `auto`: Automatically determined.\n* `top-start`: Above and left-aligned.\n* `top`: Above and centered.\n* `top-end`: Above and right-aligned.\n* `bottom-start`: Below and left-aligned.\n* `bottom`: Below and centered.\n* `bottom-end`: Below and right-aligned.\n* `left-start`: Left and top-aligned.\n* `left`: Left and centered.\n* `left-end`: Left and bottom-aligned.\n* `right-start`: Right and top-aligned.\n* `right`: Right and centered.\n* `right-end`: Right and bottom-aligned.",
"value": {
"type": [
"'auto'",
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-placement"
},
{
"name": "stayOpenOnClick",
"description": "Prevents the dropdown from closing when a [`<mdui-menu-item>`](/en/docs/2/components/menu#menu-item-api) is clicked.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-stayOpenOnClick"
},
{
"name": "openDelay",
"description": "Sets the delay (in ms) for opening the dropdown on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-openDelay"
},
{
"name": "closeDelay",
"description": "Sets the delay (in ms) for closing the dropdown on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-closeDelay"
},
{
"name": "openOnPointer",
"description": "Opens the dropdown at the pointer position. This is typically used for context menus.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#attributes-openOnPointer"
}
],
"events": [
{
"name": "open",
"description": "Emitted when the dropdown starts to open. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-open"
},
{
"name": "opened",
"description": "Emitted after the dropdown has opened and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-opened"
},
{
"name": "close",
"description": "Emitted when the dropdown starts to close. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-close"
},
{
"name": "closed",
"description": "Emitted after the dropdown has closed and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#events-closed"
}
]
},
"css": {
"properties": [
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#cssProperties-z-index"
}
],
"parts": [
{
"name": "trigger",
"description": "Container for the element that triggers the dropdown; this is the `trigger` slot container.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#cssParts-trigger"
},
{
"name": "panel",
"description": "The container of the dropdown content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/dropdown#cssParts-panel"
}
]
}
},
{
"name": "mdui-fab",
"description": "Floating Action Button Component \n\n```html\n<mdui-fab icon=\"edit\"></mdui-fab>\n```",
"attributes": [
{
"name": "variant",
"description": "Sets the FAB color. Possible values:\n\n* `primary`: Uses the primary container background color.\n* `surface`: Uses the surface container high background color.\n* `secondary`: Uses the secondary container background color.\n* `tertiary`: Uses the tertiary container background color.",
"value": {
"type": [
"'primary'",
"'surface'",
"'secondary'",
"'tertiary'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-variant"
},
{
"name": "size",
"description": "Sets the FAB size. Possible values:\n* `normal`: Normal size.\n* `small`: Small size.\n* `large`: Large size.",
"value": {
"type": [
"'normal'",
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-size"
},
{
"name": "icon",
"description": "Sets the Material Icons name. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-icon"
},
{
"name": "extended",
"description": "Extends the FAB to show text alongside the icon.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-extended"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-tabindex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-form"
},
{
"name": "formaction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formaction"
},
{
"name": "formenctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formenctype"
},
{
"name": "formmethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab",
"slots": [
{
"name": "",
"description": "Text content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#slots-default"
},
{
"name": "icon",
"description": "Icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#slots-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Sets the FAB color. Possible values:\n\n* `primary`: Uses the primary container background color.\n* `surface`: Uses the surface container high background color.\n* `secondary`: Uses the secondary container background color.\n* `tertiary`: Uses the tertiary container background color.",
"value": {
"type": [
"'primary'",
"'surface'",
"'secondary'",
"'tertiary'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-variant"
},
{
"name": "size",
"description": "Sets the FAB size. Possible values:\n* `normal`: Normal size.\n* `small`: Small size.\n* `large`: Large size.",
"value": {
"type": [
"'normal'",
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-size"
},
{
"name": "icon",
"description": "Sets the Material Icons name. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-icon"
},
{
"name": "extended",
"description": "Extends the FAB to show text alongside the icon.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-extended"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-tabIndex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-form"
},
{
"name": "formAction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formAction"
},
{
"name": "formEnctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-formTarget"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-validity"
},
{
"name": "validationMessage",
"description": "The validation message. Returns an empty string when the element is valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the FAB gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#events-focus"
},
{
"name": "blur",
"description": "Emitted when the FAB loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#events-blur"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-small",
"description": "The corner radius of the component when `size=\"small\"`. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssProperties-shape-corner-small"
},
{
"name": "--shape-corner-normal",
"description": "The corner radius of the component when `size=\"normal\"`. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssProperties-shape-corner-normal"
},
{
"name": "--shape-corner-large",
"description": "The corner radius of the component when `size=\"large\"`. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssProperties-shape-corner-large"
}
],
"parts": [
{
"name": "button",
"description": "Internal `<button>` or `<a>` element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-button"
},
{
"name": "label",
"description": "Text on the right side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-label"
},
{
"name": "icon",
"description": "Icon on the left side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-icon"
},
{
"name": "loading",
"description": "The `<mdui-circular-progress>` element for the loading state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/fab#cssParts-loading"
}
]
}
},
{
"name": "mdui-icon",
"description": "Icon Component \n\n```html\n<mdui-icon name=\"search\"></mdui-icon>\n```",
"attributes": [
{
"name": "name",
"description": "Specifies the name of the Material Icons.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-name"
},
{
"name": "src",
"description": "Specifies the path of the SVG icon.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-src"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/icon",
"slots": [
{
"name": "",
"description": "The SVG icon content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/icon#slots-default"
}
],
"js": {
"properties": [
{
"name": "name",
"description": "Specifies the name of the Material Icons.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-name"
},
{
"name": "src",
"description": "Specifies the path of the SVG icon.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/icon#attributes-src"
}
]
}
},
{
"name": "mdui-layout-item",
"description": "Layout Item Component \n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
"attributes": [
{
"name": "placement",
"description": "Determines where the component is placed. Possible values:\n\n* `top`: Places the component at the top.\n* `bottom`: Places the component at the bottom.\n* `left`: Places the component on the left.\n* `right`: Places the component on the right.",
"value": {
"type": [
"'top'",
"'bottom'",
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-placement"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/layout",
"slots": [
{
"name": "",
"description": "Can contain any content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-slots-default"
}
],
"js": {
"properties": [
{
"name": "placement",
"description": "Determines where the component is placed. Possible values:\n\n* `top`: Places the component at the top.\n* `bottom`: Places the component at the bottom.\n* `left`: Places the component on the left.\n* `right`: Places the component on the right.",
"value": {
"type": [
"'top'",
"'bottom'",
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-placement"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-item-attributes-order"
}
]
}
},
{
"name": "mdui-layout-main",
"description": "Layout Main Component \n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/layout",
"slots": [
{
"name": "",
"description": "Can contain any content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-main-slots-default"
}
],
"js": {
"properties": []
}
},
{
"name": "mdui-layout",
"description": "Layout Component \n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
"attributes": [
{
"name": "full-height",
"description": "Sets the layout height to 100%.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-attributes-full-height"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/layout",
"slots": [
{
"name": "",
"description": "Can contain elements such as [`<mdui-top-app-bar>`](/en/docs/2/components/top-app-bar), [`<mdui-bottom-app-bar>`](/en/docs/2/components/bottom-app-bar), [`<mdui-navigation-bar>`](/en/docs/2/components/navigation-bar), [`<mdui-navigation-drawer>`](/en/docs/2/components/navigation-drawer), [`<mdui-navigation-rail>`](/en/docs/2/components/navigation-rail), `<mdui-layout-item>`, and `<mdui-layout-main>`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-slots-default"
}
],
"js": {
"properties": [
{
"name": "fullHeight",
"description": "Sets the layout height to 100%.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/layout#layout-attributes-fullHeight"
}
]
}
},
{
"name": "mdui-linear-progress",
"description": "Linear Progress Component \n\n```html\n<mdui-linear-progress></mdui-linear-progress>\n```",
"attributes": [
{
"name": "max",
"description": "Sets the maximum value for the progress indicator. The default value is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-max"
},
{
"name": "value",
"description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress",
"js": {
"properties": [
{
"name": "max",
"description": "Sets the maximum value for the progress indicator. The default value is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-max"
},
{
"name": "value",
"description": "Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#attributes-value"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "indicator",
"description": "The indicator part.",
"doc-url": "https://www.mdui.org/en/docs/2/components/linear-progress#cssParts-indicator"
}
]
}
},
{
"name": "mdui-list-item",
"description": "List Item Component Use with the `<mdui-list>` component \n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
"attributes": [
{
"name": "headline",
"description": "Main text. Alternatively, use the default slot.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headline"
},
{
"name": "headline-line",
"description": "Maximum number of lines for the main text. Overflow text is truncated. Default is no limit. Possible values:\n\n* `1`: Single-line text that truncates when it overflows.\n* `2`: Two-line text that truncates when it overflows.\n* `3`: Three-line text that truncates when it overflows.",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headline-line"
},
{
"name": "description",
"description": "Subtext. Alternatively, use `slot=\"description\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-description"
},
{
"name": "description-line",
"description": "Maximum number of lines for the subtext. Overflow text is truncated. Default is no limit. Possible values:\n\n* `1`: Single-line text that truncates when it overflows.\n* `2`: Two-line text that truncates when it overflows.\n* `3`: Three-line text that truncates when it overflows.",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-description-line"
},
{
"name": "icon",
"description": "Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-icon"
},
{
"name": "end-icon",
"description": "Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-end-icon"
},
{
"name": "disabled",
"description": "Disables the list item. It dims the item and disables interactive elements like [`<mdui-checkbox>`](/en/docs/2/components/checkbox), [`<mdui-radio>`](/en/docs/2/components/radio), and [`<mdui-switch>`](/en/docs/2/components/switch).",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-disabled"
},
{
"name": "active",
"description": "Marks the list item as active.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-active"
},
{
"name": "nonclickable",
"description": "Disables the list item's default click action, but interactive elements like [`<mdui-checkbox>`](/en/docs/2/components/checkbox), [`<mdui-radio>`](/en/docs/2/components/radio), and [`<mdui-switch>`](/en/docs/2/components/switch) inside it remain functional.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-nonclickable"
},
{
"name": "rounded",
"description": "Applies a rounded appearance to the list item.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rounded"
},
{
"name": "alignment",
"description": "Vertical alignment of the list item. Possible values:\n\n* `start`: Aligns to the top.\n* `center`: Aligns to the center.\n* `end`: Aligns to the bottom.",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-alignment"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/list",
"slots": [
{
"name": "",
"description": "Main text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-default"
},
{
"name": "description",
"description": "Subtext.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-description"
},
{
"name": "icon",
"description": "Element on the left of the list item.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-icon"
},
{
"name": "end-icon",
"description": "Element on the right of the list item.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-end-icon"
},
{
"name": "custom",
"description": "Any custom content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-slots-custom"
}
],
"js": {
"properties": [
{
"name": "headline",
"description": "Main text. Alternatively, use the default slot.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headline"
},
{
"name": "headlineLine",
"description": "Maximum number of lines for the main text. Overflow text is truncated. Default is no limit. Possible values:\n\n* `1`: Single-line text that truncates when it overflows.\n* `2`: Two-line text that truncates when it overflows.\n* `3`: Three-line text that truncates when it overflows.",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-headlineLine"
},
{
"name": "description",
"description": "Subtext. Alternatively, use `slot=\"description\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-description"
},
{
"name": "descriptionLine",
"description": "Maximum number of lines for the subtext. Overflow text is truncated. Default is no limit. Possible values:\n\n* `1`: Single-line text that truncates when it overflows.\n* `2`: Two-line text that truncates when it overflows.\n* `3`: Three-line text that truncates when it overflows.",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-descriptionLine"
},
{
"name": "icon",
"description": "Material Icons name on the left. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-icon"
},
{
"name": "endIcon",
"description": "Material Icons name on the right. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-endIcon"
},
{
"name": "disabled",
"description": "Disables the list item. It dims the item and disables interactive elements like [`<mdui-checkbox>`](/en/docs/2/components/checkbox), [`<mdui-radio>`](/en/docs/2/components/radio), and [`<mdui-switch>`](/en/docs/2/components/switch).",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-disabled"
},
{
"name": "active",
"description": "Marks the list item as active.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-active"
},
{
"name": "nonclickable",
"description": "Disables the list item's default click action, but interactive elements like [`<mdui-checkbox>`](/en/docs/2/components/checkbox), [`<mdui-radio>`](/en/docs/2/components/radio), and [`<mdui-switch>`](/en/docs/2/components/switch) inside it remain functional.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-nonclickable"
},
{
"name": "rounded",
"description": "Applies a rounded appearance to the list item.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rounded"
},
{
"name": "alignment",
"description": "Vertical alignment of the list item. Possible values:\n\n* `start`: Aligns to the top.\n* `center`: Aligns to the center.\n* `end`: Aligns to the bottom.",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-alignment"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the list item gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-events-focus"
},
{
"name": "blur",
"description": "Emitted when the list item loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssProperties-shape-corner"
},
{
"name": "--shape-corner-rounded",
"description": "The corner radius of the component when `rounded` is specified. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssProperties-shape-corner-rounded"
}
],
"parts": [
{
"name": "container",
"description": "List item container.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-container"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-end-icon"
},
{
"name": "body",
"description": "Middle section.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-body"
},
{
"name": "headline",
"description": "Main title.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-headline"
},
{
"name": "description",
"description": "Subtitle.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-item-cssParts-description"
}
]
}
},
{
"name": "mdui-list-subheader",
"description": "List Subheader Component Use with the `<mdui-list>` component \n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/list",
"slots": [
{
"name": "",
"description": "Subheader text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-subheader-slots-default"
}
],
"js": {
"properties": []
}
},
{
"name": "mdui-list",
"description": "List Component Use with the `<mdui-list-item>` component \n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/list",
"slots": [
{
"name": "",
"description": "Contains `<mdui-list-item>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/list#list-slots-default"
}
],
"js": {
"properties": []
}
},
{
"name": "mdui-menu-item",
"description": "Menu Item Component \n\n```html\n<mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
"attributes": [
{
"name": "value",
"description": "The value of the menu item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-value"
},
{
"name": "disabled",
"description": "Disables the menu item.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-disabled"
},
{
"name": "icon",
"description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`. An empty string reserves space for an icon.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-icon"
},
{
"name": "end-icon",
"description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-end-icon"
},
{
"name": "end-text",
"description": "Specifies the right text. Alternatively, use `slot=\"end-text\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-end-text"
},
{
"name": "selected-icon",
"description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-selected-icon"
},
{
"name": "submenu-open",
"description": "Opens the submenu.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-submenu-open"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu",
"slots": [
{
"name": "",
"description": "Menu item text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-default"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-end-icon"
},
{
"name": "end-text",
"description": "Right text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-end-text"
},
{
"name": "selected-icon",
"description": "Icon for the selected state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-selected-icon"
},
{
"name": "submenu",
"description": "Submenu.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-submenu"
},
{
"name": "custom",
"description": "Any custom content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-slots-custom"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "The value of the menu item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-value"
},
{
"name": "disabled",
"description": "Disables the menu item.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-disabled"
},
{
"name": "icon",
"description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`. An empty string reserves space for an icon.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-icon"
},
{
"name": "endIcon",
"description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-endIcon"
},
{
"name": "endText",
"description": "Specifies the right text. Alternatively, use `slot=\"end-text\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-endText"
},
{
"name": "selectedIcon",
"description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-selectedIcon"
},
{
"name": "submenuOpen",
"description": "Opens the submenu.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-submenuOpen"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the menu item gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-focus"
},
{
"name": "blur",
"description": "Emitted when the menu item loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-blur"
},
{
"name": "submenu-open",
"description": "Emitted when the submenu starts to open. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-open"
},
{
"name": "submenu-opened",
"description": "Emitted after the submenu has opened and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-opened"
},
{
"name": "submenu-close",
"description": "Emitted when the submenu starts to close. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-close"
},
{
"name": "submenu-closed",
"description": "Emitted after the submenu has closed and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-events-submenu-closed"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "Menu item container.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-container"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-icon"
},
{
"name": "label",
"description": "Text content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-label"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-end-icon"
},
{
"name": "end-text",
"description": "Right text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-end-text"
},
{
"name": "selected-icon",
"description": "Icon for the selected state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-selected-icon"
},
{
"name": "submenu",
"description": "Submenu element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-item-cssParts-submenu"
}
]
}
},
{
"name": "mdui-menu",
"description": "Menu Component Use with the `<mdui-menu-item>` component \n\n```html\n<mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
"attributes": [
{
"name": "selects",
"description": "Controls whether menu items can be selected. They are not selectable by default. Possible values:\n\n* `single`: Only one item can be selected at a time.\n* `multiple`: Multiple items can be selected.",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-selects"
},
{
"name": "value",
"description": "The value of the selected `<mdui-menu-item>`.\n\n**Note**: The HTML attribute always accepts a string and can only be used as an initial value when `selects=\"single\"`. The JavaScript property is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. When `selects=\"multiple\"`, update the JavaScript property to change this value.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-value"
},
{
"name": "dense",
"description": "Indicates whether the menu items use a compact layout.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-dense"
},
{
"name": "submenu-trigger",
"description": "Defines how submenus open. Multiple space-separated values are supported. Possible values:\n\n* `click`: Opens the submenu when the menu item is clicked.\n* `hover`: Opens the submenu when hovering over a menu item.\n* `focus`: Opens the submenu when the menu item receives focus.\n* `manual`: Submenus can only be opened and closed programmatically; no other trigger methods can be specified.",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenu-trigger"
},
{
"name": "submenu-open-delay",
"description": "The delay (in milliseconds) before a submenu opens on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenu-open-delay"
},
{
"name": "submenu-close-delay",
"description": "The delay (in milliseconds) before a submenu closes on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenu-close-delay"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu",
"slots": [
{
"name": "",
"description": "Submenu items (`<mdui-menu-item>`), dividers ([`<mdui-divider>`](/en/docs/2/components/divider)), and other elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-slots-default"
}
],
"js": {
"properties": [
{
"name": "selects",
"description": "Controls whether menu items can be selected. They are not selectable by default. Possible values:\n\n* `single`: Only one item can be selected at a time.\n* `multiple`: Multiple items can be selected.",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-selects"
},
{
"name": "value",
"description": "The value of the selected `<mdui-menu-item>`.\n\n**Note**: The HTML attribute always accepts a string and can only be used as an initial value when `selects=\"single\"`. The JavaScript property is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. When `selects=\"multiple\"`, update the JavaScript property to change this value.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-value"
},
{
"name": "dense",
"description": "Indicates whether the menu items use a compact layout.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-dense"
},
{
"name": "submenuTrigger",
"description": "Defines how submenus open. Multiple space-separated values are supported. Possible values:\n\n* `click`: Opens the submenu when the menu item is clicked.\n* `hover`: Opens the submenu when hovering over a menu item.\n* `focus`: Opens the submenu when the menu item receives focus.\n* `manual`: Submenus can only be opened and closed programmatically; no other trigger methods can be specified.",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenuTrigger"
},
{
"name": "submenuOpenDelay",
"description": "The delay (in milliseconds) before a submenu opens on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenuOpenDelay"
},
{
"name": "submenuCloseDelay",
"description": "The delay (in milliseconds) before a submenu closes on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-attributes-submenuCloseDelay"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the selected state of menu items changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-events-change"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/menu#menu-cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-navigation-bar-item",
"description": "Navigation Bar Item Component Use with the `<mdui-navigation-bar>` component \n\n```html\n<mdui-navigation-bar>\n <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
"attributes": [
{
"name": "icon",
"description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
},
{
"name": "active-icon",
"description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-active-icon"
},
{
"name": "value",
"description": "The value of the navigation item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar",
"slots": [
{
"name": "",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-default"
},
{
"name": "icon",
"description": "Icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-icon"
},
{
"name": "active-icon",
"description": "Icon for the active state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-active-icon"
},
{
"name": "badge",
"description": "Badge.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-slots-badge"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
},
{
"name": "activeIcon",
"description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-activeIcon"
},
{
"name": "value",
"description": "The value of the navigation item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the navigation bar item gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-events-focus"
},
{
"name": "blur",
"description": "Emitted when the navigation bar item loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-indicator",
"description": "The corner radius of the indicator. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssProperties-shape-corner-indicator"
}
],
"parts": [
{
"name": "container",
"description": "Container for the navigation item.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-container"
},
{
"name": "indicator",
"description": "Indicator.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-indicator"
},
{
"name": "badge",
"description": "Badge.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-badge"
},
{
"name": "icon",
"description": "Icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-icon"
},
{
"name": "active-icon",
"description": "Icon for the active state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-active-icon"
},
{
"name": "label",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-item-cssParts-label"
}
]
}
},
{
"name": "mdui-navigation-bar",
"description": "Navigation Bar Component Use with the `<mdui-navigation-bar-item>` component \n\n```html\n<mdui-navigation-bar>\n <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
"attributes": [
{
"name": "hide",
"description": "Whether the navigation bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
},
{
"name": "label-visibility",
"description": "Specifies when the text is shown. Possible values:\n\n* `auto`: Visible if there are 3 or fewer items; otherwise, only visible in the selected state.\n* `selected`: Only visible in the selected state.\n* `labeled`: Always visible.\n* `unlabeled`: Never visible.",
"value": {
"type": [
"'auto'",
"'selected'",
"'labeled'",
"'unlabeled'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-label-visibility"
},
{
"name": "value",
"description": "The value of the selected `<mdui-navigation-bar-item>`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-value"
},
{
"name": "scroll-behavior",
"description": "Defines the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-behavior"
},
{
"name": "scroll-target",
"description": "The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). Defaults to `window`.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-target"
},
{
"name": "scroll-threshold",
"description": "The scroll distance (in pixels) required to trigger the scroll behavior.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-threshold"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar",
"slots": [
{
"name": "",
"description": "Contains `<mdui-navigation-bar-item>` components.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-slots-default"
}
],
"js": {
"properties": [
{
"name": "hide",
"description": "Whether the navigation bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
},
{
"name": "labelVisibility",
"description": "Specifies when the text is shown. Possible values:\n\n* `auto`: Visible if there are 3 or fewer items; otherwise, only visible in the selected state.\n* `selected`: Only visible in the selected state.\n* `labeled`: Always visible.\n* `unlabeled`: Never visible.",
"value": {
"type": [
"'auto'",
"'selected'",
"'labeled'",
"'unlabeled'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-labelVisibility"
},
{
"name": "value",
"description": "The value of the selected `<mdui-navigation-bar-item>`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-value"
},
{
"name": "scrollBehavior",
"description": "Defines the scroll behavior. Possible values:\n\n* `hide`: Hides when scrolling.",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scrollBehavior"
},
{
"name": "scrollTarget",
"description": "The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). Defaults to `window`.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scrollTarget"
},
{
"name": "scrollThreshold",
"description": "The scroll distance (in pixels) required to trigger the scroll behavior.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-scrollThreshold"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-attributes-order"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-change"
},
{
"name": "show",
"description": "Emitted when the navigation bar starts to show. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-show"
},
{
"name": "shown",
"description": "Emitted after the navigation bar has shown and animations are complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-shown"
},
{
"name": "hide",
"description": "Emitted when the navigation bar starts to hide. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-hide"
},
{
"name": "hidden",
"description": "Emitted after the navigation bar has hidden and animations are complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-events-hidden"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-bar#navigation-bar-cssProperties-z-index"
}
]
}
},
{
"name": "mdui-navigation-drawer",
"description": "Navigation Drawer Component \n\n```html\n<mdui-navigation-drawer>content</mdui-navigation-drawer>\n```",
"attributes": [
{
"name": "open",
"description": "Opens the navigation drawer.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-open"
},
{
"name": "modal",
"description": "Displays an overlay when open.\n\nOn narrow devices (screen width < [`--mdui-breakpoint-md`](/en/docs/2/styles/design-tokens#breakpoint)), the overlay is always displayed.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-modal"
},
{
"name": "close-on-esc",
"description": "Closes the drawer when the ESC key is pressed and an overlay is present.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-close-on-esc"
},
{
"name": "close-on-overlay-click",
"description": "Closes the drawer when the overlay is clicked.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-close-on-overlay-click"
},
{
"name": "placement",
"description": "Sets the drawer's position. Possible values:\n\n* `left`: Displays on the left side.\n* `right`: Displays on the right side.",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-placement"
},
{
"name": "contained",
"description": "By default, the navigation drawer is positioned relative to the `body` element. If set, it is positioned relative to its parent element.\n\n**Note**: You must manually set `position: relative; overflow: hidden;` on the parent element when this attribute is set.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-contained"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer",
"slots": [
{
"name": "",
"description": "Contents of the navigation drawer.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#slots-default"
}
],
"js": {
"properties": [
{
"name": "open",
"description": "Opens the navigation drawer.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-open"
},
{
"name": "modal",
"description": "Displays an overlay when open.\n\nOn narrow devices (screen width < [`--mdui-breakpoint-md`](/en/docs/2/styles/design-tokens#breakpoint)), the overlay is always displayed.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-modal"
},
{
"name": "closeOnEsc",
"description": "Closes the drawer when the ESC key is pressed and an overlay is present.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-closeOnEsc"
},
{
"name": "closeOnOverlayClick",
"description": "Closes the drawer when the overlay is clicked.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-closeOnOverlayClick"
},
{
"name": "placement",
"description": "Sets the drawer's position. Possible values:\n\n* `left`: Displays on the left side.\n* `right`: Displays on the right side.",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-placement"
},
{
"name": "contained",
"description": "By default, the navigation drawer is positioned relative to the `body` element. If set, it is positioned relative to its parent element.\n\n**Note**: You must manually set `position: relative; overflow: hidden;` on the parent element when this attribute is set.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-contained"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#attributes-order"
}
],
"events": [
{
"name": "open",
"description": "Emitted when the navigation drawer starts to open. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-open"
},
{
"name": "opened",
"description": "Emitted after the navigation drawer has opened and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-opened"
},
{
"name": "close",
"description": "Emitted when the navigation drawer starts to close. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-close"
},
{
"name": "closed",
"description": "Emitted after the navigation drawer has closed and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-closed"
},
{
"name": "overlay-click",
"description": "Emitted when the overlay is clicked.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#events-overlay-click"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssProperties-z-index"
}
],
"parts": [
{
"name": "overlay",
"description": "Overlay element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssParts-overlay"
},
{
"name": "panel",
"description": "Container for the navigation drawer.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-drawer#cssParts-panel"
}
]
}
},
{
"name": "mdui-navigation-rail-item",
"description": "Navigation Rail Item Component Use with the `<mdui-navigation-rail>` component \n\n```html\n<mdui-navigation-rail>\n <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
"attributes": [
{
"name": "icon",
"description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
},
{
"name": "active-icon",
"description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-active-icon"
},
{
"name": "value",
"description": "The value of the navigation item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail",
"slots": [
{
"name": "",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-default"
},
{
"name": "icon",
"description": "Icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-icon"
},
{
"name": "active-icon",
"description": "Icon for the active state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-active-icon"
},
{
"name": "badge",
"description": "Badge.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-slots-badge"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "Specifies the Material Icons name for the inactive state. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
},
{
"name": "activeIcon",
"description": "Specifies the Material Icons name for the active state. Alternatively, use `slot=\"active-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-activeIcon"
},
{
"name": "value",
"description": "The value of the navigation item.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates a new browsing context when the hyperlink would otherwise open in a top-level context that is not auxiliary (for example, when `target=\"_blank\"` is specified).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the navigation rail item gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-events-focus"
},
{
"name": "blur",
"description": "Emitted when the navigation rail item loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-indicator",
"description": "The corner radius of the indicator. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssProperties-shape-corner-indicator"
}
],
"parts": [
{
"name": "container",
"description": "Container for the navigation item.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-container"
},
{
"name": "indicator",
"description": "Indicator.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-indicator"
},
{
"name": "badge",
"description": "Badge.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-badge"
},
{
"name": "icon",
"description": "Icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-icon"
},
{
"name": "active-icon",
"description": "Icon for the active state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-active-icon"
},
{
"name": "label",
"description": "Text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-item-cssParts-label"
}
]
}
},
{
"name": "mdui-navigation-rail",
"description": "Navigation Rail Component Use with the `<mdui-navigation-rail-item>` component \n\n```html\n<mdui-navigation-rail>\n <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
"attributes": [
{
"name": "value",
"description": "The value of the selected `<mdui-navigation-rail-item>`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-value"
},
{
"name": "placement",
"description": "Sets the navigation rail's position. Possible values:\n\n* `left`: Displays on the left.\n* `right`: Displays on the right.",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
},
{
"name": "alignment",
"description": "Sets the alignment of `<mdui-navigation-rail-item>` elements. Possible values:\n\n* `start`: Aligns to the top.\n* `center`: Aligns to the center.\n* `end`: Aligns to the bottom.",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
},
{
"name": "contained",
"description": "By default, the navigation rail is positioned relative to the `body` element. If set, it is positioned relative to its parent element.\n\n**Note**: You must manually set `position: relative;` on the parent element when this attribute is set.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
},
{
"name": "divider",
"description": "Adds a divider between the navigation rail and the page content.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail",
"slots": [
{
"name": "",
"description": "Contains `<mdui-navigation-rail-item>` components.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-slots-default"
},
{
"name": "top",
"description": "Top element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-slots-top"
},
{
"name": "bottom",
"description": "Bottom element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-slots-bottom"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "The value of the selected `<mdui-navigation-rail-item>`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-value"
},
{
"name": "placement",
"description": "Sets the navigation rail's position. Possible values:\n\n* `left`: Displays on the left.\n* `right`: Displays on the right.",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
},
{
"name": "alignment",
"description": "Sets the alignment of `<mdui-navigation-rail-item>` elements. Possible values:\n\n* `start`: Aligns to the top.\n* `center`: Aligns to the center.\n* `end`: Aligns to the bottom.",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
},
{
"name": "contained",
"description": "By default, the navigation rail is positioned relative to the `body` element. If set, it is positioned relative to its parent element.\n\n**Note**: You must manually set `position: relative;` on the parent element when this attribute is set.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
},
{
"name": "divider",
"description": "Adds a divider between the navigation rail and the page content.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-attributes-order"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-events-change"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssProperties-z-index"
}
],
"parts": [
{
"name": "top",
"description": "Container for the top element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssParts-top"
},
{
"name": "bottom",
"description": "Container for the bottom element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssParts-bottom"
},
{
"name": "items",
"description": "Container for `<mdui-navigation-rail-item>` components.",
"doc-url": "https://www.mdui.org/en/docs/2/components/navigation-rail#navigation-rail-cssParts-items"
}
]
}
},
{
"name": "mdui-radio-group",
"description": "Radio Group Component Use with the `<mdui-radio>` component \n\n```html\n<mdui-radio-group value=\"chinese\">\n <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
"attributes": [
{
"name": "disabled",
"description": "Disables the radio group.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-disabled"
},
{
"name": "form",
"description": "Associates the radio group with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the radio group uses its parent `<form>`, if any.\n\nThis lets the radio group work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-form"
},
{
"name": "name",
"description": "The name of the radio group, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-name"
},
{
"name": "value",
"description": "The value of the selected radio button, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-value"
},
{
"name": "required",
"description": "Requires a radio selection when the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-required"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio",
"slots": [
{
"name": "",
"description": "`<mdui-radio>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-slots-default"
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "Disables the radio group.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-disabled"
},
{
"name": "form",
"description": "Associates the radio group with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the radio group uses its parent `<form>`, if any.\n\nThis lets the radio group work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-form"
},
{
"name": "name",
"description": "The name of the radio group, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-name"
},
{
"name": "value",
"description": "The value of the selected radio button, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-value"
},
{
"name": "defaultValue",
"description": "The default selected value. The radio group resets to this value when the form is reset. JavaScript only.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-defaultValue"
},
{
"name": "required",
"description": "Requires a radio selection when the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-required"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-attributes-validationMessage"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the selected value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-events-change"
},
{
"name": "input",
"description": "Emitted when the selected value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-events-input"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-group-events-invalid"
}
]
}
},
{
"name": "mdui-radio",
"description": "Radio Component Use with the `<mdui-radio-group>` component \n\n```html\n<mdui-radio-group value=\"chinese\">\n <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
"attributes": [
{
"name": "value",
"description": "Specifies the value of the radio.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-value"
},
{
"name": "disabled",
"description": "Disables the radio.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-disabled"
},
{
"name": "checked",
"description": "Sets the radio to the checked state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checked"
},
{
"name": "unchecked-icon",
"description": "Specifies the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Specifies the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checked-icon"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio",
"slots": [
{
"name": "",
"description": "Text content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-slots-default"
},
{
"name": "unchecked-icon",
"description": "Icon for the unchecked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-slots-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Icon for the checked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-slots-checked-icon"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "Specifies the value of the radio.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-value"
},
{
"name": "disabled",
"description": "Disables the radio.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-disabled"
},
{
"name": "checked",
"description": "Sets the radio to the checked state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checked"
},
{
"name": "uncheckedIcon",
"description": "Specifies the Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-uncheckedIcon"
},
{
"name": "checkedIcon",
"description": "Specifies the Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-checkedIcon"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the radio gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-events-focus"
},
{
"name": "blur",
"description": "Emitted when the radio loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-events-blur"
},
{
"name": "change",
"description": "Emitted when the radio is selected.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-events-change"
}
]
},
"css": {
"parts": [
{
"name": "control",
"description": "Container for the left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-control"
},
{
"name": "unchecked-icon",
"description": "Icon for the unchecked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Icon for the checked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-checked-icon"
},
{
"name": "label",
"description": "Text content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/radio#radio-cssParts-label"
}
]
}
},
{
"name": "mdui-range-slider",
"description": "Range Slider Component \n\n```html\n<mdui-range-slider></mdui-range-slider>\n```",
"attributes": [
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tabindex"
},
{
"name": "min",
"description": "Specifies the minimum value. Default is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-min"
},
{
"name": "max",
"description": "Specifies the maximum value. Default is `100`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-max"
},
{
"name": "step",
"description": "Specifies the step interval. Default is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-step"
},
{
"name": "tickmarks",
"description": "Adds tickmarks to the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "Hides the value label.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "Disables the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-disabled"
},
{
"name": "form",
"description": "Associates the slider with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the slider uses its parent `<form>`, if any.\n\nThis lets the slider work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-form"
},
{
"name": "name",
"description": "Specifies the slider's name, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-name"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider",
"js": {
"properties": [
{
"name": "defaultValue",
"description": "Specifies the default value. The slider resets to this state when the form is reset. JavaScript only.",
"value": {
"type": "number[]"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-defaultValue"
},
{
"name": "value",
"description": "Specifies the slider value as an array. This value is submitted with form data.\n\n**Note**: This value cannot be set initially via an HTML attribute. Use the JavaScript property to change it.",
"value": {
"type": "number[]"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-value"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tabIndex"
},
{
"name": "min",
"description": "Specifies the minimum value. Default is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-min"
},
{
"name": "max",
"description": "Specifies the maximum value. Default is `100`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-max"
},
{
"name": "step",
"description": "Specifies the step interval. Default is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-step"
},
{
"name": "tickmarks",
"description": "Adds tickmarks to the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "Hides the value label.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "Disables the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-disabled"
},
{
"name": "form",
"description": "Associates the slider with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the slider uses its parent `<form>`, if any.\n\nThis lets the slider work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-form"
},
{
"name": "name",
"description": "Specifies the slider's name, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-name"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-validationMessage"
},
{
"name": "labelFormatter",
"description": "Specifies a function to format the tooltip's value. The function receives the slider's value as an argument and should return a string to display in the tooltip.",
"value": {
"type": "(value: number) => string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#attributes-labelFormatter"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the range slider gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-focus"
},
{
"name": "blur",
"description": "Emitted when the range slider loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-blur"
},
{
"name": "change",
"description": "Emitted when the value changes and the range slider loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-change"
},
{
"name": "input",
"description": "Emitted when the value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-input"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "track-inactive",
"description": "Track for the inactive state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-track-inactive"
},
{
"name": "track-active",
"description": "Track for the active state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-track-active"
},
{
"name": "handle",
"description": "Handle for interaction.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-handle"
},
{
"name": "label",
"description": "Value label.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-label"
},
{
"name": "tickmark",
"description": "Tick mark.",
"doc-url": "https://www.mdui.org/en/docs/2/components/range-slider#cssParts-tickmark"
}
]
}
},
{
"name": "mdui-segmented-button-group",
"description": "Segmented Button Group Component Use with the `<mdui-segmented-button>` component \n\n```html\n<mdui-segmented-button-group>\n <mdui-segmented-button>Day</mdui-segmented-button>\n <mdui-segmented-button>Week</mdui-segmented-button>\n <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
"attributes": [
{
"name": "full-width",
"description": "If set, the segmented button group expands to fill the width of its container.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-full-width"
},
{
"name": "selects",
"description": "Controls whether the segmented button group can be selected. By default, it is not selectable. Possible values:\n\n* `single`: Only one can be selected.\n* `multiple`: Multiple selections are allowed.",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
},
{
"name": "disabled",
"description": "Disables the segmented button group.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
},
{
"name": "required",
"description": "Requires a selection when the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-required"
},
{
"name": "form",
"description": "Associates the segmented button group with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the segmented button group uses its parent `<form>`, if any.\n\nThis lets the segmented button group work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-form"
},
{
"name": "name",
"description": "The name of the segmented button group, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-name"
},
{
"name": "value",
"description": "The value of the selected `<mdui-segmented-button>`. This value is submitted with form data.\n\n**Note**: The HTML attribute always accepts a string and can only be used as an initial value when `selects=\"single\"`. The JavaScript property is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. When `selects=\"multiple\"`, update the JavaScript property to change this value.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button",
"slots": [
{
"name": "",
"description": "`<mdui-segmented-button>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-slots-default"
}
],
"js": {
"properties": [
{
"name": "fullWidth",
"description": "If set, the segmented button group expands to fill the width of its container.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-fullWidth"
},
{
"name": "selects",
"description": "Controls whether the segmented button group can be selected. By default, it is not selectable. Possible values:\n\n* `single`: Only one can be selected.\n* `multiple`: Multiple selections are allowed.",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
},
{
"name": "disabled",
"description": "Disables the segmented button group.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
},
{
"name": "required",
"description": "Requires a selection when the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-required"
},
{
"name": "form",
"description": "Associates the segmented button group with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the segmented button group uses its parent `<form>`, if any.\n\nThis lets the segmented button group work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-form"
},
{
"name": "name",
"description": "The name of the segmented button group, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-name"
},
{
"name": "value",
"description": "The value of the selected `<mdui-segmented-button>`. This value is submitted with form data.\n\n**Note**: The HTML attribute always accepts a string and can only be used as an initial value when `selects=\"single\"`. The JavaScript property is a string when `selects=\"single\"` and an array of strings when `selects=\"multiple\"`. When `selects=\"multiple\"`, update the JavaScript property to change this value.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-value"
},
{
"name": "defaultValue",
"description": "The default selected value. The group resets to this state when the form is reset. JavaScript only.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-defaultValue"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-attributes-validationMessage"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the selected value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-events-change"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-group-cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-segmented-button",
"description": "Segmented Button Component Use with the `<mdui-segmented-button-group>` component \n\n```html\n<mdui-segmented-button-group>\n <mdui-segmented-button>Day</mdui-segmented-button>\n <mdui-segmented-button>Week</mdui-segmented-button>\n <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
"attributes": [
{
"name": "icon",
"description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-icon"
},
{
"name": "end-icon",
"description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-end-icon"
},
{
"name": "selected-icon",
"description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-selected-icon"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-tabindex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-form"
},
{
"name": "formaction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formaction"
},
{
"name": "formenctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formenctype"
},
{
"name": "formmethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button",
"slots": [
{
"name": "",
"description": "Text content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-default"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-icon"
},
{
"name": "selected-icon",
"description": "Icon for the selected state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-selected-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-slots-end-icon"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "Specifies the Material Icons name for the left icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-icon"
},
{
"name": "endIcon",
"description": "Specifies the Material Icons name for the right icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-endIcon"
},
{
"name": "selectedIcon",
"description": "Specifies the Material Icons name for the selected state. Alternatively, use `slot=\"selected-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-selectedIcon"
},
{
"name": "href",
"description": "The URL for the link. When set, the component renders as an `<a>` element and supports link-related attributes.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-href"
},
{
"name": "download",
"description": "Downloads the linked URL.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-download"
},
{
"name": "target",
"description": "Controls where the linked URL opens. Possible values:\n\n* `_blank`: Opens in a new tab or window.\n* `_parent`: Opens in the parent browsing context, or `_self` if there is no parent.\n* `_self`: Opens in the current browsing context (default).\n* `_top`: Opens in the topmost browsing context, or `_self` if there are no ancestors.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-target"
},
{
"name": "rel",
"description": "Specifies the relationship of the linked URL as space-separated link types. Possible values:\n\n* `alternate`: An alternate version of the current document.\n* `author`: The author of the current document or article.\n* `bookmark`: The permalink for the nearest ancestor section.\n* `external`: The referenced document is not part of the same site as the current document.\n* `help`: A link to context-sensitive help.\n* `license`: Content covered by the copyright license described by the referenced document.\n* `me`: Links to content owned by the current document's author.\n* `next`: The next document in the series.\n* `nofollow`: Not endorsed by the original author or publisher.\n* `noreferrer`: Prevents the `Referer` header from being sent. Same effect as `noopener`.\n* `opener`: Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary one (i.e., when `target=\"_blank\"`).\n* `prev`: The previous document in the series.\n* `search`: Links to a resource that can be used to search through the current document and its related pages.\n* `tag`: Marks the current document with the given tag.\n\n**Note**: Only available when `href` is specified.",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-rel"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-tabIndex"
},
{
"name": "disabled",
"description": "Disables the element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-disabled"
},
{
"name": "loading",
"description": "Indicates that the element is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-loading"
},
{
"name": "name",
"description": "The button name submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-name"
},
{
"name": "value",
"description": "The button value submitted with form data.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-value"
},
{
"name": "type",
"description": "Specifies the button's default action. Default: `button`. Possible values:\n\n* `submit`: Submits the form data to the server.\n* `reset`: Restores all controls to their initial values.\n* `button`: Does nothing by default.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-type"
},
{
"name": "form",
"description": "Associates the button with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the button uses its parent `<form>`, if any.\n\nThis lets the button target any form in the document, not just the one it is nested in.\n\n**Note**: Only available when `href` is not specified.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-form"
},
{
"name": "formAction",
"description": "Specifies the URL that processes the button's submitted information. Overrides the `action` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formAction"
},
{
"name": "formEnctype",
"description": "Specifies how to encode the form data. Possible values:\n\n* `application/x-www-form-urlencoded`: Default when the attribute is omitted.\n* `multipart/form-data`: Used for `<input>` elements with `type=\"file\"`.\n* `text/plain`: Useful for debugging, but not for actual form submissions.\n\nOverrides the `enctype` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formEnctype"
},
{
"name": "formMethod",
"description": "Specifies the HTTP method for form submission. Possible values:\n\n* `post`: Sends the form data in the request body.\n* `get`: Appends the form data to the `action` URL.\n\nOverrides the `method` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "Specifies that the form should not be validated on submission. Overrides the `novalidate` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "Specifies where to open the response after form submission. Possible values:\n\n* `_self`: Current browsing context (default).\n* `_blank`: New tab or window.\n* `_parent`: Parent browsing context, or `_self` if there is no parent.\n* `_top`: Topmost browsing context, or `_self` if there are no ancestors.\n\nOverrides the `target` attribute of the button's form owner.\n\n**Note**: Only available when `href` is not specified and `type=\"submit\"`.",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-formTarget"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-validity"
},
{
"name": "validationMessage",
"description": "The validation message. Returns an empty string when the element is valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the segmented button gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-events-focus"
},
{
"name": "blur",
"description": "Emitted when the segmented button loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-events-blur"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "button",
"description": "Internal `<button>` or `<a>` element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-button"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-icon"
},
{
"name": "selected-icon",
"description": "Icon for the selected state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-selected-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-end-icon"
},
{
"name": "label",
"description": "Text content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-label"
},
{
"name": "loading",
"description": "The `<mdui-circular-progress>` element for the loading state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/segmented-button#segmented-button-cssParts-loading"
}
]
}
},
{
"name": "mdui-select",
"description": "Select Component Use with the `<mdui-menu-item>` component \n\n```html\n<mdui-select>\n <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the select variant. Possible values:\n\n* `filled`: Solid background with strong visual emphasis.\n* `outlined`: Bordered with lighter visual emphasis.",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-variant"
},
{
"name": "multiple",
"description": "Enables multiple selections.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-multiple"
},
{
"name": "name",
"description": "Name of the select, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-name"
},
{
"name": "value",
"description": "Value of the select, which is submitted with form data.\n\nIf `multiple` is not set, the value is a string; otherwise, it is an array of strings. HTML attributes can only set string values; array values must be set via the JavaScript property.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-value"
},
{
"name": "label",
"description": "Label text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-label"
},
{
"name": "placeholder",
"description": "Placeholder text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placeholder"
},
{
"name": "helper",
"description": "Helper text displayed below the select. Alternatively, use `slot=\"helper\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-helper"
},
{
"name": "clearable",
"description": "Makes the select clearable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clearable"
},
{
"name": "clear-icon",
"description": "Material Icons name for the clear button displayed on the right when clearable. Alternatively, use `slot=\"clear-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clear-icon"
},
{
"name": "placement",
"description": "Select placement. Possible values:\n\n* `auto`: Automatically determined.\n* `bottom`: Below the input.\n* `top`: Above the input.",
"value": {
"type": [
"'auto'",
"'bottom'",
"'top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placement"
},
{
"name": "end-aligned",
"description": "Aligns text to the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-end-aligned"
},
{
"name": "prefix",
"description": "Prefix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-prefix"
},
{
"name": "suffix",
"description": "Suffix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-suffix"
},
{
"name": "icon",
"description": "Material Icons name for the prefix icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-icon"
},
{
"name": "end-icon",
"description": "Material Icons name for the suffix icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-end-icon"
},
{
"name": "error-icon",
"description": "Material Icons name displayed on the right when form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-error-icon"
},
{
"name": "form",
"description": "Associates the select with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the select uses its parent `<form>`, if any.\n\nThis lets the select work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-form"
},
{
"name": "readonly",
"description": "Makes the select read-only.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-readonly"
},
{
"name": "disabled",
"description": "Disables the select.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-disabled"
},
{
"name": "required",
"description": "Requires a selection when the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-required"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/select",
"slots": [
{
"name": "",
"description": "`<mdui-menu-item>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-default"
},
{
"name": "icon",
"description": "Left icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-icon"
},
{
"name": "end-icon",
"description": "Right icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-end-icon"
},
{
"name": "error-icon",
"description": "Right icon when validation fails.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-error-icon"
},
{
"name": "prefix",
"description": "Left text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-prefix"
},
{
"name": "suffix",
"description": "Right text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-suffix"
},
{
"name": "clear-button",
"description": "Clear button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-clear-button"
},
{
"name": "clear-icon",
"description": "Icon in the clear button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-clear-icon"
},
{
"name": "helper",
"description": "Bottom helper text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#slots-helper"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the select variant. Possible values:\n\n* `filled`: Solid background with strong visual emphasis.\n* `outlined`: Bordered with lighter visual emphasis.",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-variant"
},
{
"name": "multiple",
"description": "Enables multiple selections.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-multiple"
},
{
"name": "name",
"description": "Name of the select, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-name"
},
{
"name": "value",
"description": "Value of the select, which is submitted with form data.\n\nIf `multiple` is not set, the value is a string; otherwise, it is an array of strings. HTML attributes can only set string values; array values must be set via the JavaScript property.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-value"
},
{
"name": "defaultValue",
"description": "Default selected value. The select resets to this value when the form is reset. JavaScript only.",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-defaultValue"
},
{
"name": "label",
"description": "Label text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-label"
},
{
"name": "placeholder",
"description": "Placeholder text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placeholder"
},
{
"name": "helper",
"description": "Helper text displayed below the select. Alternatively, use `slot=\"helper\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-helper"
},
{
"name": "clearable",
"description": "Makes the select clearable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clearable"
},
{
"name": "clearIcon",
"description": "Material Icons name for the clear button displayed on the right when clearable. Alternatively, use `slot=\"clear-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-clearIcon"
},
{
"name": "placement",
"description": "Select placement. Possible values:\n\n* `auto`: Automatically determined.\n* `bottom`: Below the input.\n* `top`: Above the input.",
"value": {
"type": [
"'auto'",
"'bottom'",
"'top'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-placement"
},
{
"name": "endAligned",
"description": "Aligns text to the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-endAligned"
},
{
"name": "prefix",
"description": "Prefix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-prefix"
},
{
"name": "suffix",
"description": "Suffix text of the select. Displayed only when the select is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-suffix"
},
{
"name": "icon",
"description": "Material Icons name for the prefix icon. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-icon"
},
{
"name": "endIcon",
"description": "Material Icons name for the suffix icon. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-endIcon"
},
{
"name": "errorIcon",
"description": "Material Icons name displayed on the right when form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-errorIcon"
},
{
"name": "form",
"description": "Associates the select with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the select uses its parent `<form>`, if any.\n\nThis lets the select work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-form"
},
{
"name": "readonly",
"description": "Makes the select read-only.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-readonly"
},
{
"name": "disabled",
"description": "Disables the select.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-disabled"
},
{
"name": "required",
"description": "Requires a selection when the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-required"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-validationMessage"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/select#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the select gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#events-focus"
},
{
"name": "blur",
"description": "Emitted when the select loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#events-blur"
},
{
"name": "change",
"description": "Emitted when the selected value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#events-change"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#events-invalid"
},
{
"name": "clear",
"description": "Emitted when the clear button is clicked. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#events-clear"
}
]
},
"css": {
"parts": [
{
"name": "chips",
"description": "Container for option chips when `multiple` is enabled.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chips"
},
{
"name": "chip",
"description": "Individual chip representing each multi-select option.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip"
},
{
"name": "chip__button",
"description": "The `<button>` element within the chip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip__button"
},
{
"name": "chip__label",
"description": "Text part of the chip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip__label"
},
{
"name": "chip__delete-icon",
"description": "Delete icon within the chip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-chip__delete-icon"
},
{
"name": "text-field",
"description": "Text field, i.e., [`<mdui-text-field>`](/en/docs/2/components/text-field) element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field"
},
{
"name": "text-field__container",
"description": "Container for the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__container"
},
{
"name": "text-field__icon",
"description": "Icon within the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__icon"
},
{
"name": "text-field__end-icon",
"description": "Right-side icon within the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__end-icon"
},
{
"name": "text-field__error-icon",
"description": "Icon displayed in the text field upon validation failure.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__error-icon"
},
{
"name": "text-field__prefix",
"description": "Text on the left side of the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__prefix"
},
{
"name": "text-field__suffix",
"description": "Text on the right side of the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__suffix"
},
{
"name": "text-field__label",
"description": "Label text displayed above the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__label"
},
{
"name": "text-field__input",
"description": "The `<input>` element within the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__input"
},
{
"name": "text-field__clear-button",
"description": "Clear button within the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__clear-button"
},
{
"name": "text-field__clear-icon",
"description": "Icon within the clear button of the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__clear-icon"
},
{
"name": "text-field__supporting",
"description": "Container for supporting information at the bottom of the text field, including helper and error messages.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__supporting"
},
{
"name": "text-field__helper",
"description": "Helper text displayed at the bottom of the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__helper"
},
{
"name": "text-field__error",
"description": "Error message displayed at the bottom of the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-text-field__error"
},
{
"name": "menu",
"description": "Dropdown menu, i.e., [`<mdui-menu>`](/en/docs/2/components/menu) element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/select#cssParts-menu"
}
]
}
},
{
"name": "mdui-slider",
"description": "Slider Component \n\n```html\n<mdui-slider></mdui-slider>\n```",
"attributes": [
{
"name": "value",
"description": "The value of the slider, which is submitted with form data.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-value"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tabindex"
},
{
"name": "min",
"description": "Specifies the minimum value. Default is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-min"
},
{
"name": "max",
"description": "Specifies the maximum value. Default is `100`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-max"
},
{
"name": "step",
"description": "Specifies the step interval. Default is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-step"
},
{
"name": "tickmarks",
"description": "Adds tickmarks to the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "Hides the value label.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "Disables the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-disabled"
},
{
"name": "form",
"description": "Associates the slider with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the slider uses its parent `<form>`, if any.\n\nThis lets the slider work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-form"
},
{
"name": "name",
"description": "Specifies the slider's name, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-name"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider",
"js": {
"properties": [
{
"name": "value",
"description": "The value of the slider, which is submitted with form data.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-value"
},
{
"name": "defaultValue",
"description": "The default value. The slider resets to this value when the form is reset. JavaScript only.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-defaultValue"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tabIndex"
},
{
"name": "min",
"description": "Specifies the minimum value. Default is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-min"
},
{
"name": "max",
"description": "Specifies the maximum value. Default is `100`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-max"
},
{
"name": "step",
"description": "Specifies the step interval. Default is `1`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-step"
},
{
"name": "tickmarks",
"description": "Adds tickmarks to the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "Hides the value label.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "Disables the slider.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-disabled"
},
{
"name": "form",
"description": "Associates the slider with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the slider uses its parent `<form>`, if any.\n\nThis lets the slider work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-form"
},
{
"name": "name",
"description": "Specifies the slider's name, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-name"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-validationMessage"
},
{
"name": "labelFormatter",
"description": "Specifies a function to format the tooltip's value. The function receives the slider's value as an argument and should return a string to display in the tooltip.",
"value": {
"type": "(value: number) => string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#attributes-labelFormatter"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the slider gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-focus"
},
{
"name": "blur",
"description": "Emitted when the slider loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-blur"
},
{
"name": "change",
"description": "Emitted when the value changes and the slider loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-change"
},
{
"name": "input",
"description": "Emitted when the value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-input"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "track-inactive",
"description": "Inactive track.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-track-inactive"
},
{
"name": "track-active",
"description": "Active track.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-track-active"
},
{
"name": "handle",
"description": "Slider handle.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-handle"
},
{
"name": "label",
"description": "Value label.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-label"
},
{
"name": "tickmark",
"description": "Tick mark.",
"doc-url": "https://www.mdui.org/en/docs/2/components/slider#cssParts-tickmark"
}
]
}
},
{
"name": "mdui-snackbar",
"description": "Snackbar Component \n\n```html\n<mdui-snackbar>message</mdui-snackbar>\n```",
"attributes": [
{
"name": "open",
"description": "Opens the Snackbar.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-open"
},
{
"name": "placement",
"description": "Snackbar placement. Default is `bottom`. Possible values:\n\n* `top`: Top center.\n* `top-start`: Top left.\n* `top-end`: Top right.\n* `bottom`: Bottom center.\n* `bottom-start`: Bottom left.\n* `bottom-end`: Bottom right.",
"value": {
"type": [
"'top'",
"'top-start'",
"'top-end'",
"'bottom'",
"'bottom-start'",
"'bottom-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-placement"
},
{
"name": "action",
"description": "Text for the action button. Alternatively, use `slot=\"action\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-action"
},
{
"name": "action-loading",
"description": "Whether the action button is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-action-loading"
},
{
"name": "closeable",
"description": "Shows a close button on the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeable"
},
{
"name": "close-icon",
"description": "Material Icons name for the close button. Alternatively, use `slot=\"close-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-close-icon"
},
{
"name": "message-line",
"description": "Maximum lines for message text. Default is unlimited. Possible values:\n\n* `1`: Single line.\n* `2`: Two lines.",
"value": {
"type": [
"1",
"2"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-message-line"
},
{
"name": "auto-close-delay",
"description": "Automatically closes the Snackbar after the given delay (in milliseconds). Set to `0` to disable auto-close. Default is `5000`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-auto-close-delay"
},
{
"name": "close-on-outside-click",
"description": "Closes the Snackbar when the user clicks or touches outside it.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-close-on-outside-click"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar",
"slots": [
{
"name": "",
"description": "Snackbar message.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-default"
},
{
"name": "action",
"description": "Right action button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-action"
},
{
"name": "close-button",
"description": "Right-side close button. Shown if `closeable` is set.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-close-button"
},
{
"name": "close-icon",
"description": "Icon in the right close button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#slots-close-icon"
}
],
"js": {
"properties": [
{
"name": "open",
"description": "Opens the Snackbar.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-open"
},
{
"name": "placement",
"description": "Snackbar placement. Default is `bottom`. Possible values:\n\n* `top`: Top center.\n* `top-start`: Top left.\n* `top-end`: Top right.\n* `bottom`: Bottom center.\n* `bottom-start`: Bottom left.\n* `bottom-end`: Bottom right.",
"value": {
"type": [
"'top'",
"'top-start'",
"'top-end'",
"'bottom'",
"'bottom-start'",
"'bottom-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-placement"
},
{
"name": "action",
"description": "Text for the action button. Alternatively, use `slot=\"action\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-action"
},
{
"name": "actionLoading",
"description": "Whether the action button is in a loading state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-actionLoading"
},
{
"name": "closeable",
"description": "Shows a close button on the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeable"
},
{
"name": "closeIcon",
"description": "Material Icons name for the close button. Alternatively, use `slot=\"close-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeIcon"
},
{
"name": "messageLine",
"description": "Maximum lines for message text. Default is unlimited. Possible values:\n\n* `1`: Single line.\n* `2`: Two lines.",
"value": {
"type": [
"1",
"2"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-messageLine"
},
{
"name": "autoCloseDelay",
"description": "Automatically closes the Snackbar after the given delay (in milliseconds). Set to `0` to disable auto-close. Default is `5000`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-autoCloseDelay"
},
{
"name": "closeOnOutsideClick",
"description": "Closes the Snackbar when the user clicks or touches outside it.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#attributes-closeOnOutsideClick"
}
],
"events": [
{
"name": "open",
"description": "Emitted when the snackbar starts to open. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-open"
},
{
"name": "opened",
"description": "Emitted after the snackbar opens and animations complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-opened"
},
{
"name": "close",
"description": "Emitted when the snackbar starts to close. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-close"
},
{
"name": "closed",
"description": "Emitted after the snackbar closes and animations complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-closed"
},
{
"name": "action-click",
"description": "Emitted when the action button is clicked.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#events-action-click"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssProperties-z-index"
}
],
"parts": [
{
"name": "message",
"description": "Message text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-message"
},
{
"name": "action",
"description": "Action button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-action"
},
{
"name": "close-button",
"description": "Close button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-close-button"
},
{
"name": "close-icon",
"description": "Icon in the close button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/snackbar#cssParts-close-icon"
}
]
}
},
{
"name": "mdui-switch",
"description": "Switch Component \n\n```html\n<mdui-switch></mdui-switch>\n```",
"attributes": [
{
"name": "disabled",
"description": "Disables the switch.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-disabled"
},
{
"name": "checked",
"description": "Sets the switch to the checked state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checked"
},
{
"name": "unchecked-icon",
"description": "The Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-unchecked-icon"
},
{
"name": "checked-icon",
"description": "The Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`. Defaults to the `check` icon; setting an empty string removes the default icon.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checked-icon"
},
{
"name": "required",
"description": "The switch must be checked before the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-required"
},
{
"name": "form",
"description": "Associates the switch with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the switch uses its parent `<form>`, if any.\n\nThis lets the switch work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-form"
},
{
"name": "name",
"description": "The name of the switch, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-name"
},
{
"name": "value",
"description": "The value of the switch, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-value"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch",
"slots": [
{
"name": "unchecked-icon",
"description": "Element for the unchecked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#slots-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Element for the checked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#slots-checked-icon"
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "Disables the switch.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-disabled"
},
{
"name": "checked",
"description": "Sets the switch to the checked state.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checked"
},
{
"name": "defaultChecked",
"description": "The default checked state. The switch resets to this state when the form is reset. JavaScript only.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-defaultChecked"
},
{
"name": "uncheckedIcon",
"description": "The Material Icons name for the unchecked state. Alternatively, use `slot=\"unchecked-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-uncheckedIcon"
},
{
"name": "checkedIcon",
"description": "The Material Icons name for the checked state. Alternatively, use `slot=\"checked-icon\"`. Defaults to the `check` icon; setting an empty string removes the default icon.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-checkedIcon"
},
{
"name": "required",
"description": "The switch must be checked before the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-required"
},
{
"name": "form",
"description": "Associates the switch with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the switch uses its parent `<form>`, if any.\n\nThis lets the switch work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-form"
},
{
"name": "name",
"description": "The name of the switch, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-name"
},
{
"name": "value",
"description": "The value of the switch, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-value"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-validationMessage"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the switch gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-focus"
},
{
"name": "blur",
"description": "Emitted when the switch loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-blur"
},
{
"name": "change",
"description": "Emitted when the checked state changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-change"
},
{
"name": "input",
"description": "Emitted when the checked state changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-input"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the track. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssProperties-shape-corner"
},
{
"name": "--shape-corner-thumb",
"description": "The corner radius of the icon container. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssProperties-shape-corner-thumb"
}
],
"parts": [
{
"name": "track",
"description": "Track.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-track"
},
{
"name": "thumb",
"description": "Thumb.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-thumb"
},
{
"name": "unchecked-icon",
"description": "Icon for the unchecked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-unchecked-icon"
},
{
"name": "checked-icon",
"description": "Icon for the checked state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/switch#cssParts-checked-icon"
}
]
}
},
{
"name": "mdui-tab-panel",
"description": "Tab Panel Component Use with the `<mdui-tabs>` and `<mdui-tab>` components \n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
"attributes": [
{
"name": "value",
"description": "Specifies the value of the tab panel.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-panel-attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs",
"slots": [
{
"name": "",
"description": "The content of the tab panel.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-panel-slots-default"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "Specifies the value of the tab panel.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-panel-attributes-value"
}
]
}
},
{
"name": "mdui-tab",
"description": "Tab Component Use with the `<mdui-tabs>` and `<mdui-tab-panel>` components \n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
"attributes": [
{
"name": "value",
"description": "Specifies the tab value.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-value"
},
{
"name": "icon",
"description": "Specifies the Material Icons name. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-icon"
},
{
"name": "inline",
"description": "Arranges the icon and text horizontally.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-inline"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs",
"slots": [
{
"name": "",
"description": "Tab text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-default"
},
{
"name": "icon",
"description": "Tab icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-icon"
},
{
"name": "badge",
"description": "Badge.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-badge"
},
{
"name": "custom",
"description": "Custom tab content.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-slots-custom"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "Specifies the tab value.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-value"
},
{
"name": "icon",
"description": "Specifies the Material Icons name. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-icon"
},
{
"name": "inline",
"description": "Arranges the icon and text horizontally.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-inline"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the tab gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-events-focus"
},
{
"name": "blur",
"description": "Emitted when the tab loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-events-blur"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "Tab container.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-cssParts-container"
},
{
"name": "icon",
"description": "Tab icon.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-cssParts-icon"
},
{
"name": "label",
"description": "Tab text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tab-cssParts-label"
}
]
}
},
{
"name": "mdui-tabs",
"description": "Tabs Component Use with the `<mdui-tab>` and `<mdui-tab-panel>` components \n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the tab variant. Possible values:\n\n* `primary`: Sits below `<mdui-top-app-bar>` and is used to switch between main application pages.\n* `secondary`: Sits within the page and is used to switch between related content groups.",
"value": {
"type": [
"'primary'",
"'secondary'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-variant"
},
{
"name": "value",
"description": "Specifies the active `<mdui-tab>` value.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-value"
},
{
"name": "placement",
"description": "Defines the tab position. Default is `top-start`. Possible values:\n\n* `top-start`: Top left.\n* `top`: Top centered.\n* `top-end`: Top right.\n* `bottom-start`: Bottom left.\n* `bottom`: Bottom, centered.\n* `bottom-end`: Bottom right.\n* `left-start`: Left top.\n* `left`: Left, centered.\n* `left-end`: Left bottom.\n* `right-start`: Right top.\n* `right`: Right, centered.\n* `right-end`: Right bottom.",
"value": {
"type": [
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-placement"
},
{
"name": "full-width",
"description": "If set, the tabs will fill the width of their parent element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-full-width"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs",
"slots": [
{
"name": "",
"description": "`<mdui-tab>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-slots-default"
},
{
"name": "panel",
"description": "`<mdui-tab-panel>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-slots-panel"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the tab variant. Possible values:\n\n* `primary`: Sits below `<mdui-top-app-bar>` and is used to switch between main application pages.\n* `secondary`: Sits within the page and is used to switch between related content groups.",
"value": {
"type": [
"'primary'",
"'secondary'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-variant"
},
{
"name": "value",
"description": "Specifies the active `<mdui-tab>` value.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-value"
},
{
"name": "placement",
"description": "Defines the tab position. Default is `top-start`. Possible values:\n\n* `top-start`: Top left.\n* `top`: Top centered.\n* `top-end`: Top right.\n* `bottom-start`: Bottom left.\n* `bottom`: Bottom, centered.\n* `bottom-end`: Bottom right.\n* `left-start`: Left top.\n* `left`: Left, centered.\n* `left-end`: Left bottom.\n* `right-start`: Right top.\n* `right`: Right, centered.\n* `right-end`: Right bottom.",
"value": {
"type": [
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-placement"
},
{
"name": "fullWidth",
"description": "If set, the tabs will fill the width of their parent element.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-attributes-fullWidth"
}
],
"events": [
{
"name": "change",
"description": "Emitted when the selected value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-events-change"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "Container for `<mdui-tab>` elements.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-cssParts-container"
},
{
"name": "indicator",
"description": "Indicator for the active state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tabs#tabs-cssParts-indicator"
}
]
}
},
{
"name": "mdui-text-field",
"description": "Text Field Component \n\n```html\n<mdui-text-field label=\"Text Field\"></mdui-text-field>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the text field variant. Default is `filled`. Possible values:\n\n* `filled`: Text field with a background color for stronger visual emphasis.\n* `outlined`: Text field with a border for subtler visual emphasis.",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-variant"
},
{
"name": "type",
"description": "Specifies the text field type. Default is `text`. Possible values:\n\n* `text`: Standard text field.\n* `number`: Allows numeric input only. Virtual keyboards on mobile devices show a numeric layout.\n* `password`: Hides the password as you type.\n* `url`: Validates URL format. Virtual keyboards on mobile devices show a URL-specific layout.\n* `email`: Validates email format. Virtual keyboards on mobile devices show an email-specific layout.\n* `search`: Shows a search icon on the Enter key in virtual keyboards.\n* `tel`: Displays a phone keypad on virtual keyboards.\n* `hidden`: Hides the control, but its value is still submitted to the server.\n* `date`: Opens a date picker or a numeric scroll wheel for year, month, and day in supported browsers.\n* `datetime-local`: Activates a date and time picker in supported browsers, without a time zone.\n* `month`: Allows entering a year and month without a time zone.\n* `time`: Allows time input without a time zone.\n* `week`: Allows entering a year and week without a time zone.",
"value": {
"type": [
"'text'",
"'number'",
"'password'",
"'url'",
"'email'",
"'search'",
"'tel'",
"'hidden'",
"'date'",
"'datetime-local'",
"'month'",
"'time'",
"'week'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-type"
},
{
"name": "name",
"description": "The name of the text field, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-name"
},
{
"name": "value",
"description": "The value of the text field, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-value"
},
{
"name": "label",
"description": "Label text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-label"
},
{
"name": "placeholder",
"description": "Placeholder text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-placeholder"
},
{
"name": "helper",
"description": "The helper text displayed at the bottom of the text field. Alternatively, use `slot=\"helper\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helper"
},
{
"name": "helper-on-focus",
"description": "Shows the helper text only when the text field is focused.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helper-on-focus"
},
{
"name": "clearable",
"description": "Makes the text field clearable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clearable"
},
{
"name": "clear-icon",
"description": "Material Icons name shown on the right when the text field is clearable. Alternatively, use `slot=\"clear-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clear-icon"
},
{
"name": "end-aligned",
"description": "Aligns the text to the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-end-aligned"
},
{
"name": "prefix",
"description": "The prefix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-prefix"
},
{
"name": "suffix",
"description": "The suffix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-suffix"
},
{
"name": "icon",
"description": "Material Icons name for the prefix icon of the text field. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-icon"
},
{
"name": "end-icon",
"description": "Material Icons name for the suffix icon of the text field. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-end-icon"
},
{
"name": "error-icon",
"description": "Material Icons name displayed on the right side of the text field when form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-error-icon"
},
{
"name": "form",
"description": "Associates the text field with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the text field uses its parent `<form>`, if any.\n\nThis lets the text field work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-form"
},
{
"name": "readonly",
"description": "Makes the text field read-only.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-readonly"
},
{
"name": "disabled",
"description": "Disables the text field.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-disabled"
},
{
"name": "required",
"description": "The field must be filled out before the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-required"
},
{
"name": "rows",
"description": "The number of rows in the text field.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-rows"
},
{
"name": "autosize",
"description": "Automatically adjusts the height of the text field based on its content.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autosize"
},
{
"name": "min-rows",
"description": "The minimum number of rows when `autosize` is enabled.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-min-rows"
},
{
"name": "max-rows",
"description": "The maximum number of rows when `autosize` is enabled.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-max-rows"
},
{
"name": "minlength",
"description": "The minimum number of characters for input.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-minlength"
},
{
"name": "maxlength",
"description": "The maximum number of characters for input.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-maxlength"
},
{
"name": "counter",
"description": "Displays the character count when `maxlength` is specified.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-counter"
},
{
"name": "min",
"description": "The minimum value when `type` is `number`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-min"
},
{
"name": "max",
"description": "The maximum value when `type` is `number`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-max"
},
{
"name": "step",
"description": "The step interval for increment/decrement when `type` is `number`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-step"
},
{
"name": "pattern",
"description": "The regular expression for form validation.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-pattern"
},
{
"name": "toggle-password",
"description": "Adds a toggle button to show or hide the password when `type` is `password`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-toggle-password"
},
{
"name": "show-password-icon",
"description": "Material Icons name for the visible password toggle button. Alternatively, use `slot=\"show-password-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-show-password-icon"
},
{
"name": "hide-password-icon",
"description": "Material Icons name for the hidden password toggle button. Alternatively, use `slot=\"hide-password-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-hide-password-icon"
},
{
"name": "autocapitalize",
"description": "A non-standard iOS attribute for automatic capitalization. Possible values:\n\n* `none`: Disables automatic capitalization.\n* `sentences`: Capitalizes the first letter of each sentence.\n* `words`: Capitalizes the first letter of each word.\n* `characters`: Capitalizes all letters.",
"value": {
"type": [
"'none'",
"'sentences'",
"'words'",
"'characters'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocapitalize"
},
{
"name": "autocorrect",
"description": "The `autocorrect` attribute of the `input` element.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocorrect"
},
{
"name": "autocomplete",
"description": "The `autocomplete` attribute of the `input` element.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocomplete"
},
{
"name": "enterkeyhint",
"description": "Customizes the Enter key text or icon on the virtual keyboard. The effect varies by device and language. Possible values:\n\n* `enter`: Inserts a new line, typically used in a multi-line text field.\n* `done`: Indicates completion and closes the virtual keyboard.\n* `go`: Navigates to the target of the entered text.\n* `next`: Moves to the next text field.\n* `previous`: Moves to the previous text field.\n* `search`: Navigates to search results.\n* `send`: Sends a text message.",
"value": {
"type": [
"'enter'",
"'done'",
"'go'",
"'next'",
"'previous'",
"'search'",
"'send'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-enterkeyhint"
},
{
"name": "spellcheck",
"description": "Enables spell checking.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-spellcheck"
},
{
"name": "inputmode",
"description": "Customizes the virtual keyboard. Possible values:\n\n* `none`: No virtual keyboard. Useful for custom input controls.\n* `text`: Standard text input keyboard.\n* `decimal`: Decimal input keyboard. This includes a period `.` or comma `,` and numbers.\n* `numeric`: Numeric keyboard. This displays numbers 0–9.\n* `tel`: Phone number keyboard. This includes numbers 0–9, asterisk `*`, and hash `#` keys.\n* `search`: Search-optimized virtual keyboard. 'Search' appears on the submit button.\n* `email`: Email-optimized virtual keyboard. This typically includes `@` and `.`.\n* `url`: URL-optimized virtual keyboard. This typically includes `.`, `/`, and `#`.",
"value": {
"type": [
"'none'",
"'text'",
"'decimal'",
"'numeric'",
"'tel'",
"'search'",
"'email'",
"'url'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-inputmode"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autofocus"
},
{
"name": "tabindex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field",
"slots": [
{
"name": "icon",
"description": "Icon on the left side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-icon"
},
{
"name": "end-icon",
"description": "Icon on the right side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-end-icon"
},
{
"name": "error-icon",
"description": "Icon on the right side for validation failure.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-error-icon"
},
{
"name": "prefix",
"description": "Text on the left side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-prefix"
},
{
"name": "suffix",
"description": "Text on the right side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-suffix"
},
{
"name": "clear-button",
"description": "Clear button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-clear-button"
},
{
"name": "clear-icon",
"description": "Icon in the clear button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-clear-icon"
},
{
"name": "toggle-password-button",
"description": "Button to toggle password visibility.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-toggle-password-button"
},
{
"name": "show-password-icon",
"description": "Icon in the password visibility toggle button (show password state).",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-show-password-icon"
},
{
"name": "hide-password-icon",
"description": "Icon in the password visibility toggle button (hide password state).",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-hide-password-icon"
},
{
"name": "helper",
"description": "Helper text shown below the field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#slots-helper"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the text field variant. Default is `filled`. Possible values:\n\n* `filled`: Text field with a background color for stronger visual emphasis.\n* `outlined`: Text field with a border for subtler visual emphasis.",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-variant"
},
{
"name": "type",
"description": "Specifies the text field type. Default is `text`. Possible values:\n\n* `text`: Standard text field.\n* `number`: Allows numeric input only. Virtual keyboards on mobile devices show a numeric layout.\n* `password`: Hides the password as you type.\n* `url`: Validates URL format. Virtual keyboards on mobile devices show a URL-specific layout.\n* `email`: Validates email format. Virtual keyboards on mobile devices show an email-specific layout.\n* `search`: Shows a search icon on the Enter key in virtual keyboards.\n* `tel`: Displays a phone keypad on virtual keyboards.\n* `hidden`: Hides the control, but its value is still submitted to the server.\n* `date`: Opens a date picker or a numeric scroll wheel for year, month, and day in supported browsers.\n* `datetime-local`: Activates a date and time picker in supported browsers, without a time zone.\n* `month`: Allows entering a year and month without a time zone.\n* `time`: Allows time input without a time zone.\n* `week`: Allows entering a year and week without a time zone.",
"value": {
"type": [
"'text'",
"'number'",
"'password'",
"'url'",
"'email'",
"'search'",
"'tel'",
"'hidden'",
"'date'",
"'datetime-local'",
"'month'",
"'time'",
"'week'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-type"
},
{
"name": "name",
"description": "The name of the text field, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-name"
},
{
"name": "value",
"description": "The value of the text field, which is submitted with form data.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-value"
},
{
"name": "defaultValue",
"description": "The default value. The text field resets to this value on form reset. JavaScript only.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-defaultValue"
},
{
"name": "label",
"description": "Label text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-label"
},
{
"name": "placeholder",
"description": "Placeholder text.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-placeholder"
},
{
"name": "helper",
"description": "The helper text displayed at the bottom of the text field. Alternatively, use `slot=\"helper\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helper"
},
{
"name": "helperOnFocus",
"description": "Shows the helper text only when the text field is focused.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-helperOnFocus"
},
{
"name": "clearable",
"description": "Makes the text field clearable.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clearable"
},
{
"name": "clearIcon",
"description": "Material Icons name shown on the right when the text field is clearable. Alternatively, use `slot=\"clear-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-clearIcon"
},
{
"name": "endAligned",
"description": "Aligns the text to the right.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-endAligned"
},
{
"name": "prefix",
"description": "The prefix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"prefix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-prefix"
},
{
"name": "suffix",
"description": "The suffix text for the text field. It is only displayed when the text field is focused or has a value. Alternatively, use `slot=\"suffix\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-suffix"
},
{
"name": "icon",
"description": "Material Icons name for the prefix icon of the text field. Alternatively, use `slot=\"icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-icon"
},
{
"name": "endIcon",
"description": "Material Icons name for the suffix icon of the text field. Alternatively, use `slot=\"end-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-endIcon"
},
{
"name": "errorIcon",
"description": "Material Icons name displayed on the right side of the text field when form field validation fails. Alternatively, use `slot=\"error-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-errorIcon"
},
{
"name": "form",
"description": "Associates the text field with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the text field uses its parent `<form>`, if any.\n\nThis lets the text field work with any form in the document, not just the one it is nested in.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-form"
},
{
"name": "readonly",
"description": "Makes the text field read-only.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-readonly"
},
{
"name": "disabled",
"description": "Disables the text field.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-disabled"
},
{
"name": "required",
"description": "The field must be filled out before the form is submitted.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-required"
},
{
"name": "rows",
"description": "The number of rows in the text field.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-rows"
},
{
"name": "autosize",
"description": "Automatically adjusts the height of the text field based on its content.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autosize"
},
{
"name": "minRows",
"description": "The minimum number of rows when `autosize` is enabled.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-minRows"
},
{
"name": "maxRows",
"description": "The maximum number of rows when `autosize` is enabled.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-maxRows"
},
{
"name": "minlength",
"description": "The minimum number of characters for input.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-minlength"
},
{
"name": "maxlength",
"description": "The maximum number of characters for input.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-maxlength"
},
{
"name": "counter",
"description": "Displays the character count when `maxlength` is specified.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-counter"
},
{
"name": "min",
"description": "The minimum value when `type` is `number`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-min"
},
{
"name": "max",
"description": "The maximum value when `type` is `number`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-max"
},
{
"name": "step",
"description": "The step interval for increment/decrement when `type` is `number`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-step"
},
{
"name": "pattern",
"description": "The regular expression for form validation.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-pattern"
},
{
"name": "togglePassword",
"description": "Adds a toggle button to show or hide the password when `type` is `password`.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-togglePassword"
},
{
"name": "showPasswordIcon",
"description": "Material Icons name for the visible password toggle button. Alternatively, use `slot=\"show-password-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-showPasswordIcon"
},
{
"name": "hidePasswordIcon",
"description": "Material Icons name for the hidden password toggle button. Alternatively, use `slot=\"hide-password-icon\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-hidePasswordIcon"
},
{
"name": "autocapitalize",
"description": "A non-standard iOS attribute for automatic capitalization. Possible values:\n\n* `none`: Disables automatic capitalization.\n* `sentences`: Capitalizes the first letter of each sentence.\n* `words`: Capitalizes the first letter of each word.\n* `characters`: Capitalizes all letters.",
"value": {
"type": [
"'none'",
"'sentences'",
"'words'",
"'characters'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocapitalize"
},
{
"name": "autocorrect",
"description": "The `autocorrect` attribute of the `input` element.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocorrect"
},
{
"name": "autocomplete",
"description": "The `autocomplete` attribute of the `input` element.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autocomplete"
},
{
"name": "enterkeyhint",
"description": "Customizes the Enter key text or icon on the virtual keyboard. The effect varies by device and language. Possible values:\n\n* `enter`: Inserts a new line, typically used in a multi-line text field.\n* `done`: Indicates completion and closes the virtual keyboard.\n* `go`: Navigates to the target of the entered text.\n* `next`: Moves to the next text field.\n* `previous`: Moves to the previous text field.\n* `search`: Navigates to search results.\n* `send`: Sends a text message.",
"value": {
"type": [
"'enter'",
"'done'",
"'go'",
"'next'",
"'previous'",
"'search'",
"'send'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-enterkeyhint"
},
{
"name": "spellcheck",
"description": "Enables spell checking.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-spellcheck"
},
{
"name": "inputmode",
"description": "Customizes the virtual keyboard. Possible values:\n\n* `none`: No virtual keyboard. Useful for custom input controls.\n* `text`: Standard text input keyboard.\n* `decimal`: Decimal input keyboard. This includes a period `.` or comma `,` and numbers.\n* `numeric`: Numeric keyboard. This displays numbers 0–9.\n* `tel`: Phone number keyboard. This includes numbers 0–9, asterisk `*`, and hash `#` keys.\n* `search`: Search-optimized virtual keyboard. 'Search' appears on the submit button.\n* `email`: Email-optimized virtual keyboard. This typically includes `@` and `.`.\n* `url`: URL-optimized virtual keyboard. This typically includes `.`, `/`, and `#`.",
"value": {
"type": [
"'none'",
"'text'",
"'decimal'",
"'numeric'",
"'tel'",
"'search'",
"'email'",
"'url'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-inputmode"
},
{
"name": "validity",
"description": "A [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object that represents the element's validity states.",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-validity"
},
{
"name": "validationMessage",
"description": "Validation message. Empty string when valid.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-validationMessage"
},
{
"name": "valueAsNumber",
"description": "Gets or sets the value as a `number`. Returns `NaN` if the value cannot be converted.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-valueAsNumber"
},
{
"name": "autofocus",
"description": "Whether the element is focused when the page loads.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "The element's tab order when navigating with the Tab key.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "Emitted when the text field gains focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-focus"
},
{
"name": "blur",
"description": "Emitted when the text field loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-blur"
},
{
"name": "change",
"description": "Emitted when the value changes and the text field loses focus.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-change"
},
{
"name": "input",
"description": "Emitted when the value changes.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-input"
},
{
"name": "invalid",
"description": "Emitted when the form control's validity is checked and it does not meet the constraints.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-invalid"
},
{
"name": "clear",
"description": "Emitted when the clear button is clicked. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#events-clear"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "Container for the text field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-container"
},
{
"name": "icon",
"description": "Icon on the left side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-icon"
},
{
"name": "end-icon",
"description": "Icon on the right side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-end-icon"
},
{
"name": "error-icon",
"description": "Icon on the right side for validation failure.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-error-icon"
},
{
"name": "prefix",
"description": "Text on the left side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-prefix"
},
{
"name": "suffix",
"description": "Text on the right side.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-suffix"
},
{
"name": "label",
"description": "Label text above the field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-label"
},
{
"name": "input",
"description": "Internal `<input>` or `<textarea>` element.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-input"
},
{
"name": "clear-button",
"description": "Clear button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-clear-button"
},
{
"name": "clear-icon",
"description": "Icon in the clear button.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-clear-icon"
},
{
"name": "toggle-password-button",
"description": "Button to toggle password visibility.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-toggle-password-button"
},
{
"name": "show-password-icon",
"description": "Icon in the password visibility toggle button (show password state).",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-show-password-icon"
},
{
"name": "hide-password-icon",
"description": "Icon in the password visibility toggle button (hide password state).",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-hide-password-icon"
},
{
"name": "supporting",
"description": "Container for supporting text at the bottom of the field, including helper, error, and counter.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-supporting"
},
{
"name": "helper",
"description": "Helper text shown below the field.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-helper"
},
{
"name": "error",
"description": "Text at the bottom for error.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-error"
},
{
"name": "counter",
"description": "Character count in the bottom right corner.",
"doc-url": "https://www.mdui.org/en/docs/2/components/text-field#cssParts-counter"
}
]
}
},
{
"name": "mdui-tooltip",
"description": "Tooltip Component \n\n```html\n<mdui-tooltip content=\"tooltip content\">\n <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the tooltip variant. Default is `plain`. Possible values:\n\n* `plain`: For simple, single-line text.\n* `rich`: For tooltips with a title, body text, and action buttons.",
"value": {
"type": [
"'plain'",
"'rich'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-variant"
},
{
"name": "placement",
"description": "Sets the tooltip position. Default is `auto`. Possible values:\n\n* `auto`: Automatically determined. For `variant=\"plain\"`, prefers `top`; for `variant=\"rich\"`, prefers `bottom-right`.\n* `top-left`: Top left.\n* `top-start`: Top start.\n* `top`: Top center.\n* `top-end`: Top end.\n* `top-right`: Top right.\n* `bottom-left`: Bottom left.\n* `bottom-start`: Bottom start.\n* `bottom`: Bottom center.\n* `bottom-end`: Bottom end.\n* `bottom-right`: Bottom right.\n* `left-start`: Left start.\n* `left`: Left center.\n* `left-end`: Left end.\n* `right-start`: Right start.\n* `right`: Right center.\n* `right-end`: Right end.",
"value": {
"type": [
"'auto'",
"'top-left'",
"'top-start'",
"'top'",
"'top-end'",
"'top-right'",
"'bottom-left'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'bottom-right'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-placement"
},
{
"name": "open-delay",
"description": "The delay (in milliseconds) before the tooltip appears on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-open-delay"
},
{
"name": "close-delay",
"description": "The delay (in milliseconds) before the tooltip disappears on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-close-delay"
},
{
"name": "headline",
"description": "Sets the tooltip title. Only applies when `variant=\"rich\"`. Alternatively, use `slot=\"headline\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-headline"
},
{
"name": "content",
"description": "Sets the tooltip content. Alternatively, use `slot=\"content\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-content"
},
{
"name": "trigger",
"description": "Defines how the tooltip opens. Multiple space-separated values are supported. Possible values:\n\n* `click`: Triggers on click.\n* `hover`: Triggers on mouse hover.\n* `focus`: Triggers on focus.\n* `manual`: Can only be opened and closed programmatically; no other trigger methods can be specified.",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-trigger"
},
{
"name": "disabled",
"description": "Disables the tooltip.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-disabled"
},
{
"name": "open",
"description": "Opens the tooltip.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-open"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip",
"slots": [
{
"name": "",
"description": "Target element that triggers the tooltip. Only the first element in the `default` slot is used as the target.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-default"
},
{
"name": "headline",
"description": "Tooltip title. Only applies when `variant=\"rich\"`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-headline"
},
{
"name": "content",
"description": "Tooltip content, which can include HTML. If you only need plain text, you can also use the `content` attribute.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-content"
},
{
"name": "action",
"description": "Action button at the bottom of the tooltip. Only available when `variant=\"rich\"`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#slots-action"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the tooltip variant. Default is `plain`. Possible values:\n\n* `plain`: For simple, single-line text.\n* `rich`: For tooltips with a title, body text, and action buttons.",
"value": {
"type": [
"'plain'",
"'rich'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-variant"
},
{
"name": "placement",
"description": "Sets the tooltip position. Default is `auto`. Possible values:\n\n* `auto`: Automatically determined. For `variant=\"plain\"`, prefers `top`; for `variant=\"rich\"`, prefers `bottom-right`.\n* `top-left`: Top left.\n* `top-start`: Top start.\n* `top`: Top center.\n* `top-end`: Top end.\n* `top-right`: Top right.\n* `bottom-left`: Bottom left.\n* `bottom-start`: Bottom start.\n* `bottom`: Bottom center.\n* `bottom-end`: Bottom end.\n* `bottom-right`: Bottom right.\n* `left-start`: Left start.\n* `left`: Left center.\n* `left-end`: Left end.\n* `right-start`: Right start.\n* `right`: Right center.\n* `right-end`: Right end.",
"value": {
"type": [
"'auto'",
"'top-left'",
"'top-start'",
"'top'",
"'top-end'",
"'top-right'",
"'bottom-left'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'bottom-right'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-placement"
},
{
"name": "openDelay",
"description": "The delay (in milliseconds) before the tooltip appears on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-openDelay"
},
{
"name": "closeDelay",
"description": "The delay (in milliseconds) before the tooltip disappears on hover.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-closeDelay"
},
{
"name": "headline",
"description": "Sets the tooltip title. Only applies when `variant=\"rich\"`. Alternatively, use `slot=\"headline\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-headline"
},
{
"name": "content",
"description": "Sets the tooltip content. Alternatively, use `slot=\"content\"`.",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-content"
},
{
"name": "trigger",
"description": "Defines how the tooltip opens. Multiple space-separated values are supported. Possible values:\n\n* `click`: Triggers on click.\n* `hover`: Triggers on mouse hover.\n* `focus`: Triggers on focus.\n* `manual`: Can only be opened and closed programmatically; no other trigger methods can be specified.",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-trigger"
},
{
"name": "disabled",
"description": "Disables the tooltip.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-disabled"
},
{
"name": "open",
"description": "Opens the tooltip.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#attributes-open"
}
],
"events": [
{
"name": "open",
"description": "Emitted when the tooltip starts to open. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-open"
},
{
"name": "opened",
"description": "Emitted after the tooltip has opened and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-opened"
},
{
"name": "close",
"description": "Emitted when the tooltip starts to close. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-close"
},
{
"name": "closed",
"description": "Emitted after the tooltip has closed and the animations are completed.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#events-closed"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-plain",
"description": "Corner radius of the component when `variant=\"plain\"`. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssProperties-shape-corner-plain"
},
{
"name": "--shape-corner-rich",
"description": "Corner radius of the component when `variant=\"rich\"`. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssProperties-shape-corner-rich"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssProperties-z-index"
}
],
"parts": [
{
"name": "popup",
"description": "Container for the tooltip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-popup"
},
{
"name": "headline",
"description": "Title of the tooltip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-headline"
},
{
"name": "content",
"description": "Body text of the tooltip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-content"
},
{
"name": "action",
"description": "Action button of the tooltip.",
"doc-url": "https://www.mdui.org/en/docs/2/components/tooltip#cssParts-action"
}
]
}
},
{
"name": "mdui-top-app-bar-title",
"description": "Top App Bar Title Component Use with the `<mdui-top-app-bar>` component \n\n```html\n<mdui-top-app-bar>\n <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n <div style=\"flex-grow: 1\"></div>\n <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar",
"slots": [
{
"name": "",
"description": "The title text of the top app bar.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-slots-default"
},
{
"name": "label-large",
"description": "The title text when the top app bar is in the expanded state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-slots-label-large"
}
],
"js": {
"properties": []
},
"css": {
"parts": [
{
"name": "label",
"description": "The title text.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label"
},
{
"name": "label-large",
"description": "The title text when the top app bar is in the expanded state.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label-large"
}
]
}
},
{
"name": "mdui-top-app-bar",
"description": "Top App Bar Component \n\n```html\n<mdui-top-app-bar>\n <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n <div style=\"flex-grow: 1\"></div>\n <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
"attributes": [
{
"name": "variant",
"description": "Defines the top app bar variant. Default is `small`. Possible values:\n\n* `center-aligned`: A small app bar with a centered title.\n* `small`: Small app bar.\n* `medium`: Medium-sized app bar.\n* `large`: Large-sized app bar.",
"value": {
"type": [
"'center-aligned'",
"'small'",
"'medium'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
},
{
"name": "hide",
"description": "Whether the top app bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
},
{
"name": "shrink",
"description": "Shrinks the app bar to the `small` variant. Only applies to `medium` or `large` variants.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
},
{
"name": "scroll-behavior",
"description": "Defines the scroll behavior. Multiple space-separated values are accepted. Possible values:\n\n* `hide`: Hides when scrolling.\n* `shrink`: Shrinks when scrolling (for medium to large app bars).\n* `elevate`: Increases elevation when scrolling.",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-behavior"
},
{
"name": "scroll-target",
"description": "The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). Defaults to `window`.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-target"
},
{
"name": "scroll-threshold",
"description": "The scroll distance (in pixels) required to trigger the scroll behavior.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-threshold"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar",
"slots": [
{
"name": "",
"description": "Elements contained within the top app bar.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-slots-default"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "Defines the top app bar variant. Default is `small`. Possible values:\n\n* `center-aligned`: A small app bar with a centered title.\n* `small`: Small app bar.\n* `medium`: Medium-sized app bar.\n* `large`: Large-sized app bar.",
"value": {
"type": [
"'center-aligned'",
"'small'",
"'medium'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
},
{
"name": "hide",
"description": "Whether the top app bar is hidden.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
},
{
"name": "shrink",
"description": "Shrinks the app bar to the `small` variant. Only applies to `medium` or `large` variants.",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
},
{
"name": "scrollBehavior",
"description": "Defines the scroll behavior. Multiple space-separated values are accepted. Possible values:\n\n* `hide`: Hides when scrolling.\n* `shrink`: Shrinks when scrolling (for medium to large app bars).\n* `elevate`: Increases elevation when scrolling.",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scrollBehavior"
},
{
"name": "scrollTarget",
"description": "The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a [JQ object](/en/docs/2/functions/jq). Defaults to `window`.",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scrollTarget"
},
{
"name": "scrollThreshold",
"description": "The scroll distance (in pixels) required to trigger the scroll behavior.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-scrollThreshold"
},
{
"name": "order",
"description": "Specifies the layout order within the [`<mdui-layout>`](/en/docs/2/components/layout) component. Items are sorted in ascending order. The default value is `0`.",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-attributes-order"
}
],
"events": [
{
"name": "show",
"description": "Emitted when the top app bar starts to show. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-show"
},
{
"name": "shown",
"description": "Emitted after the top app bar has shown and animations are complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-shown"
},
{
"name": "hide",
"description": "Emitted when the top app bar starts to hide. Can be prevented with `event.preventDefault()`.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-hide"
},
{
"name": "hidden",
"description": "Emitted after the top app bar has hidden and animations are complete.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-events-hidden"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "The corner radius of the component. You can use a specific pixel value, but it is recommended to reference [design tokens](/en/docs/2/styles/design-tokens#shape-corner).",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "The CSS `z-index` value of the component.",
"doc-url": "https://www.mdui.org/en/docs/2/components/top-app-bar#top-app-bar-cssProperties-z-index"
}
]
}
}
]
},
"css": {
"properties": [
{
"name": "--mdui-breakpoint-xs",
"description": "The breakpoint value. The default is `0px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n --mdui-breakpoint-xs: 0px;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-sm",
"description": "The breakpoint value. The default is `600px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n --mdui-breakpoint-sm: 620px;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-md",
"description": "The breakpoint value. The default is `840px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n --mdui-breakpoint-md: 860px;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-lg",
"description": "The breakpoint value. The default is `1080px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n --mdui-breakpoint-lg: 1100px;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-xl",
"description": "The breakpoint value. The default is `1440px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n --mdui-breakpoint-xl: 1460px;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-xxl",
"description": "The breakpoint value. The default is `1920px`.\n\n**Note**: This breakpoint value is not supported in CSS media queries.\n\n**Example**:\n```css\n/* Modify the breakpoint value */\n:root {\n --mdui-breakpoint-xxl: 1940px;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-color-primary-light",
"description": "**Primary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-container-light",
"description": "**Primary Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-primary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-primary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-light",
"description": "**On Primary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-container-light",
"description": "**On Primary Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-primary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-primary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-primary-light",
"description": "**Inverse Primary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-inverse-primary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-inverse-primary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-light",
"description": "**Secondary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-secondary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-secondary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-container-light",
"description": "**Secondary Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-secondary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-secondary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-light",
"description": "**On Secondary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-secondary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-secondary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-container-light",
"description": "**On Secondary Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-secondary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-light",
"description": "**Tertiary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-tertiary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-tertiary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-container-light",
"description": "**Tertiary Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-tertiary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-tertiary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-light",
"description": "**On Tertiary**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-tertiary-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-container-light",
"description": "**On Tertiary Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-tertiary-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-light",
"description": "**Surface**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dim-light",
"description": "**Surface Dim**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-dim-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-dim-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-bright-light",
"description": "**Surface Bright**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-bright-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-bright-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-lowest-light",
"description": "**Surface Container Lowest**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-container-lowest-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-low-light",
"description": "**Surface Container Low**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-container-low-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-low-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-light",
"description": "**Surface Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-high-light",
"description": "**Surface Container High**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-container-high-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-high-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-highest-light",
"description": "**Surface Container Highest**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-container-highest-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-variant-light",
"description": "**Surface Variant**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-light",
"description": "**On Surface**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-variant-light",
"description": "**On Surface Variant**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-surface-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-surface-light",
"description": "**Inverse Surface**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-inverse-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-inverse-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-on-surface-light",
"description": "**Inverse On Surface**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-inverse-on-surface-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-background-light",
"description": "**Background**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-background-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-background-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-background-light",
"description": "**On Background**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-background-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-background-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-light",
"description": "**Error**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-error-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-error-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-container-light",
"description": "**Error Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-error-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-error-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-light",
"description": "**On Error**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-error-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-error-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-container-light",
"description": "**On Error Container**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-on-error-container-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-error-container-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-light",
"description": "**Outline**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-outline-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-outline-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-variant-light",
"description": "**Outline Variant**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-outline-variant-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-outline-variant-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-shadow-light",
"description": "**Shadow**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-shadow-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-shadow-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-tint-color-light",
"description": "**Surface Tint Color**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-surface-tint-color-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-scrim-light",
"description": "**Scrim**\n\nRGB color value for Light Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Light Mode.\n\n**Example**:\n```css\n/* Set Light Mode color value */\n:root {\n --mdui-color-scrim-light: 255, 0, 0;\n}\n\n/* Read Light Mode color value */\n.element {\n color: rgb(var(--mdui-color-scrim-light));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-dark",
"description": "**Primary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-container-dark",
"description": "**Primary Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-primary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-primary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-dark",
"description": "**On Primary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-container-dark",
"description": "**On Primary Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-primary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-primary-dark",
"description": "**Inverse Primary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-inverse-primary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-dark",
"description": "**Secondary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-secondary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-secondary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-container-dark",
"description": "**Secondary Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-secondary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-dark",
"description": "**On Secondary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-secondary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-container-dark",
"description": "**On Secondary Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-dark",
"description": "**Tertiary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-tertiary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-tertiary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-container-dark",
"description": "**Tertiary Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-tertiary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-dark",
"description": "**On Tertiary**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-container-dark",
"description": "**On Tertiary Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dark",
"description": "**Surface**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dim-dark",
"description": "**Surface Dim**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-dim-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-bright-dark",
"description": "**Surface Bright**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-bright-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-lowest-dark",
"description": "**Surface Container Lowest**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-low-dark",
"description": "**Surface Container Low**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-low-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-dark",
"description": "**Surface Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-high-dark",
"description": "**Surface Container High**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-high-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-highest-dark",
"description": "**Surface Container Highest**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-variant-dark",
"description": "**Surface Variant**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-dark",
"description": "**On Surface**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-variant-dark",
"description": "**On Surface Variant**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-surface-dark",
"description": "**Inverse Surface**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-inverse-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-on-surface-dark",
"description": "**Inverse On Surface**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-background-dark",
"description": "**Background**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-background-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-background-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-background-dark",
"description": "**On Background**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-background-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-background-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-dark",
"description": "**Error**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-error-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-error-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-container-dark",
"description": "**Error Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-error-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-error-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-dark",
"description": "**On Error**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-error-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-error-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-container-dark",
"description": "**On Error Container**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-on-error-container-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-dark",
"description": "**Outline**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-outline-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-outline-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-variant-dark",
"description": "**Outline Variant**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-outline-variant-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-shadow-dark",
"description": "**Shadow**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-shadow-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-shadow-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-tint-color-dark",
"description": "**Surface Tint Color**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-scrim-dark",
"description": "**Scrim**\n\nRGB color value for Dark Mode, separated by commas.\n\nBy modifying this property, you can change the color value under Dark Mode.\n\n**Example**:\n```css\n/* Set Dark Mode color value */\n:root {\n --mdui-color-scrim-dark: 255, 0, 0;\n}\n\n/* Read Dark Mode color value */\n.element {\n color: rgb(var(--mdui-color-scrim-dark));\n}\n\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary",
"description": "**Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-primary-light` and `--mdui-color-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-primary-light: 255, 0, 0;\n --mdui-color-primary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-container",
"description": "**Primary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-primary-container-light` and `--mdui-color-primary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-primary-container-light: 255, 0, 0;\n --mdui-color-primary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary",
"description": "**On Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-primary-light` and `--mdui-color-on-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-primary-light: 255, 0, 0;\n --mdui-color-on-primary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-container",
"description": "**On Primary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-primary-container-light` and `--mdui-color-on-primary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-primary-container-light: 255, 0, 0;\n --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-primary",
"description": "**Inverse Primary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-inverse-primary-light` and `--mdui-color-inverse-primary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-inverse-primary-light: 255, 0, 0;\n --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary",
"description": "**Secondary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-secondary-light` and `--mdui-color-secondary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-secondary-light: 255, 0, 0;\n --mdui-color-secondary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-container",
"description": "**Secondary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-secondary-container-light` and `--mdui-color-secondary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-secondary-container-light: 255, 0, 0;\n --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary",
"description": "**On Secondary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-secondary-light` and `--mdui-color-on-secondary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-secondary-light: 255, 0, 0;\n --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-container",
"description": "**On Secondary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-secondary-container-light` and `--mdui-color-on-secondary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-secondary-container-light: 255, 0, 0;\n --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary",
"description": "**Tertiary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-tertiary-light` and `--mdui-color-tertiary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-tertiary-light: 255, 0, 0;\n --mdui-color-tertiary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-container",
"description": "**Tertiary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-tertiary-container-light` and `--mdui-color-tertiary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-tertiary-container-light: 255, 0, 0;\n --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary",
"description": "**On Tertiary**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-tertiary-light` and `--mdui-color-on-tertiary-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-tertiary-light: 255, 0, 0;\n --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-container",
"description": "**On Tertiary Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-tertiary-container-light` and `--mdui-color-on-tertiary-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-tertiary-container-light: 255, 0, 0;\n --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface",
"description": "**Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-light` and `--mdui-color-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-light: 255, 0, 0;\n --mdui-color-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dim",
"description": "**Surface Dim**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-dim-light` and `--mdui-color-surface-dim-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-dim-light: 255, 0, 0;\n --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-bright",
"description": "**Surface Bright**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-bright-light` and `--mdui-color-surface-bright-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-bright-light: 255, 0, 0;\n --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-lowest",
"description": "**Surface Container Lowest**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-container-lowest-light` and `--mdui-color-surface-container-lowest-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-container-lowest-light: 255, 0, 0;\n --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-low",
"description": "**Surface Container Low**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-container-low-light` and `--mdui-color-surface-container-low-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-container-low-light: 255, 0, 0;\n --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container",
"description": "**Surface Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-container-light` and `--mdui-color-surface-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-container-light: 255, 0, 0;\n --mdui-color-surface-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-high",
"description": "**Surface Container High**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-container-high-light` and `--mdui-color-surface-container-high-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-container-high-light: 255, 0, 0;\n --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-highest",
"description": "**Surface Container Highest**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-container-highest-light` and `--mdui-color-surface-container-highest-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-container-highest-light: 255, 0, 0;\n --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-variant",
"description": "**Surface Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-variant-light` and `--mdui-color-surface-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-variant-light: 255, 0, 0;\n --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface",
"description": "**On Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-surface-light` and `--mdui-color-on-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-surface-light: 255, 0, 0;\n --mdui-color-on-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-variant",
"description": "**On Surface Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-surface-variant-light` and `--mdui-color-on-surface-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-surface-variant-light: 255, 0, 0;\n --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-surface",
"description": "**Inverse Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-inverse-surface-light` and `--mdui-color-inverse-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-inverse-surface-light: 255, 0, 0;\n --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-on-surface",
"description": "**Inverse On Surface**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-inverse-on-surface-light` and `--mdui-color-inverse-on-surface-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-inverse-on-surface-light: 255, 0, 0;\n --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-background",
"description": "**Background**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-background-light` and `--mdui-color-background-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-background-light: 255, 0, 0;\n --mdui-color-background-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-background",
"description": "**On Background**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-background-light` and `--mdui-color-on-background-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-background-light: 255, 0, 0;\n --mdui-color-on-background-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error",
"description": "**Error**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-error-light` and `--mdui-color-error-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-error-light: 255, 0, 0;\n --mdui-color-error-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-container",
"description": "**Error Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-error-container-light` and `--mdui-color-error-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-error-container-light: 255, 0, 0;\n --mdui-color-error-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error",
"description": "**On Error**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-error-light` and `--mdui-color-on-error-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-error-light: 255, 0, 0;\n --mdui-color-on-error-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-container",
"description": "**On Error Container**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-on-error-container-light` and `--mdui-color-on-error-container-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-on-error-container-light: 255, 0, 0;\n --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline",
"description": "**Outline**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-outline-light` and `--mdui-color-outline-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-outline-light: 255, 0, 0;\n --mdui-color-outline-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-variant",
"description": "**Outline Variant**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-outline-variant-light` and `--mdui-color-outline-variant-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-outline-variant-light: 255, 0, 0;\n --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-shadow",
"description": "**Shadow**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-shadow-light` and `--mdui-color-shadow-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-shadow-light: 255, 0, 0;\n --mdui-color-shadow-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-tint-color",
"description": "**Surface Tint Color**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-surface-tint-color-light` and `--mdui-color-surface-tint-color-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-surface-tint-color-light: 255, 0, 0;\n --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-scrim",
"description": "**Scrim**\n\nRGB color value that automatically adapts to light and dark modes, separated by commas.\n\nTo set this color value, it is recommended to set `--mdui-color-scrim-light` and `--mdui-color-scrim-dark` separately.\n\n**Example**:\n```css\n/* Read the color value that automatically adapts */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* Read the color value that automatically adapts and add opacity */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n\n/* Set the color values for light mode and dark mode separately */\n:root {\n --mdui-color-scrim-light: 255, 0, 0;\n --mdui-color-scrim-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-elevation-level0",
"description": "Shadow value for elevation level 0.\n\n**Example**:\n```css\n/* Set the shadow value for elevation level 0 */\n:root {\n --mdui-elevation-level0: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value for elevation level 0 */\n.element {\n box-shadow: var(--mdui-elevation-level0);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level1",
"description": "Shadow value for elevation level 1.\n\n**Example**:\n```css\n/* Set the shadow value for elevation level 1 */\n:root {\n --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value for elevation level 1 */\n.element {\n box-shadow: var(--mdui-elevation-level1);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level2",
"description": "Shadow value for elevation level 2.\n\n**Example**:\n```css\n/* Set the shadow value for elevation level 2 */\n:root {\n --mdui-elevation-level2: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value for elevation level 2 */\n.element {\n box-shadow: var(--mdui-elevation-level2);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level3",
"description": "Shadow value for elevation level 3.\n\n**Example**:\n```css\n/* Set the shadow value for elevation level 3 */\n:root {\n --mdui-elevation-level3: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value for elevation level 3 */\n.element {\n box-shadow: var(--mdui-elevation-level3);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level4",
"description": "Shadow value for elevation level 4.\n\n**Example**:\n```css\n/* Set the shadow value for elevation level 4 */\n:root {\n --mdui-elevation-level4: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value for elevation level 4 */\n.element {\n box-shadow: var(--mdui-elevation-level4);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level5",
"description": "Shadow value for elevation level 5.\n\n**Example**:\n```css\n/* Set the shadow value for elevation level 5 */\n:root {\n --mdui-elevation-level5: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* Read the shadow value for elevation level 5 */\n.element {\n box-shadow: var(--mdui-elevation-level5);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-motion-easing-linear",
"description": "Easing curve for Linear Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Linear Animation */\n:root {\n --mdui-motion-easing-linear: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Linear Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-linear);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-standard",
"description": "Easing curve for Standard Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Animation */\n:root {\n --mdui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-standard-accelerate",
"description": "Easing curve for Standard Accelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Accelerated Animation */\n:root {\n --mdui-motion-easing-standard-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Accelerated Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard-accelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-standard-decelerate",
"description": "Easing curve for Standard Decelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Standard Decelerated Animation */\n:root {\n --mdui-motion-easing-standard-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Standard Decelerated Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard-decelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-emphasized",
"description": "Easing curve for Emphasized Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Animation */\n:root {\n --mdui-motion-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-emphasized-accelerate",
"description": "Easing curve for Emphasized Accelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Accelerated Animation */\n:root {\n --mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Accelerated Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized-accelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-emphasized-decelerate",
"description": "Easing curve for Emphasized Decelerated Animation.\n\n**Example**:\n```css\n/* Set the easing curve for Emphasized Decelerated Animation */\n:root {\n --mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Read the easing curve for Emphasized Decelerated Animation */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized-decelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short1",
"description": "Animation duration for short1.\n\n**Example**:\n```css\n/* Set the animation duration for short1 */\n:root {\n --mdui-motion-duration-short1: 0.3s;\n}\n\n/* Read the animation duration for short1 */\n.element {\n transition-duration: var(--mdui-motion-duration-short1);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short2",
"description": "Animation duration for short2.\n\n**Example**:\n```css\n/* Set the animation duration for short2 */\n:root {\n --mdui-motion-duration-short2: 0.3s;\n}\n\n/* Read the animation duration for short2 */\n.element {\n transition-duration: var(--mdui-motion-duration-short2);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short3",
"description": "Animation duration for short3.\n\n**Example**:\n```css\n/* Set the animation duration for short3 */\n:root {\n --mdui-motion-duration-short3: 0.3s;\n}\n\n/* Read the animation duration for short3 */\n.element {\n transition-duration: var(--mdui-motion-duration-short3);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short4",
"description": "Animation duration for short4.\n\n**Example**:\n```css\n/* Set the animation duration for short4 */\n:root {\n --mdui-motion-duration-short4: 0.3s;\n}\n\n/* Read the animation duration for short4 */\n.element {\n transition-duration: var(--mdui-motion-duration-short4);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium1",
"description": "Animation duration for medium1.\n\n**Example**:\n```css\n/* Set the animation duration for medium1 */\n:root {\n --mdui-motion-duration-medium1: 0.3s;\n}\n\n/* Read the animation duration for medium1 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium1);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium2",
"description": "Animation duration for medium2.\n\n**Example**:\n```css\n/* Set the animation duration for medium2 */\n:root {\n --mdui-motion-duration-medium2: 0.3s;\n}\n\n/* Read the animation duration for medium2 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium2);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium3",
"description": "Animation duration for medium3.\n\n**Example**:\n```css\n/* Set the animation duration for medium3 */\n:root {\n --mdui-motion-duration-medium3: 0.3s;\n}\n\n/* Read the animation duration for medium3 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium3);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium4",
"description": "Animation duration for medium4.\n\n**Example**:\n```css\n/* Set the animation duration for medium4 */\n:root {\n --mdui-motion-duration-medium4: 0.3s;\n}\n\n/* Read the animation duration for medium4 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium4);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long1",
"description": "Animation duration for long1.\n\n**Example**:\n```css\n/* Set the animation duration for long1 */\n:root {\n --mdui-motion-duration-long1: 0.3s;\n}\n\n/* Read the animation duration for long1 */\n.element {\n transition-duration: var(--mdui-motion-duration-long1);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long2",
"description": "Animation duration for long2.\n\n**Example**:\n```css\n/* Set the animation duration for long2 */\n:root {\n --mdui-motion-duration-long2: 0.3s;\n}\n\n/* Read the animation duration for long2 */\n.element {\n transition-duration: var(--mdui-motion-duration-long2);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long3",
"description": "Animation duration for long3.\n\n**Example**:\n```css\n/* Set the animation duration for long3 */\n:root {\n --mdui-motion-duration-long3: 0.3s;\n}\n\n/* Read the animation duration for long3 */\n.element {\n transition-duration: var(--mdui-motion-duration-long3);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long4",
"description": "Animation duration for long4.\n\n**Example**:\n```css\n/* Set the animation duration for long4 */\n:root {\n --mdui-motion-duration-long4: 0.3s;\n}\n\n/* Read the animation duration for long4 */\n.element {\n transition-duration: var(--mdui-motion-duration-long4);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long1",
"description": "Animation duration for extra-long1.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long1 */\n:root {\n --mdui-motion-duration-extra-long1: 0.3s;\n}\n\n/* Read the animation duration for extra-long1 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long1);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long2",
"description": "Animation duration for extra-long2.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long2 */\n:root {\n --mdui-motion-duration-extra-long2: 0.3s;\n}\n\n/* Read the animation duration for extra-long2 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long2);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long3",
"description": "Animation duration for extra-long3.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long3 */\n:root {\n --mdui-motion-duration-extra-long3: 0.3s;\n}\n\n/* Read the animation duration for extra-long3 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long3);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long4",
"description": "Animation duration for extra-long4.\n\n**Example**:\n```css\n/* Set the animation duration for extra-long4 */\n:root {\n --mdui-motion-duration-extra-long4: 0.3s;\n}\n\n/* Read the animation duration for extra-long4 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long4);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-shape-corner-none",
"description": "Corner radius value for level none.\n\n**Example**:\n```css\n/* Set the corner radius value for level none */\n:root {\n --mdui-shape-corner-none: 4px;\n}\n\n/* Read the corner radius value for level none */\n.element {\n border-radius: var(--mdui-shape-corner-none);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-extra-small",
"description": "Corner radius value for level extra-small.\n\n**Example**:\n```css\n/* Set the corner radius value for level extra-small */\n:root {\n --mdui-shape-corner-extra-small: 4px;\n}\n\n/* Read the corner radius value for level extra-small */\n.element {\n border-radius: var(--mdui-shape-corner-extra-small);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-small",
"description": "Corner radius value for level small.\n\n**Example**:\n```css\n/* Set the corner radius value for level small */\n:root {\n --mdui-shape-corner-small: 4px;\n}\n\n/* Read the corner radius value for level small */\n.element {\n border-radius: var(--mdui-shape-corner-small);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-medium",
"description": "Corner radius value for level medium.\n\n**Example**:\n```css\n/* Set the corner radius value for level medium */\n:root {\n --mdui-shape-corner-medium: 4px;\n}\n\n/* Read the corner radius value for level medium */\n.element {\n border-radius: var(--mdui-shape-corner-medium);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-large",
"description": "Corner radius value for level large.\n\n**Example**:\n```css\n/* Set the corner radius value for level large */\n:root {\n --mdui-shape-corner-large: 4px;\n}\n\n/* Read the corner radius value for level large */\n.element {\n border-radius: var(--mdui-shape-corner-large);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-extra-large",
"description": "Corner radius value for level extra-large.\n\n**Example**:\n```css\n/* Set the corner radius value for level extra-large */\n:root {\n --mdui-shape-corner-extra-large: 4px;\n}\n\n/* Read the corner radius value for level extra-large */\n.element {\n border-radius: var(--mdui-shape-corner-extra-large);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-full",
"description": "Corner radius value for level full.\n\n**Example**:\n```css\n/* Set the corner radius value for level full */\n:root {\n --mdui-shape-corner-full: 4px;\n}\n\n/* Read the corner radius value for level full */\n.element {\n border-radius: var(--mdui-shape-corner-full);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-state-layer-hover",
"description": "Opacity of the state layer for the `hover` state.\n\n**Example**:\n```css\n/* Set the opacity of the state layer for the hover state */\n:root {\n --mdui-state-layer-hover: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-state-layer-focus",
"description": "Opacity of the state layer for the `focus` state.\n\n**Example**:\n```css\n/* Set the opacity of the state layer for the focus state */\n:root {\n --mdui-state-layer-focus: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-state-layer-pressed",
"description": "Opacity of the state layer for the `pressed` state.\n\n**Example**:\n```css\n/* Set the opacity of the state layer for the pressed state */\n:root {\n --mdui-state-layer-pressed: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-state-layer-dragged",
"description": "Opacity of the state layer for the `dragged` state.\n\n**Example**:\n```css\n/* Set the opacity of the state layer for the dragged state */\n:root {\n --mdui-state-layer-dragged: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-typescale-display-large-weight",
"description": "Display Large font weight.\n\n**Example**:\n```css\n/* Set Display Large font weight */\n:root {\n --mdui-typescale-display-large-weight: 500;\n}\n\n/* Read Display Large font weight */\n.element {\n font-weight: var(--mdui-typescale-display-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-large-line-height",
"description": "Display Large line height.\n\n**Example**:\n```css\n/* Set Display Large line height */\n:root {\n --mdui-typescale-display-large-line-height: 1.5;\n}\n\n/* Read Display Large line height */\n.element {\n line-height: var(--mdui-typescale-display-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-large-size",
"description": "Display Large font size.\n\n**Example**:\n```css\n/* Set Display Large font size */\n:root {\n --mdui-typescale-display-large-size: 16px;\n}\n\n/* Read Display Large font size */\n.element {\n font-size: var(--mdui-typescale-display-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-large-tracking",
"description": "Display Large font tracking.\n\n**Example**:\n```css\n/* Set Display Large font tracking */\n:root {\n --mdui-typescale-display-large-tracking: 0.1;\n}\n\n/* Read Display Large font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-display-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-weight",
"description": "Display Medium font weight.\n\n**Example**:\n```css\n/* Set Display Medium font weight */\n:root {\n --mdui-typescale-display-medium-weight: 500;\n}\n\n/* Read Display Medium font weight */\n.element {\n font-weight: var(--mdui-typescale-display-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-line-height",
"description": "Display Medium line height.\n\n**Example**:\n```css\n/* Set Display Medium line height */\n:root {\n --mdui-typescale-display-medium-line-height: 1.5;\n}\n\n/* Read Display Medium line height */\n.element {\n line-height: var(--mdui-typescale-display-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-size",
"description": "Display Medium font size.\n\n**Example**:\n```css\n/* Set Display Medium font size */\n:root {\n --mdui-typescale-display-medium-size: 16px;\n}\n\n/* Read Display Medium font size */\n.element {\n font-size: var(--mdui-typescale-display-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-tracking",
"description": "Display Medium font tracking.\n\n**Example**:\n```css\n/* Set Display Medium font tracking */\n:root {\n --mdui-typescale-display-medium-tracking: 0.1;\n}\n\n/* Read Display Medium font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-display-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-weight",
"description": "Display Small font weight.\n\n**Example**:\n```css\n/* Set Display Small font weight */\n:root {\n --mdui-typescale-display-small-weight: 500;\n}\n\n/* Read Display Small font weight */\n.element {\n font-weight: var(--mdui-typescale-display-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-line-height",
"description": "Display Small line height.\n\n**Example**:\n```css\n/* Set Display Small line height */\n:root {\n --mdui-typescale-display-small-line-height: 1.5;\n}\n\n/* Read Display Small line height */\n.element {\n line-height: var(--mdui-typescale-display-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-size",
"description": "Display Small font size.\n\n**Example**:\n```css\n/* Set Display Small font size */\n:root {\n --mdui-typescale-display-small-size: 16px;\n}\n\n/* Read Display Small font size */\n.element {\n font-size: var(--mdui-typescale-display-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-tracking",
"description": "Display Small font tracking.\n\n**Example**:\n```css\n/* Set Display Small font tracking */\n:root {\n --mdui-typescale-display-small-tracking: 0.1;\n}\n\n/* Read Display Small font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-display-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-weight",
"description": "Headline Large font weight.\n\n**Example**:\n```css\n/* Set Headline Large font weight */\n:root {\n --mdui-typescale-headline-large-weight: 500;\n}\n\n/* Read Headline Large font weight */\n.element {\n font-weight: var(--mdui-typescale-headline-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-line-height",
"description": "Headline Large line height.\n\n**Example**:\n```css\n/* Set Headline Large line height */\n:root {\n --mdui-typescale-headline-large-line-height: 1.5;\n}\n\n/* Read Headline Large line height */\n.element {\n line-height: var(--mdui-typescale-headline-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-size",
"description": "Headline Large font size.\n\n**Example**:\n```css\n/* Set Headline Large font size */\n:root {\n --mdui-typescale-headline-large-size: 16px;\n}\n\n/* Read Headline Large font size */\n.element {\n font-size: var(--mdui-typescale-headline-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-tracking",
"description": "Headline Large font tracking.\n\n**Example**:\n```css\n/* Set Headline Large font tracking */\n:root {\n --mdui-typescale-headline-large-tracking: 0.1;\n}\n\n/* Read Headline Large font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-headline-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-weight",
"description": "Headline Medium font weight.\n\n**Example**:\n```css\n/* Set Headline Medium font weight */\n:root {\n --mdui-typescale-headline-medium-weight: 500;\n}\n\n/* Read Headline Medium font weight */\n.element {\n font-weight: var(--mdui-typescale-headline-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-line-height",
"description": "Headline Medium line height.\n\n**Example**:\n```css\n/* Set Headline Medium line height */\n:root {\n --mdui-typescale-headline-medium-line-height: 1.5;\n}\n\n/* Read Headline Medium line height */\n.element {\n line-height: var(--mdui-typescale-headline-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-size",
"description": "Headline Medium font size.\n\n**Example**:\n```css\n/* Set Headline Medium font size */\n:root {\n --mdui-typescale-headline-medium-size: 16px;\n}\n\n/* Read Headline Medium font size */\n.element {\n font-size: var(--mdui-typescale-headline-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-tracking",
"description": "Headline Medium font tracking.\n\n**Example**:\n```css\n/* Set Headline Medium font tracking */\n:root {\n --mdui-typescale-headline-medium-tracking: 0.1;\n}\n\n/* Read Headline Medium font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-headline-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-weight",
"description": "Headline Small font weight.\n\n**Example**:\n```css\n/* Set Headline Small font weight */\n:root {\n --mdui-typescale-headline-small-weight: 500;\n}\n\n/* Read Headline Small font weight */\n.element {\n font-weight: var(--mdui-typescale-headline-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-line-height",
"description": "Headline Small line height.\n\n**Example**:\n```css\n/* Set Headline Small line height */\n:root {\n --mdui-typescale-headline-small-line-height: 1.5;\n}\n\n/* Read Headline Small line height */\n.element {\n line-height: var(--mdui-typescale-headline-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-size",
"description": "Headline Small font size.\n\n**Example**:\n```css\n/* Set Headline Small font size */\n:root {\n --mdui-typescale-headline-small-size: 16px;\n}\n\n/* Read Headline Small font size */\n.element {\n font-size: var(--mdui-typescale-headline-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-tracking",
"description": "Headline Small font tracking.\n\n**Example**:\n```css\n/* Set Headline Small font tracking */\n:root {\n --mdui-typescale-headline-small-tracking: 0.1;\n}\n\n/* Read Headline Small font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-headline-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-weight",
"description": "Title Large font weight.\n\n**Example**:\n```css\n/* Set Title Large font weight */\n:root {\n --mdui-typescale-title-large-weight: 500;\n}\n\n/* Read Title Large font weight */\n.element {\n font-weight: var(--mdui-typescale-title-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-line-height",
"description": "Title Large line height.\n\n**Example**:\n```css\n/* Set Title Large line height */\n:root {\n --mdui-typescale-title-large-line-height: 1.5;\n}\n\n/* Read Title Large line height */\n.element {\n line-height: var(--mdui-typescale-title-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-size",
"description": "Title Large font size.\n\n**Example**:\n```css\n/* Set Title Large font size */\n:root {\n --mdui-typescale-title-large-size: 16px;\n}\n\n/* Read Title Large font size */\n.element {\n font-size: var(--mdui-typescale-title-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-tracking",
"description": "Title Large font tracking.\n\n**Example**:\n```css\n/* Set Title Large font tracking */\n:root {\n --mdui-typescale-title-large-tracking: 0.1;\n}\n\n/* Read Title Large font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-title-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-weight",
"description": "Title Medium font weight.\n\n**Example**:\n```css\n/* Set Title Medium font weight */\n:root {\n --mdui-typescale-title-medium-weight: 500;\n}\n\n/* Read Title Medium font weight */\n.element {\n font-weight: var(--mdui-typescale-title-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-line-height",
"description": "Title Medium line height.\n\n**Example**:\n```css\n/* Set Title Medium line height */\n:root {\n --mdui-typescale-title-medium-line-height: 1.5;\n}\n\n/* Read Title Medium line height */\n.element {\n line-height: var(--mdui-typescale-title-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-size",
"description": "Title Medium font size.\n\n**Example**:\n```css\n/* Set Title Medium font size */\n:root {\n --mdui-typescale-title-medium-size: 16px;\n}\n\n/* Read Title Medium font size */\n.element {\n font-size: var(--mdui-typescale-title-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-tracking",
"description": "Title Medium font tracking.\n\n**Example**:\n```css\n/* Set Title Medium font tracking */\n:root {\n --mdui-typescale-title-medium-tracking: 0.1;\n}\n\n/* Read Title Medium font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-title-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-weight",
"description": "Title Small font weight.\n\n**Example**:\n```css\n/* Set Title Small font weight */\n:root {\n --mdui-typescale-title-small-weight: 500;\n}\n\n/* Read Title Small font weight */\n.element {\n font-weight: var(--mdui-typescale-title-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-line-height",
"description": "Title Small line height.\n\n**Example**:\n```css\n/* Set Title Small line height */\n:root {\n --mdui-typescale-title-small-line-height: 1.5;\n}\n\n/* Read Title Small line height */\n.element {\n line-height: var(--mdui-typescale-title-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-size",
"description": "Title Small font size.\n\n**Example**:\n```css\n/* Set Title Small font size */\n:root {\n --mdui-typescale-title-small-size: 16px;\n}\n\n/* Read Title Small font size */\n.element {\n font-size: var(--mdui-typescale-title-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-tracking",
"description": "Title Small font tracking.\n\n**Example**:\n```css\n/* Set Title Small font tracking */\n:root {\n --mdui-typescale-title-small-tracking: 0.1;\n}\n\n/* Read Title Small font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-title-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-weight",
"description": "Label Large font weight.\n\n**Example**:\n```css\n/* Set Label Large font weight */\n:root {\n --mdui-typescale-label-large-weight: 500;\n}\n\n/* Read Label Large font weight */\n.element {\n font-weight: var(--mdui-typescale-label-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-line-height",
"description": "Label Large line height.\n\n**Example**:\n```css\n/* Set Label Large line height */\n:root {\n --mdui-typescale-label-large-line-height: 1.5;\n}\n\n/* Read Label Large line height */\n.element {\n line-height: var(--mdui-typescale-label-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-size",
"description": "Label Large font size.\n\n**Example**:\n```css\n/* Set Label Large font size */\n:root {\n --mdui-typescale-label-large-size: 16px;\n}\n\n/* Read Label Large font size */\n.element {\n font-size: var(--mdui-typescale-label-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-tracking",
"description": "Label Large font tracking.\n\n**Example**:\n```css\n/* Set Label Large font tracking */\n:root {\n --mdui-typescale-label-large-tracking: 0.1;\n}\n\n/* Read Label Large font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-label-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-weight",
"description": "Label Medium font weight.\n\n**Example**:\n```css\n/* Set Label Medium font weight */\n:root {\n --mdui-typescale-label-medium-weight: 500;\n}\n\n/* Read Label Medium font weight */\n.element {\n font-weight: var(--mdui-typescale-label-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-line-height",
"description": "Label Medium line height.\n\n**Example**:\n```css\n/* Set Label Medium line height */\n:root {\n --mdui-typescale-label-medium-line-height: 1.5;\n}\n\n/* Read Label Medium line height */\n.element {\n line-height: var(--mdui-typescale-label-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-size",
"description": "Label Medium font size.\n\n**Example**:\n```css\n/* Set Label Medium font size */\n:root {\n --mdui-typescale-label-medium-size: 16px;\n}\n\n/* Read Label Medium font size */\n.element {\n font-size: var(--mdui-typescale-label-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-tracking",
"description": "Label Medium font tracking.\n\n**Example**:\n```css\n/* Set Label Medium font tracking */\n:root {\n --mdui-typescale-label-medium-tracking: 0.1;\n}\n\n/* Read Label Medium font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-label-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-weight",
"description": "Label Small font weight.\n\n**Example**:\n```css\n/* Set Label Small font weight */\n:root {\n --mdui-typescale-label-small-weight: 500;\n}\n\n/* Read Label Small font weight */\n.element {\n font-weight: var(--mdui-typescale-label-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-line-height",
"description": "Label Small line height.\n\n**Example**:\n```css\n/* Set Label Small line height */\n:root {\n --mdui-typescale-label-small-line-height: 1.5;\n}\n\n/* Read Label Small line height */\n.element {\n line-height: var(--mdui-typescale-label-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-size",
"description": "Label Small font size.\n\n**Example**:\n```css\n/* Set Label Small font size */\n:root {\n --mdui-typescale-label-small-size: 16px;\n}\n\n/* Read Label Small font size */\n.element {\n font-size: var(--mdui-typescale-label-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-tracking",
"description": "Label Small font tracking.\n\n**Example**:\n```css\n/* Set Label Small font tracking */\n:root {\n --mdui-typescale-label-small-tracking: 0.1;\n}\n\n/* Read Label Small font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-label-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-weight",
"description": "Body Large font weight.\n\n**Example**:\n```css\n/* Set Body Large font weight */\n:root {\n --mdui-typescale-body-large-weight: 500;\n}\n\n/* Read Body Large font weight */\n.element {\n font-weight: var(--mdui-typescale-body-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-line-height",
"description": "Body Large line height.\n\n**Example**:\n```css\n/* Set Body Large line height */\n:root {\n --mdui-typescale-body-large-line-height: 1.5;\n}\n\n/* Read Body Large line height */\n.element {\n line-height: var(--mdui-typescale-body-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-size",
"description": "Body Large font size.\n\n**Example**:\n```css\n/* Set Body Large font size */\n:root {\n --mdui-typescale-body-large-size: 16px;\n}\n\n/* Read Body Large font size */\n.element {\n font-size: var(--mdui-typescale-body-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-tracking",
"description": "Body Large font tracking.\n\n**Example**:\n```css\n/* Set Body Large font tracking */\n:root {\n --mdui-typescale-body-large-tracking: 0.1;\n}\n\n/* Read Body Large font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-body-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-weight",
"description": "Body Medium font weight.\n\n**Example**:\n```css\n/* Set Body Medium font weight */\n:root {\n --mdui-typescale-body-medium-weight: 500;\n}\n\n/* Read Body Medium font weight */\n.element {\n font-weight: var(--mdui-typescale-body-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-line-height",
"description": "Body Medium line height.\n\n**Example**:\n```css\n/* Set Body Medium line height */\n:root {\n --mdui-typescale-body-medium-line-height: 1.5;\n}\n\n/* Read Body Medium line height */\n.element {\n line-height: var(--mdui-typescale-body-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-size",
"description": "Body Medium font size.\n\n**Example**:\n```css\n/* Set Body Medium font size */\n:root {\n --mdui-typescale-body-medium-size: 16px;\n}\n\n/* Read Body Medium font size */\n.element {\n font-size: var(--mdui-typescale-body-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-tracking",
"description": "Body Medium font tracking.\n\n**Example**:\n```css\n/* Set Body Medium font tracking */\n:root {\n --mdui-typescale-body-medium-tracking: 0.1;\n}\n\n/* Read Body Medium font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-body-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-weight",
"description": "Body Small font weight.\n\n**Example**:\n```css\n/* Set Body Small font weight */\n:root {\n --mdui-typescale-body-small-weight: 500;\n}\n\n/* Read Body Small font weight */\n.element {\n font-weight: var(--mdui-typescale-body-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-line-height",
"description": "Body Small line height.\n\n**Example**:\n```css\n/* Set Body Small line height */\n:root {\n --mdui-typescale-body-small-line-height: 1.5;\n}\n\n/* Read Body Small line height */\n.element {\n line-height: var(--mdui-typescale-body-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-size",
"description": "Body Small font size.\n\n**Example**:\n```css\n/* Set Body Small font size */\n:root {\n --mdui-typescale-body-small-size: 16px;\n}\n\n/* Read Body Small font size */\n.element {\n font-size: var(--mdui-typescale-body-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-tracking",
"description": "Body Small font tracking.\n\n**Example**:\n```css\n/* Set Body Small font tracking */\n:root {\n --mdui-typescale-body-small-tracking: 0.1;\n}\n\n/* Read Body Small font tracking */\n.element {\n letter-spacing: var(--mdui-typescale-body-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/en/docs/2/styles/design-tokens#typescale"
}
],
"classes": [
{
"name": "mdui-theme-light",
"description": "Apply this class to an element to display it and its child elements in light mode.",
"description-sections": {
"Example": "```html\n<div class=\"mdui-theme-light\"></div>\n```"
},
"doc-url": "https://www.mdui.org/en/docs/2/styles/dark-mode"
},
{
"name": "mdui-theme-dark",
"description": "Apply this class to the `<html>` element to display the entire page in dark mode. It can also be applied to other elements to display them and their child elements in dark mode.",
"description-sections": {
"Example": "```html\n<!-- Display the entire page in dark mode -->\n<html class=\"mdui-theme-dark\"></html>\n\n<!-- Display this element and its child elements in dark mode -->\n<div class=\"mdui-theme-dark\"></div>\n```"
},
"doc-url": "https://www.mdui.org/en/docs/2/styles/dark-mode"
},
{
"name": "mdui-theme-auto",
"description": "Apply this class to the `<html>` element to automatically toggle between light and dark modes based on the operating system settings. It can also be applied to other elements to automatically toggle them and their child elements between light and dark modes.",
"description-sections": {
"Example": "```html\n<!-- Automatically toggle the entire page between light and dark modes -->\n<html class=\"mdui-theme-auto\"></html>\n\n<!-- Automatically toggle this element and its child elements between light and dark modes -->\n<div class=\"mdui-theme-auto\"></div>\n```"
},
"doc-url": "https://www.mdui.org/en/docs/2/styles/dark-mode"
},
{
"name": "mdui-prose",
"description": "Apply this class to enhance typography styles for articles.",
"description-sections": {
"Example": "```html\n<div class=\"mdui-prose\">\n <h1>Article Title</h1>\n <p>Article Content</p>\n</div>\n```"
},
"doc-url": "https://www.mdui.org/en/docs/2/styles/prose"
},
{
"name": "mdui-table",
"description": "Apply this class to the `<table>` element to enhance its display style. It can also be applied to the parent element of the `<table>` to both enhance the table's styling and enable horizontal scrolling for it.",
"description-sections": {
"Example": "```html\n<table class=\"mdui-table\"></table>\n\n<div class=\"mdui-table\">\n <table></table>\n</div>\n```"
},
"doc-url": "https://www.mdui.org/en/docs/2/styles/prose"
}
]
}
}
}