diff --git a/Chapters/bloc/figures/proportionalFromIssue562.png b/Chapters/bloc/figures/proportionalFromIssue562.png new file mode 100644 index 0000000..257eacc Binary files /dev/null and b/Chapters/bloc/figures/proportionalFromIssue562.png differ diff --git a/Chapters/bloc/layout.md b/Chapters/bloc/layout.md index a54a785..b10abba 100644 --- a/Chapters/bloc/layout.md +++ b/Chapters/bloc/layout.md @@ -915,4 +915,53 @@ aContainer := BlElement new aContainer openInNewSpace. ``` -![Frame layout](figures/proportionalLayout.png) \ No newline at end of file +![Frame layout](figures/proportionalLayout.png) + + + + +### Proportional layout + +This section should reevaluated - it is a copy and paste from an issue +[https://github.com/pharo-graphics/Bloc/issues/562](https://github.com/pharo-graphics/Bloc/issues/562) + +``` +gap:= 20. + +BlElement new + constraintsDo: [ :constraints | + constraints horizontal exact: 400. + constraints vertical exact: 300. + constraints padding: (BlInsets all: gap) ]; + background: Color red; + id: #A; + layout: BlProportionalLayout new; + addChildren: { + (BlElement new + constraintsDo: [ :constraints | + constraints proportional vertical bottom: 0.5. + constraints margin: (BlInsets all: gap) ]; + id: #B; + background: Color green; + yourself). + (BlElement new + constraintsDo: [ :constraints | + constraints proportional horizontal right: 0.5. + constraints proportional vertical top: 0.5. + constraints margin: (BlInsets all: gap) ]; + id: #C; + background: Color blue; + yourself). + (BlElement new + constraintsDo: [ :constraints | + constraints proportional horizontal left: 0.5. + constraints proportional vertical top: 0.5. + constraints margin: (BlInsets all: gap) ]; + id: #D; + background: Color yellow; + yourself) }; + yourself +``` + +![Proportional layout from issue 562](figures/proportionalFromIssue562.png) +