Parameters: Set inital value for responsive settings with isVar

[100leiden]

Hi,

How can I set the parameters initial values for the different screen sizes with isVar?

[ruenel]

Hey @100leiden,

Thanks for writing in!

With the isVar option in JSON like this:

{
  "fontSize" : {
    "label"   : "Font Size",
    "type"    : "font-size",
    "initial" : "1em",
    "isVar"   : true
  }
}

You can set the font size values just like how you set the standard element controls by clicking on the word “Font Size”:

Hope this helps.

[100leiden]

Hi @ruenel,

Thanks for your reply! This is not exactly what I ment. I want to know how I can set initial values for the different screen size. So I can set them in the component. Something like this:

  {
  "fontsize" : {
    "label"   : "Font Size",
    "type"    : "font-size",
    "initial" :  {
            "xs"  : "0.9em",
            "sm"  : "1em",
            "md"  : "1.1em",
            "lg"  : "1.2em",
            "xl"  : "1.3em"
    },
    "isVar"   : true
  }
}   

But this doesn’t seem to work.

[charlie]

If your looking to use that type of syntax (object dot syntax). You have a couple of options. font-size most likely does not support an object as the value. So it depends how you want your ui to look for your parameter and what your trying to accomplish.

See this post if you would like to see how to use as select as the type. Each “option” is an object and depending on what option is selected your parameters will change the object referenced and thus the objects. This is useful if you want a number of different values to change at once.

Changing Multiple items with a single Parameter

Ok, wanted to provide one last example, because I’ve been messing with this more and I’ve now got 4 parameters changing per option. I’ll post the entire JSON file for anyone that wants to copy it. But essentially I am now changing 4 different parameters with each choice. This ensures the icon and text and padding stay the proper scale with each “size” option. It took some messing to find the right values but they are easy to tweak if you want to. "iconSize" : { "label" : "Size", "t…

This is as a group. {{dc:p:fontSize.xs}} would be the access of these. This can be useful if you want more control, but still want it to interact as an object.

Let us know if that answers your question!

{
  "fontSize" : {
    "type"   : "group",
    "label"  : "Font Size",
    "params" : {
      "xs" : {
        "label"   : "XS",
        "type"    : "font-size",
        "initial" : ".8em"
      },
      "sm" : {
        "label"   : "SM",
        "type"    : "font-size",
        "initial" : "1em"
      }
    }
  }
}