mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
c35bad0c64
We are changing the names of these files to reduce similarity with CSS modules and avoid clashing with tooling built around that. If you're importing `*/internal/styles.css.js`, swap to `*/internal/styles.js`. PiperOrigin-RevId: 611265000
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {CSSResultOrNative} from 'lit';
|
|
import {customElement} from 'lit/decorators.js';
|
|
|
|
import {styles} from '../menu/internal/menuitem/menu-item-styles.js';
|
|
|
|
import {SelectOptionEl} from './internal/selectoption/select-option.js';
|
|
|
|
export {type SelectOption} from './internal/selectoption/select-option.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'md-select-option': MdSelectOption;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @summary
|
|
* Select menus display a list of choices on temporary surfaces and display the
|
|
* currently selected menu item above the menu.
|
|
*
|
|
* @description
|
|
* The select component allows users to choose a value from a fixed list of
|
|
* available options. Composed of an interactive anchor button and a menu, it is
|
|
* analogous to the native HTML `<select>` element. This is the option that
|
|
* can be placed inside of an md-select.
|
|
*
|
|
* This component is a subclass of `md-menu-item` and can accept the same slots,
|
|
* properties, and events as `md-menu-item`.
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <md-outlined-select label="fruits">
|
|
* <!-- An empty selected option will give select an "un-filled" state -->
|
|
* <md-select-option selected></md-select-option>
|
|
* <md-select-option value="apple" headline="Apple"></md-select-option>
|
|
* <md-select-option value="banana" headline="Banana"></md-select-option>
|
|
* <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
|
|
* <md-select-option value="orange" headline="Orange"></md-select-option>
|
|
* <md-select-option value="tomato" headline="Tomato"></md-select-option>
|
|
* </md-outlined-select>
|
|
* ```
|
|
*
|
|
* @final
|
|
* @suppress {visibility}
|
|
*/
|
|
@customElement('md-select-option')
|
|
export class MdSelectOption extends SelectOptionEl {
|
|
static override styles: CSSResultOrNative[] = [styles];
|
|
}
|