Padding and margin parameters

I’m probably just dense but even after consulting the docs on parameters I can’t figure out how to get the padding and margin types to work. How do you get individual controls for left, right, bottom and top padding and margin and actually make it do something?

these are the paramaters I used

  "margin" : {
  "type"   : "group",
    "label"  : "Margins",
    "params" : {
      "top" : {
        "label"   : "Top",
        "type"    : "margin",
        "initial" : "0px",
        "isVar"   : true
      },
      "right" : {
        "label"   : "Right",
        "type"    : "margin",
        "initial" : "0px",
        "isVar"   : true
      },
      "bottom" : {
        "label"   : "Bottom",
        "type"    : "margin",
        "initial" : "0px",
        "isVar"   : true
      },
      "left" : {
        "label"   : "Left",
        "type"    : "margin",
        "initial" : "0px",
        "isVar"   : true
      }
	}
	}

And I think you need to have the ‘breakout mode’ ON to be able to paste the values into the margins

breakout mode is in the Dev Toolkit, under Tools. you can also set a shortcut key for breakout mode by adding

"inspector-breakout-mode": "mod+b"

to the Toolkit preferences keybindings (see screenshot)

Good stuff, @scotbaston…thank you for chiming in! Yes, each parameters is essentially a single value (with very rare exceptions with the color pair type) to keep things straightforward, but this does mean that you will need to wire up four different parameter controls to each individual input on a margin or padding setup to have full control over it. If you don’t need full control over these but instead just need a particular axis, one thing I’ve experimented with is making parameters for things like “Margin X,” which would be the margin across the horizontal axis, and it’d basically just map that one parameter into the left and right inputs on the margin control, giving me a much more simplified and tailored experience when working with parameters. Just some thoughts there to dovetail off of what Scot shared above.

1 Like

Nice, thanks @scotbaston!

I did not know to wire it up like that. It works fine now.

Now it would be nice to have the group toggle, link sides control, and the icons in the parameter group as well. Is that something we can do as well?

Screenshot 2022-11-01 16.53.03

@JvP, there is no way to access the toggle or link functions via parameters. Those are “second-layer” functionality built on top of the core output of the padding value themselves, so they cannot be manipulated at this time.

All right, thanks @kory

No problem. :+1:

@kory, is that something for a “Parameters version 2.0” down the line or is this kind of stuff never going to happen? Just curious :slight_smile:

As of right now I can’t speak to any specific timeline aspects of these things, but those particular features in general are not really even “controls” we can tap into at this time, they’re a secondary layer of functionality built on for us to make things easier to use at the user level, but they aren’t something Parameters can interface with directly.

No problem, thanks @kory :+1:

No problem!

Hi @JvP, you can add the icons with the labelBefore parameter.

Here’s an example for the Margin top:

 "params" : {
      "top" : {
        "type"        : "margin",
        "label"       : "Top",
        "labelBefore" : "css:margin-top",
        "initial"     : "0px",
        "isVar"       : true
      }

Just use the same naming convention for the others.

2 Likes

@Misho, thanks for that! How did you know about this?

@JvP, It was mentioned in this thread.

1 Like

Icons for border radius don’t seem to be available though.

Yes, the labelBefore portion with those css: icons is somewhat of a “secret feature” at the moment. It’s not something we’re drawing a ton of attention to, but it’s available for certain situations as it is kind of nice to be able to pull in those margin / padding icons if needed. There are no icons at the moment for border radius.

2 Likes