QUESTION: Is there a way to use different variations of the same style property?

Question

Note: This is in the context of the Style Manager. Is there a way to use different variations of the same style property? For example when I use the text-align property on a non-text node component I'd like the label to read "Align Content" with the options of "left", "right" and "center". However, when the "text-align" property is displayed for a text node I'd like the label to read "Align Text" with the options of "left", "right", "center", and "justify". I've searched the documentation and i...

Ju99ernaut · Accepted Answer

I don't think that's possible using the API, also does text-align work for non-text components? You'll probably want to use the align-content property from flexbox

artf · Answer

You should try to use Component's stylable-require property to show the particular style property (marked with toRequire) and unstylable for the one you don't need.

Joshmamroud · Answer

@artf Thank you for your response. In this case, I would still have an issue using the align-content property with flex columns and rows. For columns, I'd like the options to read: Top, Center, and Bottom and for rows I'd like the options to read: Left, Center, and Right. My users aren't too familiar with CSS let alone flexbox and to use Start, Center and End won't be as good of a user experience as I'd like. Do you have any other suggestions? Thank you, Josh

Is there a way to use different variations of the same style property?

Question

Answers (3)

Related Questions and Answers

[Question] Define or hide properties for specific components

[QUESTION] Is it possible to affect child component's styling through parent component's style manager?

Question: how to observe children changes in component

[QUESTION] What is the idiomatic way to append and remove classes from components?

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

Browse Plugin Categories