Rectangle - Slint — ContextQMD

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro'; import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

By default, a Rectangle is just an empty item that shows nothing. By setting a color or configuring a border, it's then possible to draw a rectangle on the screen.

When not part of a layout, its width and height default to 100% of the parent element.

<CodeSnippetMD imagePath="/src/assets/generated/rectangle-example.png" imageAlt='rectangle example'> ```slint playground export component ExampleRectangle inherits Window { width: 200px; height: 800px; background: transparent;

Rectangle {
    x: 10px; y: 10px;
    width: 180px;
    height: 180px;
    background: #315afd;
}

// Rectangle with a border
Rectangle {
    x: 10px; y: 210px;
    width: 180px;
    height: 180px;
    background: green;
    border-width: 2px;
    border-color: red;
}

// Transparent Rectangle with a border and a radius
Rectangle {
    x: 10px; y: 410px;
    width: 180px;
    height: 180px;
    border-width: 4px;
    border-color: black;
    border-radius: 30px;
}

// A radius of width/2 makes it a circle
Rectangle {
    x: 10px; y: 610px;
    width: 180px;
    height: 180px;
    background: yellow;
    border-width: 2px;
    border-color: blue;
    border-radius: self.width/2;
}

}

</CodeSnippetMD>

## Properties

### background
<SlintProperty propName="background" typeName="brush" defaultValue="transparent">
The background brush of this `Rectangle`.

<CodeSnippetMD imagePath="/src/assets/generated/rectangle-background.png"  imageWidth="200" imageHeight="400"  imageAlt='rectangle background'>
```slint
property <brush> rainbow-gradient: @linear-gradient(40deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%,rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%);

Rectangle {
    x: 10px;
    y: 10px;
    width: 180px;
    height: 180px;
    background: #315afd;
}


Rectangle {
    x: 10px;
    y: 210px;
    width: 180px;
    height: 180px;
    background: rainbow-gradient;
}

</CodeSnippetMD> </SlintProperty>

border-color

<SlintProperty propName="border-color" typeName="brush" defaultValue="transparent"> <CodeSnippetMD imagePath="/src/assets/generated/rectangle-border-color.png" imageWidth="200" imageHeight="200" imageAlt='rectangle border-color'> ```slint Rectangle { width: 200px; height: 200px; border-width: 10px; border-color: lightslategray; } ``` </CodeSnippetMD> The color of the border. :::caution[Caution] The default `border-width` is `0px`, so the border is invisible. After setting a color also ensure that the `border-width` is set to a non-zero value. ::: </SlintProperty>

border-width

<SlintProperty propName="border-width" typeName="length" defaultValue="0"> <CodeSnippetMD imagePath="/src/assets/generated/rectangle-border-width.png" imageWidth="200" imageHeight="200" imageAlt='rectangle border-width'> ```slint Rectangle { width: 200px; height: 200px; border-width: 30px; border-color: lightslategray; } ``` </CodeSnippetMD> The width of the border. </SlintProperty>

clip

<SlintProperty propName="clip" typeName="bool" defaultValue="false"> <CodeSnippetMD skip="true" imagePath="/src/assets/generated/rectangle-clip.png" imageWidth="200" imageHeight="400" imageAlt='rectangle clip'> ```slint // clip: false; the default Rectangle { x: 50px; y: 50px; width: 150px; height: 150px; background: darkslategray; Text { text: "clip: false"; font-size: 20pt; color: white; } Rectangle { x: -40px; y: -40px; width: 100px; height: 100px; background: lightslategray; } }

// clip: true; Clips the children of this Rectangle Rectangle { x: 50px; y: 250px; width: 150px; height: 150px; background: darkslategray; clip: true; Text { text: "clip: true"; font-size: 20pt; color: white; } Rectangle { x: -40px; y: -40px; width: 100px; height: 100px; background: lightslategray; } }

</CodeSnippetMD>

<CodeSnippetMD noScreenShot imagePath="/src/assets/generated/rectangle-clip.png"  imageWidth="200" imageHeight="400"  imageAlt='rectangle clip'>
```slint
// clip: false; the default
Rectangle {
    x: 50px; y: 50px;
    width: 150px;
    height: 150px;
    background: darkslategray;
    Rectangle {
        x: -40px; y: -40px;
        width: 100px;
        height: 100px;
        background: lightslategray;
    }
}

// clip: true; Clips the children of this Rectangle
Rectangle {
    x: 50px; y: 250px;
    width: 150px;
    height: 150px;
    background: darkslategray;
    clip: true;
    Rectangle {
        x: -40px; y: -40px;
        width: 100px;
        height: 100px;
        background: lightslategray;
    }
}

</CodeSnippetMD> By default, when child elements are outside the bounds of a parent, they are still shown. When this property is set to `true`, the children of this `Rectangle` are clipped and only the contents inside the elements bounds are shown. </SlintProperty>

Border Radius Properties

border-radius

<SlintProperty propName="border-radius" typeName="length" defaultValue="0"> The size of the radius. This single value is applied to all four corners. </SlintProperty>

To target specific corners with different values use the following properties:

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

Drop Shadows

To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of an element, it's possible to set the following drop-shadow properties:

drop-shadow-blur

<SlintProperty propName="drop-shadow-blur" typeName="length"/> The radius of the shadow that also describes the level of blur applied to the shadow. Negative values are ignored and zero means no blur.

drop-shadow-color

<SlintProperty propName="drop-shadow-color" typeName="color"/> The base color of the shadow to use. Typically that color is the starting color of a gradient that fades into transparency.

drop-shadow-offset-x

<SlintProperty propName="drop-shadow-offset-x" typeName="length"/> The horizontal distance of the shadow from the element's frame.

drop-shadow-offset-y

<SlintProperty propName="drop-shadow-offset-y" typeName="length"/> The vertical distance of the shadow from the element's frame.