Comment on page

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.

Property	Value
Title	Avonni Component Builder Documentation Website
Content	This documentation explains.....
Icon Name	utility:knowledge_base
Icon Position	Left

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.

Name	Description
click	The event fired when the visual picker is clicked.

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 modified 2mo ago