Issue #3346Opened March 18, 2021by xinnai0 reactions

Can I develop my own stylemanager and bind the properties conveniently?

Question

I want to build my own stylemanager useing some UI framework like Element-UI to make a beauty UI quickly. But how can I bind the properties to a selected component? I didn't see any API like setProperties to an element... . Can you help how to do that, thank you very much!!!

Answers (3)

RutujaBadbeMarch 22, 20210 reactions

#2296 This might help you!

artfMarch 22, 20210 reactions

I guess something like this should work, if you need to create the Style Manager from scratch

let targetsToStyle = [];
const eventToListen = 'component:toggled component:update:classes change:state change:device';
const sm = editor.StyleManager;

editor.on(eventToListen, () => {
  targetsToStyle = editor.getSelectedAll().map(cmp => sm.getModelToStyle(cmp));
  // Loop through selected targets and update inputs (depends on your framework of choice)
  targetsToStyle.forEach(target => {
   const style = target.getStyle();
   // ... update inputs
  })
});

// On some element change (depends on your framework of choice)
myBgInputElement.onChange((newBgValue) => {
  targetsToStyle.forEach(target => target.addStyle({ background: newBgValue }))
})
xinnaiMarch 24, 20210 reactions

@artf That is totally what I need! Thank you very much!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.