search

aFuzzyBear / astro-ui

MonoRepo to house the collective distribution for Astro Components, Hoping this turns out to be a community led effort where Astro UI Components can be stored and accessed
astro-ui.vercel.app
MIT License
37 stars 8 forks source link

Added in-line styling for XElement #33

Open lostra01 opened 2 years ago

lostra01 commented 2 years ago

Added in-line styling options for XElement that eliminates the need of manually setting the style from JS.

Create a templated style - with variables if needed, then pass it into define:style (in the same manner as define:vars works)

eg:

---
const Height = Astro.props.Height;
const Color = Astro.props.Color;
const divStyle = `
    background-color: ${Color};
    height: ${Height};
    width: 100%;
`;
---

<XElement define:style={{divStyle}} />
aFuzzyBear commented 2 years ago

Following our conversation regaring having define:styles into @styles Moved the logic of the code into the correct place, just need to test this,