feat: add bottom area to two-cols-header layout (#1114)

slidevjs · Nov 8, 2023 · 500ce81 · 500ce81
1 parent 430b8d7
commit 500ce81
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/client/layouts/two-cols-header.vue b/packages/client/layouts/two-cols-header.vue
@@ -11,6 +11,9 @@ This shows on the left
 ::right::
 # Right
 This shows on the right
+::bottom::
+# Bottom
+This shows at bottom, below left and right
 ```
 -->
 
@@ -36,6 +39,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>
 
@@ -46,7 +52,8 @@ const props = defineProps({
  grid-template-rows: repeat(2, 1fr);
 }
 
-.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-header,
+.col-bottom { grid-column: -1/1; }
+.col-left,
+.col-right { grid-column: span 2; }
 </style>