11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
43 lines
987 B
Markdown
43 lines
987 B
Markdown
---
|
|
parts:
|
|
- Select Rich
|
|
- Examples
|
|
title: 'Select Rich: Examples'
|
|
eleventyNavigation:
|
|
key: 'Select Rich: Examples'
|
|
order: 30
|
|
parent: Select Rich
|
|
title: Examples
|
|
---
|
|
|
|
# Select Rich: Examples
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { repeat } from 'lit/directives/repeat.js';
|
|
import '@lion/ui/define/lion-select-rich.js';
|
|
import './src/intl-select-rich.js';
|
|
import { regionMetaList } from './src/regionMetaList.js';
|
|
```
|
|
|
|
## Select Rich International
|
|
|
|
A visually advanced Subclasser implementation of `LionSelectRich`.
|
|
|
|
Inspired by:
|
|
|
|
- [intl-tel-input](https://intl-tel-input.com/)
|
|
|
|
```js story
|
|
export const IntlSelectRich = () => html`
|
|
<intl-select-rich label="Choose a region" name="regions">
|
|
${repeat(
|
|
regionMetaList,
|
|
regionMeta => regionMeta.regionCode,
|
|
regionMeta =>
|
|
html` <intl-option .choiceValue="${regionMeta.regionCode}" .regionMeta="${regionMeta}">
|
|
</intl-option>`,
|
|
)}
|
|
</intl-select-rich>
|
|
`;
|
|
```
|