stylesetter

Use the syntax like setter in xaml to write the style of the element

Usage no npm install needed!

<script type="module">
  import stylesetter from 'https://cdn.skypack.dev/stylesetter';
</script>

README

StyleSetter

1. install

npm install stylesetter

2. import

  • ESM

    import StyleSetter from "stylesetter";

StyleSetter();
// or use 'Vue.use(StyleSetter)' in Vue Project

    or

    import('stylesetter').then(
    (module) => {
        module.default();
    }
)

  • CJS

    const StyleSetter = require("stylesetter");

StyleSetter();
// or use 'Vue.use(StyleSetter)' in Vue Project

    or

    require("stylesetter")();

  • HTML

    <script src="./stylesetter/lib/index.js"></script>

3. usage

  • Version Mark
    Explicitly indicate which version is used
<style-setter v1>...</style-setter>
<style-setter version="2">...</style-setter>
  • V1
    Style with attributes
<parentElementName>
    <style-setter property="width" value="100px"></style-setter>
    <style-setter property="color" value="red"></style-setter>
</parentElementName>
  • V2
    Style with subTags and prefix("ss-")
// All labels can be written in single label form.
<parentElementName>
    <ss-{propertyName} value="{propertyValue}"/>  // works in all case
    <ss-{propertyName} ss-{propertyValue}/>  // works in some case(without blank in property`s value)
</parentElementName>

// There are three way to use StyleSetter v2.
<parentElementName>
    <ss-{propertyName} value="{propertyValue}"></ss-{propertyName}>  // works in all case(recommend)
    <ss-{propertyName}>{propertyValue}<ss-{propertyName}>  // works in all case(recommend)
    <ss-{propertyName} ss-{propertyValue}><ss-{propertyName}>  // works in some case(without blank in property`s value)
</parentElementName>

<parentElementName>
    <style-setter>
        // 1. normal use
        <ss-color value="red"></ss-color>
        <ss-color>red</ss-color>
        <ss-color ss-red></ss-color>
        
        // 2. with hyphen in attribute`s key
        <ss-border-radius value="2px"></ss-border-radius>
        <ss-border-radius>2px</ss-border-radius>
        <ss-border-radius ss-2px></ss-border-radius>
        
        // 3. with hyphen in attribute`s value
        <ss-display value="inline-block"></ss-display>
        <ss-display>inline-block</ss-display>
        <ss-display ss-inline-block></ss-display>
        
        // 4. with blank in attribute`s value
        <ss-border value="solid 1px red"></ss-border>
        <ss-border>solid 1px red</ss-border>
        <ss-border ss-solid 1px red"></ss-border> // × not allowed
    </style-setter>
</parentElementName>

4. test

git clone https://github.com/lopo12123/stylesetter.git

cd stylesetter && npm run test