QLayout

The QLayout component is a powerful tool for creating responsive layouts in your application. It allows you to easily create complex layouts with minimal effort.

To handle the layout of your application, Quaff provides a view prop that allows you to quickly configure one. Use lowercase letters for the four corners. Supported uppercase flags, as in hHh LpR fFf, currently behave the same as lowercase.

For RTL layouts, use drawerStart/drawerEnd and railbarStart/railbarEnd snippets with matching side="start" (the default) or side="end". They follow the component's inherited dir. The existing left/right snippets and explicit side="left"/side="right" remain available for fixed placement.

The view columns always describe physical left and right, including in RTL. The component's side controls its placement; the snippet name does not.

Basically, the view prop can be split in 3 parts of 3 letters:

• The first part defines the header layout. The first letter defines wether the header h or the railbar and drawer l should extend to the top left corner. The second letter is always a h. The third letter defines wether the header h or the railbar and drawer r should extend to the top right corner.
• Right now, the second part doesn't have any impact on the layout so using lpr by default works well. Note that it might change in the future.
• Finally, the third part defines the footer layout in the same way the first group defines the header layout. The only difference is the h (for header) is replaced by f (for footer).

As the view prop can be a bit tricky to understand at first, here's a sandbox where you can try different layout configurations and see how they look in real-time. When you find a layout you like, you can copy the code for it and use it in your own application.