2026-07-12 02:03:28 +08:00
|
|
|
name: IconPicker
|
|
|
|
|
purpose: Search and choose a Bootstrap Icons name.
|
|
|
|
|
|
|
|
|
|
properties:
|
|
|
|
|
value: string; selected icon name without the 'bi-' prefix
|
|
|
|
|
|
2026-07-18 11:44:16 +08:00
|
|
|
examples:
|
|
|
|
|
standalone_and_form: |
|
|
|
|
|
<script>
|
|
|
|
|
const selectedIcon = 'house'
|
|
|
|
|
const menu = { icon: 'heart' }
|
|
|
|
|
const menuSchema = [{ name: 'icon', label: 'Icon', type: 'IconPicker' }]
|
|
|
|
|
</script>
|
2026-07-12 02:03:28 +08:00
|
|
|
|
2026-07-18 11:44:16 +08:00
|
|
|
<IconPicker $.state.value="selectedIcon"></IconPicker>
|
|
|
|
|
<AutoForm $.state.data="menu" $.state.schema="menuSchema"></AutoForm>
|
2026-07-12 02:03:28 +08:00
|
|
|
|
|
|
|
|
events:
|
|
|
|
|
change: detail is the selected icon name
|
|
|
|
|
|
|
|
|
|
related:
|
2026-07-18 11:44:16 +08:00
|
|
|
- ../base/AutoForm.yaml
|
|
|
|
|
|
|
|
|
|
tests:
|
|
|
|
|
- IconPicker.test.html
|
