ResponsiveContainer

Checks if the given reference-width is less the given breakpoint and then sets shrink to true.

Properties

  • reference-width: (in length): Defines the reference width for the break point check. Commonly the width of the containers parent.
  • break-point: (in length): Defines the break point, that is used to evaluated shrink (default 444px).
  • shrink: (out bool): If set to true it indicates that one of the children should shrink, commonly the SideBar.
  • expand-button-width: (out length): Describes the width of the expand button.
  • expand-shrunken: (in_out bool): If set to true and shrink is true the shrunken element should be expanded as overlay.

Example

import { ResponsiveContainer, SideBar } from "@coop/lib.slint";

export component Example inherits Window {
    width: 200px;
    height: 25px;

    i-container := ResponsiveContainer {
        reference-width: parent.width;

        if (!self.shrink) : HorizontalLayout {
            SideBar {}

            Rectangle {
                Text {
                    text: "content";
                }
            }
        }

        if (self.shrink) : Rectangle {
            Rectangle {
                Text {
                    text: "content";
                }
            }

            SideBar {
                x:  i-container.expand-shrunken ? -self.width : 0;
            }
        }
    }
}