Icon Picker

Icon Picker

The Icon Input element can be used in the Screen Designer by dragging the element into the Screen Designer Canvas.

Within the 'Basic' editable properties in the Editor Panel, the Icon input can be customized the default label set to “Icon Picker” that will present on the top side of the Icon Input element.

image-20240618-201305.png
image-20240618-201540.png

 

Editable Properties:
  1. Basic
    1. Label
    2. Data Path
    3. Form Element
    4. Query Size
    5. Simplified Mode
    6. Hide Color
    7. Hide Size
    8. Hide Variant
    9. Default Color
    10. Default Size
    11. Default Variant
  2. Display
    1. Padding
    2. Width
    3. Height
    4. Align Items
    5. Visible
  3. Validation
  4. Advanced

image-20240618-201714.png
image-20240618-201807.png

 

Functionality:

The user can add an icon by searching and selecting it from the Icon Picker popup; it will then replace the input placeholder.

User can select its desire properties to apply direct to the icon.

Variant:

  • solid
  • light

  • regular

  • duotone

Size:

  • nano

  • tiny

  • small

  • icon

  • medium

  • large

  • xlarge

Color:

  • textPrimary

  • textSecondary

  • primary

  • secondary

  • disabled

  • error

  • warning

  • into

  • success

  • inherit
image-20240129-175512.png
Search Icon
image-20240129-175814.png
Icon Variant
image-20240129-175841.png
Icon Size
image-20240129-175908.png
Icon Color

 

  1.  Switch to Color theme: Users can switch to a color theme and choose their preferred color, which will be applied to the icons.
  2. Edit Icon: By clicking on the icon, the user can edit it, which includes:
    1. Updating the icon
    2. Changing its properties
image-20240129-181656.png
1: Switch to Color Theme
image-20240129-181956.png
2: Edit Icon

 

Remove Icon:
The user can remove the icon by clicking on it and disable it, which will remove the icon from the input. Another option is to clear the “Search Icon” text input and hit confirm.

Enable and Disable Icon:
Users can enable or disable the icon by clicking on the icon with the name below before adding it.

An enabled icon will be added to the input, while a disabled icon will not be added to the input.

image-20240129-184431.png
Icon enabled
image-20240129-184558.png
Icon disabled

    • Related Articles

    • Switch

      The Switch input element can be used in the Screen Designer by dragging the element into the Screen Designer Canvas. Within the 'Basic' editable properties in the Editor Panel, the Switch can be customized to have a single label and/or a second label ...

    • Text (Display Text)

      The text display element can be used in the Screen Designer by dragging the element into the Screen Designer Canvas from elements under display. Within the 'Basic' editable properties in the Editor Panel, the text can be customized to have an default ...

    • Color Input - JSON Editing

      Creating a screen, sometimes it is quick and easy to use the modal feature within a table or form design to engage with your end users to create or update a record in Fuuz. You can certainly use the screen designer to drop in the input components you ...

    • Array Input

      The Array Input element can be used in the Screen Designer by dragging the element into the Screen Designer Canvas. Within the 'Basic' editable properties in the Editor Panel, the Array input can be customized to have a label that will present on the ...

    • Interaction

      Screen Elements in the Interaction category provide quick components that allow the user to interact with the screen.