Please Describe The Problem To Be Solved
LayoutContainer currently accepts ColorSource for backgroundColor/borderColor. Supporting FillInput unlocks gradient use for backgrounds.
(Optional): Suggest A Solution
Currently, implementation-wise, the border can only accept StrokeInput. A combination of rectangle fill and cut by inner smaller rectangle could allow this.
new Graphics()
.roundShape(borderPoints, radius) //border-box rectangle
.fill(borderColor)
.roundShape(innerContentPoints, innerRadius) //content-box rectangle
.cut();
In my custom limited implementation, I've used the flexibility of round points to apply border radius for each corner as per layout conditionally as well.
const borderPoints: RoundedPoint[] = [
{
x: 0,
y: 0,
radius: borderTopLeftRadius,
},
{
x: width,
y: 0,
radius: borderTopRightRadius,
},
{
x: width,
y: height,
radius: borderBottomRightRadius,
},
{
x: 0,
y: height,
radius: borderBottomLeftRadius,
},
];
Please Describe The Problem To Be Solved
LayoutContainer currently accepts ColorSource for backgroundColor/borderColor. Supporting FillInput unlocks gradient use for backgrounds.
(Optional): Suggest A Solution
Currently, implementation-wise, the border can only accept StrokeInput. A combination of rectangle fill and cut by inner smaller rectangle could allow this.
In my custom limited implementation, I've used the flexibility of round points to apply border radius for each corner as per layout conditionally as well.