Webflow Components Plus in Chrome with OffiDocs

DESCRIPTION

Make various enhancements to Webflow's components workflow

This extension replaces Webflow text fields with dropdowns so you or your client can easily switch between preset values.

To make it work you need to label your props like so:
"Name of your prop {option A,option B,option C}"

The comma separated values within curly brackets will become the options for the dropdown field.

It's handy if you combine this with a CSS based styling system + custom attributes. You can make dramatic changes to your component styles without setting up a bunch of visibility props.

You can setup custom attribute based CSS styles like so:
.button[hierarchy="primary"]{ background-color: blue }
.button[hierarchy="secondary"]{ background-color: gray }
.button[hierarchy="tertiary"]{ background-color: transparent }

Then, you can setup your custom attribute in your button component:
Attribute name: hierarchy
Attribute value: Assign a prop called "Hierarchy {primary,secondary,tertiary}"

That's it. No more misspellings or confused end-users!

Webflow Components Plus web extension integrated with the OffiDocs Chromium online