Thumbnail
Check out the function of the thumbnail element.
The Thumbnail element is used to provide a small preview of content on web pages or applications. It is often used to enhance user experience and to provide quick access to content.
While the Thumbnail is an element used to present a small preview of an image, the Image element is used to display the full-sized version of the actual image on web or mobile applications. The Thumbnail helps users quickly scan the content, whereas the Image element is used to display or present the actual image.
Adding a Thumbnail
Adding the Thumbnail element to your application is straightforward. You can follow the steps below to add a Thumbnail element:
In the UI Design view, open the Elements panel on the left.
From the Display category within the Elements panel, select the Thumbnail element.
Drag and drop the Thumbnail element.
You can customize the Thumbnail element from the Properties panel.
The Thumbnail only supports web applications. It does not support mobile applications.
Thumbnail Properties Panel
When the Thumbnail element is selected, a panel opens on the right. The Properties panel comes with the following properties: Value, PlaceholderImage, ImageFit, Position, ClassName, Authorization, and Visibility.
Value
Where we define the component's value.
PlaceholderImage
The visual value that appears when there's no Placeholder Image value.
ImageFit
Depending on the value obtained from Styling > Layout, the Thumbnail element can have a specific size. Also, the Image element can have a size determined by its parent element. In such cases, you can determine how the displayed image will fit within the Image element's frame.
Position
It is the area where the visual position to be displayed on the Thumbnail element is determined from the dropdown menu (bottom, center, right, left, top).
ClassName
ClassName is a parameter used to assign one or more class names to that element.
Authorization
You can use authorization options for the Thumbnail element.
Visibility
In elements, visibility allows you to adjust its visibility or accessibility in a certain situation. It's a property used to check if the element is visible. This property is commonly used in application design or functionality.
You can always make each element visible, hide it, or make it appear or disappear based on a condition.
Styling
You can make additional modifications to the Thumbnail element from the Styling panel, such as adding Border, Fill, or Shadow. You can customize the Thumbnail element based on these features.
Layout
You can make visual adjustments in the Thumbnail element with Layout, such as surrounding margins and sizing. To make padding and sizing settings for Thumbnail, follow these steps:
Click on the Thumbnail on the Canvas to select it.
Open the Styling panel.
Go to the Padding area in the Layout section to set the padding values.
In the Layout section, go to the Size area to set the sizing values.
The Align option is not supported in the Thumbnail element.
Border
You can add lines to the outer edges of the Thumbnail and provide corner radii.
Click on the Thumbnail on the Canvas to select it.
Open the Styling panel.
Go to the Border option.
From the Color section, select the color you want to determine the Thumbnail's Border color.
In the Radius section, you can add values to determine the edges of the border structure you will create.
Shadow
In web applications, you can add a shadow effect using Shadow in the Thumbnail element usage. Shadows are not displayed in mobile applications.
Example Thumbnail Element Use:
To add a file to the Thumbnail element, click the Add File button. The Upload File action, which functions in file uploading, should be added with +Add Action inside the element.
To add the Upload File action, click OnClick→ Device→ Upload File.
Then add the SetValueOf action. To add the SetValue Of system action, select Onclick→ UIControl→SetValueOf.
After creating the SetValueOf action, select the Thumbnail element from the dropdown menu inside the action.
The Thumbnail element comes with a value parameter. Click on the Symbol Picker to fill the value parameter.
Choose Action Results→ Upload File →Data.
Then, click the Run button to preview the application. When you click the button, a screen will open on your device to upload a file. From there, you can choose either a PDF or an image file. The file you choose as a PDF will be displayed with a PDF icon, while the added image file preview will also be displayed.
Last updated
