ILLA components

​

ILLA provides dozens of pre-built components for quickly building web front-end interfaces.

​

Component list

​

Inputs

• Input: Used to get the shorter string entered by users

• Number input: Used to get a number entered by users.

• Editable text: Used to display a string and switch to an edit mode when clicked.

• Textarea input: used to get the long string entered by users

• Upload: Used to pick local files and parse them into base64 data. Click here to learn more about Upload

• Coming soon
  • Recording
  • Slider
  • Range slider
  • Rich text input
  • JSON editor

​

Select inputs

• Switch: A switch that can return true or false

• Select: Display all options in the drop-down and allow users to select

• Radio group: Show all options and allow users to select one of them

• Checkbox group: Show all options and allow users to select multiple options

• Cascader: Used to display and select a set of the associated data set

• Radio button: Display all options in a button style. Allow users to select one of them.

• Coming soon
  • Multiple select
  • Tree select

​

Calendar inputs

• Date: Used to enter a date. Allow custom data format.

• Date range : Used to enter a date range. Allow custom data format.

• Date time: Used to enter a date and time. Allow custom data format.

• Coming soon
  • Time

​

Presentation

• Text: It is used to display strings and allows to get dynamic data by JavaSript. Support markdown syntax. Click here to learn more about it.

• Image: Used to display images. The image source could be an URL or base64 data.

• Button: Click to trigger corresponding business logic

• Icon: Used to express actions, state, categorize data and trigger events when clicked

• Statistics: Used to display statistic number

• Rate: Used to enter or display ratings

• Bar progress: Used to display the progress

• Circle progress: Used to display the progress

• Timeline: Used to display time-flow information, generally recording events in time by flashback, tracking what the user is doing now and what he has done in the past.

• Divider: Used to separate different content

• Tabs: Tabs categorize content, in order to present a large amount of information in a limited space. Users can easily switch among tab panels without transitioning from one page to another

• Menu: Used to display page structure, control page jump or trigger other events

• Container: Group components into cards that support multiple views. Click here to learn more

• Form: Pack the data of the input components into an object as the value of the form component, which can be directly submitted to the API

• List: Customize the components in the list and display the data

• Modal: Display data or perform operations through a floating layer, making user interface interaction more friendly

• PDF: Support a PDF URL or base64 encoded data

• Video: Support most video services or a direct link to any common video file type.

• Carousel: Image carousel.

• Coming soon
  • Audio
  • Steps
  • Collapsible
  • Map box

​

Data

• Chart: Visualize your data, support column chart, line chart, scatter chart, pie chart. Click here to learn more about it.

• Table: A common way to view and interact with your data. You can sort, filter, pagination, and download rows of information. Tables also support row selection and custom columns. Click here to learn more about it.

​

Search for a component

You can click the INSERT tab on the right panel to enter the component list. Enter the component name and search for the component through the input box above.

​

Use event handler to trigger events

Taking the button component as an example, you can set an event handler for the component by the way of the picture shown to trigger an action or control other components, etc. When you click on a component, or when the data of the component changes, corresponding events can be triggered.

​

Use the component data in actions

You can use data of components in actions or other components. Taking the input component as an example, you can use {{input1.value}} to get the entered value in the component. Different components may have different data formats. Please view the data formats through the left panel.