- Install the plugin
- From static or dynamic select one option.
- For static choices, each option is separated by enter or newline
- Use option sets or a database to display different options for dynamic choices.
- This plugin handles all icons.
- For font awesome v4 you can store it as
.
- For font-awesome v6 sub-options store the icon as
pen-to-square-regular/brands/solid enclosed in [fa].
- For images, the process is the same as for images
stored.
- For material icons store the name of the respective
material icon.
- For material icons, sub-options store the icon as
add_location_alt-rounded/outlined/two-tone/sharp.
- By default, the material icon is filled.
- You can store ionic icons as [ion]return-down-
back[/ion].
- For ionic icons sub-options store the icon as return-
down-back-outline/sharp.
- By default, the ionic icon is filled.
- For phosphor icons you can store it as [ph]address-
book-tabs[/ph].
- For phosphor icons sub-options store the icon as
address-book-tabs-fill/thin/light/bold/duotone.
- By default the ionic icon is regular.
- For bootstrap icons, you can store it as [bi]bookmark-
star-fill[/bi].
- For feather icons you can store it as [ft]user-minus[/ft].
- The icon is saved in selected_icon state and the option
is saved in selected_option.
Dropdown with Icon Display: This element allows you to visually display the selected state from the plugin. For instance, if you'd like to show an Ionic icon alongside text, simply input the desired icon in the "Icon" field and the corresponding label in the "Text" field. The chosen option will then be presented seamlessly within the text element, offering a clear and user-friendly representation of the selection.
🔗Editor Page:
https://bubble.io/page?id=chakor-plugin-demo-2&tab=tabs-1&name=dropdown_with_icon_pro&type=page🔗Demo Page:
http://chakor-plugin-demo-2.bubbleapps.io/version-test/dropdown_with_icon_pro