fix(layout): two-cols-header grid with bottom (#1189)

slidevjs · Nov 10, 2023 · 72326d8 · 72326d8
1 parent 20f666d
commit 72326d8
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/packages/client/layouts/two-cols-header.vue b/packages/client/layouts/two-cols-header.vue
@@ -11,6 +11,8 @@ This shows on the left
 ::right::
 # Right
 This shows on the right
+::bottom::
+This shows at the bottom, aligned to the end (bottom) of the grid
 ```
 -->
 
@@ -36,6 +38,9 @@ const props = defineProps({
  <div class="col-right" :class="props.class">
  <slot name="right" />
  </div>
+ <div class="col-bottom" :class="props.class">
+ <slot name="bottom" />
+ </div>
  </div>
 </template>
 
@@ -49,4 +54,8 @@ const props = defineProps({
 .col-header { grid-area: 1 / 1 / 2 / 3; }
 .col-left { grid-area: 2 / 1 / 3 / 2; }
 .col-right { grid-area: 2 / 2 / 3 / 3; }
+.col-bottom {
+ align-self: end;
+ grid-area: 3 / 1 / 3 / 3;
+}
 </style>