diff --git a/modules/Layout.md b/modules/Layout.md index 9a5eb6b81..5a457408a 100644 --- a/modules/Layout.md +++ b/modules/Layout.md @@ -3,6 +3,8 @@ Bangle.js Layout Library > Take a look at README.md for hints on developing with this library. +**Please see more complete documentation at https://www.espruino.com/Bangle.js+Layout** + Usage ----- @@ -85,6 +87,40 @@ Other functions: - `layout.setUI()` - Re-add any UI input handlers +Alignment +---------- + +You can align elements within their `h` or `v` containers with `halign` and `valign`, however within an element, text is always rendered centered. + +As a result, if you want to align text, you shouldn't use `fillx:1` in the text element as the element will then fill to all available space and won't align. + +```JS +var layout = new Layout( { + type:"v", c: [{ + type:"txt", + font:"20%", + fillx:0, // must be 0 for halign to work + filly:1, + halign:-1, // LEFT align + label:"Left" + }, { + type:"txt", + font:"20%", + fillx:0, + filly:1, + halign:0, // CENTER align + label:"Center" + }, { + type:"txt", + font:"20%", + fillx:0, + filly:1, + halign:1, // CERIGHTNTER align + label:"Right"}, + ] +}); +``` + Using with `E.showMenu`/`E.showPrompt`/etc --------------------------------------