跳到主要内容

Icon

What is Icon?

The Icon component in ILLA Cloud is a powerful feature that allows users to enhance the visual appeal and functionality of their applications. With the Icon component, users can easily add icons from popular icon libraries to their user interfaces, providing a more intuitive and engaging experience for their users.

Properties

PropertiesDescription
Iconallows users to easily select an icon from a predefined set of options
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through a dynamical boolean value.
Theme ColorAllows users to specify the button's background color and opacity

Event handler

EventDescription
ClickWhen a user click this icon, perform specific action customized by users.

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
colorSchemestroke color of the icon
displayNamethe name of this component (ie icon1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconNamethe label name for icon
tooltipTextvalue of tooltip text

Example: {{icon1.iconName}}

Use case

Below are some examples of icons we offer:

  • Flat Color Icons:

icon_picker0

  • Simple Line:

icon_picker1

  • Tabler Icons:

icon_picker2

  • Bootstrap Icons:

icon_picker3