Visual Picker Link
A visual picker link is visual enhanced box to open an external content.
📘 Overview
A visual picker link is a visually enhanced box to open external content.
Changing the Properties
Adding Content
Content for the Visual Picker Link component can be added by completing the Title
and Content
fields.
Adding an icon
If needed, an icon can be added on the left
or right
side of the content.
Adding Interactions
Interactions define what will happen when users interact with the Visual Picker Link component. You can find a list of interactions available here.
Here are the available interactions for the Visual Picker Link component:
On
Click
: The event is fired when a user clicks on the visual picker link.
Styling the Visual Picker Link
From the Styles panel, you can customize styling attributes for the Visual Picker Link component:
Icon
: to customize the styling attributes of the icon.
Examples
Property | Value |
---|---|
Title | Avonni Component Builder Documentation Website |
Content | This documentation explains..... |
Icon Name | utility:knowledge_base |
Icon Position | Left |
Specifications
Attributes
Name | Type | Description |
---|---|---|
completed | Boolean | If present, the picker is displayed as completed. |
content | String | The URL of the page that the link goes to. |
iconName | String | The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. |
iconPosition | String | Position of the icon. Valid values include left and right. |
infoOnly | Boolean | If present, the picker is displayed as info only. |
title | String | Title of the visual picker link. To include additional markup or another component, use the title slot. |
Events
Name | Description |
---|---|
click | The event fired when the visual picker is clicked. |
Styling Hooks
Icon
Name | Description |
---|---|
Background Color | Define a icon background color. |
Background Color Complete | Define an icon background color when the "Completed" property is activated. |
Foreground Color | Define a icon foreground color. |
Foreground Color Utility | Define a icon foreground color utility. |
Border Radius | Define a icon border radius. |
Last updated