FusedNumber

ControlType.FuseNumber

这个类型控制可以实现单一数值和多个数值之间转换。尤其适合用控制border, padding 或者 margin等等这些可以在单一值和多方位值之间切换使用的属性设置。当你选择单一输入时，就是四个方位都使用同一值，也可以切换到四个方位分别设置。

export function MyComponent({
  radius = 50,
  topLeft,
  topRight,
  bottomRight,
  bottomLeft,
  isMixed = false,
}) {
  const borderRadius = isMixed
    ? `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`
    : `${radius}px`
  return <Frame background={"red"} borderRadius={borderRadius} size={"100%"}></Frame>
}

addPropertyControls(MyComponent, {
  radius: {
    type: ControlType.FusedNumber,
    title: "Radius",
    defaultValue: 50,
    toggleKey: "isMixed",
    toggleTitles: ["All", "Individual"],
    valueKeys: ["topLeft", "topRight", "bottomRight", "bottomLeft"],
    valueLabels: ["NW", "NE", "SE", "SW"],
    min: 0,
  },
})