diff --git a/addon/components/layout/stack/item.hbs b/addon/components/layout/stack/item.hbs index f49db3be..adf3ae40 100644 --- a/addon/components/layout/stack/item.hbs +++ b/addon/components/layout/stack/item.hbs @@ -1,4 +1,8 @@
{{yield}}
+>{{yield}} \ No newline at end of file diff --git a/addon/styles/addon.css b/addon/styles/addon.css index 0ba41e11..f87a0217 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -75,6 +75,17 @@ border-bottom: 1px solid var(--layout-stack-separator-color); } +/* "Floating" is achieved via margin: auto */ +.layout-stack-item--bottom { + margin-top: auto; +} + +.layout-stack-item--center, +.layout-stack-item--center:not(:last-child) { + margin-top: auto; + margin-bottom: auto; +} + /* Cluster */ .layout-cluster { --cluster-gap-size: var(--layout-cluster-gap); diff --git a/tests/dummy/app/controllers/stack.js b/tests/dummy/app/controllers/stack.js index 137cb198..2fb654e3 100644 --- a/tests/dummy/app/controllers/stack.js +++ b/tests/dummy/app/controllers/stack.js @@ -17,4 +17,18 @@ export default class StackController extends Controller { Second item Third item `; + + stackCodeBottom = ` + First item + Second item + Third item + Fourth item +`; + + stackCodeCenter = ` + First item + Second item + Third item + Fourth item +`; } diff --git a/tests/dummy/app/templates/stack.hbs b/tests/dummy/app/templates/stack.hbs index e261e10e..7dd66415 100644 --- a/tests/dummy/app/templates/stack.hbs +++ b/tests/dummy/app/templates/stack.hbs @@ -91,5 +91,98 @@ + + +

+ Configuration options on items +

+ +

+ You can also specify some options on the stack items. +

+
+ + +

+ Float items to the bottom +

+ +

+ Note that this will require the stack to be a specified height (e.g. + full height) to have an effect. +

+ + + + + + + {{! template-lint-disable no-inline-styles }} +
+ + + + + + + + + + + + + + +
+
+
+
+ + +

+ Float items to the center +

+ +

+ Note that this will require the stack to be a specified height (e.g. + full height) to have an effect. +

+ + + + + + + {{! template-lint-disable no-inline-styles }} +
+ + + + + + + + + + + + + + +
+
+
+
+ \ No newline at end of file