The Text Swatch UI element displays a list of text-based options, instead of colors or images. These options represent different styles, sizes, fonts, or other textual variations.
To configure Text Swatch:
- Select the current condition of the element from the State dropdown on the right-side Properly Panel:
- Normal: The default state of the element when it is not being interacted with.
- Hover: The state of the element when the user hovers over it with the mouse cursor.
2. Expand General to indicate the gap between the Text Swatch options.
3. Make the necessary configuration of principal styling features (see Global Styles).
4. Tick the Text Swatch element to activate the Text item.
- Select the current condition of the Text item from the State dropdown on the right-side Properly Panel: Normal, Hover, Focus, Active.
- Select how it behaves based on certain conditions or user interactions from the Mode dropdown:
- Not Selected: Text is not actively chosen or highlighted by the user.
- Selected: Text has been actively chosen or highlighted by the user.
- Not Available: The text option is not selectable or usable. For example, the text item may appear grayed out or visually subdued compared to the available option, or clicking or selecting it might yield no response, indicating that it's not selectable.
- Make the necessary configuration of principal styling features (see Global Styles).
5. Click the element Label to modify the styling features and text inside the UI element (see Global Styles).
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.