PICKZEN
  • FAQ
  • Security in Pickzen
  • Builder
    • Builder Overview
    • Questions
      • Types and layouts
      • Display settings
      • Styling the text
      • Slide settings
      • Admin names
      • Slide help
      • Feedback slide
      • End slide
        • Number of outcomes
        • Forget results
        • Automatic redirect
        • Recommending content
      • Skip Logic
        • Branching controlled by slides
        • Branching controlled by tree
    • Products
      • Selecting products
      • Managing products
    • Linking
      • Linking choices to products
    • Install
      • Notification
      • Link
      • Button
      • Embedded
    • Lead Generation
      • Lead capture before recommendation
      • Receiving leads by e-mail
      • Sending e-mails to new leads
        • Adding customized data to e-mails
    • Advanced
      • Product attributes
      • Features table
        • Features from linking
        • Features from attributes
        • Smart texts
      • Insertable texts
        • User answers
        • Response based texts
      • Slots
  • Analytics
    • A/B Tests
      • Launching an A/B Test
      • Reviewing A/B test results
    • Insight panel
      • Overview
      • Responses
      • Leads
    • Parameters tracking
    • Sales tracking
  • Integrations
    • Your website
      • Pickzen Code
        • Installing the Pickzen Code in Shopify
        • Installing the Pickzen Code on any website
      • Add to cart
      • Add all to cart
    • MailChimp
    • Klaviyo
    • HubSpot
    • Zapier
    • Recharge
      • Recharge v1
      • Recharge v2
    • Product Feeds
    • Google Analytics
    • Facebook
  • Guides
    • Facebook/Instagram retargeting
    • HubSpot guide
    • MailChimp guide
    • Klaviyo guide
    • No-Code
      • Builder
        • Aliases
        • Tables
          • Executable tables
          • Data tables
          • Cell types
        • Settings
        • Simulation
      • Functions
        • ADDTO
        • CONCAT
        • EMPTY
        • EVALTABLE
        • EXTRACT
        • FIRST
        • FLAT
        • LOG
        • NTH
        • PERSONALITY
        • PRESCRIBE
        • PRESCRIBESLOTS
        • PROPERTY
        • RANK
        • RECIDS
        • RECGROUP
        • RECSKUS
        • REFINE
        • REMOVEFROM
        • SECOND
        • SLOTS
        • SPLIT
        • TABLEVALUE
        • TRUNC
      • Tutorials
        • Prescription Rules + Taglines
        • Calculator
  • Design System
    • Enabling the DS
    • The builder
      • Preview panel
      • Components panel
      • Properties panel
    • Properties
    • Variants
    • Properties values
      • Parametrization
      • References
      • Deferred actions
    • Components
      • [Base]
      • Button
      • Collapsable
      • Container
      • CoverSlide
      • Deck
      • Dropdown
      • EndFormSlide
      • EndSlide
      • FeedbackSlide
      • FormMapper
      • FormSlide
      • Grid
      • HTML
      • Icon
      • Image
      • InputDate
      • InputNumber
      • InputText
      • Label
      • Link
      • Product
      • ProgressBar
      • QuestionSlide
      • Repeater
      • Separator
      • SlideRenderer
      • Specs
      • TextArea
    • Views
    • Editor settings
    • Accesibility
    • Interceptors
    • HowTo
      • Show a variant programmatically
      • Use CSS in custom component
  • Administration
    • Managing accounts
      • Inviting collaborators
      • Requesting access
    • Copying pickzens between accounts
    • Replacing pickzens
    • Recovering versions
  • Developers
    • Developers panel
      • CSS customization
      • JavaScript customization
    • JavaScript API
      • Hooks
      • HOWTOs
        • How to add results
        • How to get the answers
        • How to decorate products
        • Escaping the iframe
    • REST API
      • API rate limit
      • Assistants resource
      • Responses resource
    • SDK
      • Documentation
        • Engine
        • Slide
        • CoverSlide
        • QuestionSlide
          • QuestionOption
        • FeedbackSlide
        • FormSlide
          • FormField
            • SelectorField
            • SelectorFieldOption
            • ImageField
        • EndSlide
          • Result
      • HOWTOs
        • Populate custom dropdown
Powered by GitBook
On this page
  1. Design System

Variants

PreviousPropertiesNextProperties values

Last updated 3 years ago

Variants allows to have different visualizations depending of the state of the component. Typically are used to implement states like Hover or Selected. Let's see the SelectableText component:

This kind of component will need to change when it is hovered or selected to let the user know the current state. In order to see or edit the variants, go to the Variants tab:

We see this component defines 2 custom variants along with the default one: hover and selected. The hover variant is automatic, when the component is hovered the hover variant will be rendered. However, we need to tell the component when the selected variant should be rendered as the selected state is not a standard state being dependant of the implementation. For that, we associate the state to a property, in this case the selected property so when this property resolves to true that component will be rendered using the selected variant.

When a component has custom variants, a variants dropdown will appear next to it:

If we change the variant to hover, we can preview this variant:

In the same way, if we change the variant to selected, we can preview it:

Any change in a variant will not affect other variants so we can create the variants independently. The values of any variant will inherit the default variant ones. For example these values appearing in the hover variant will be the same of the default variant:

However, if we change something there, the change will only apply to the hover variant without altering any other variant.

In the same way, if we change values in the default variant, they will be applied to the other variants automatically as long as the variant has not already overwritten them.