-
Notifications
You must be signed in to change notification settings - Fork 337
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
198 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <script setup lang="ts"> | ||
| const showSidebar = ref(true) | ||
| </script> | ||
|
|
||
| <template> | ||
| <VaLayout | ||
| style="height: 300px" | ||
| :left="{ absolute: true}" | ||
| > | ||
| <template #top> | ||
| <VaNavbar color="primary" class="py-2"> | ||
| <template #left> | ||
| <VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" /> | ||
| </template> | ||
| <h4>LOGO</h4> | ||
| </VaNavbar> | ||
| </template> | ||
|
|
||
| <template #left> | ||
| <VaSidebar v-model="showSidebar"> | ||
| <VaSidebarItem> | ||
| <VaSidebarItemContent> | ||
| <VaIcon name="home" /> | ||
| <VaSidebarItemTitle> | ||
| Home | ||
| </VaSidebarItemTitle> | ||
| </VaSidebarItemContent> | ||
| </VaSidebarItem> | ||
| <VaSidebarItem> | ||
| <VaSidebarItemContent> | ||
| <VaIcon name="phone" /> | ||
| <VaSidebarItemTitle> | ||
| About | ||
| </VaSidebarItemTitle> | ||
| </VaSidebarItemContent> | ||
| </VaSidebarItem> | ||
| </VaSidebar> | ||
| </template> | ||
|
|
||
| <template #content> | ||
| <main class="p-4"> | ||
| <h3>Page content</h3> | ||
| <p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p> | ||
|
|
||
| <p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p> | ||
| <p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p> | ||
| </main> | ||
| </template> | ||
| </VaLayout> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,60 @@ | ||
| export default definePageConfig({ | ||
| blocks: [ | ||
| block.title('Layout.title'), | ||
| block.title('Layout'), | ||
| block.paragraph('Component is used for building App layout. It is based on CSS Grid and provides a simple API for building complex layouts.'), | ||
|
|
||
| block.example('Default'), | ||
| block.example('AllSlots'), | ||
| block.example('Order'), | ||
| block.example('Default', { | ||
| title: 'Default usage', | ||
| description: 'Default usage of Layout component.', | ||
| }), | ||
| block.example('AllSlots', { | ||
| title: 'All slots', | ||
| description: 'Layout component has 4 slots: top, right, bottom, left, content (or default). You can use them to place your content.', | ||
| }), | ||
| block.example('Order', { | ||
| title: 'Rendering order', | ||
| description: 'You can use order area attribute to change order of slots. By default, order is 0. If order of one area is higher than another, it will be rendered on top of it.', | ||
| }), | ||
| block.example('Absolute', { | ||
| title: 'Absolute', | ||
| description: 'You can use absolute area attribute to make area absolute. It will be rendered on top of other areas and overflow them. Absolute respect order prop.', | ||
| }), | ||
|
|
||
| block.subtitle('Accessibility'), | ||
| block.paragraph(` | ||
| Layout component is not handling accessibility by default. | ||
| You should always wrap content in slot with \`<div role="region" aria-label="...">\` to make it accessible. | ||
| Make sure you have \`main\` role on your main content in \`content\` slot, | ||
| \`aside\` in \`left\`, \`right\` slots, \`header\` in \`top\` slot and \`footer\` in \`bottom\` slot. | ||
| More about landmarks you can read [here](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)[[target=_blank]]. | ||
| Notice that if you're using components like VaSidebar, VaHeader the correct role will be added automatically. | ||
| `), | ||
|
|
||
| block.api('VaLayout', { | ||
| props: { | ||
| top: 'AreaConfig for top slot', | ||
| right: 'AreaConfig for right slot', | ||
| bottom: 'AreaConfig for bottom slot', | ||
| left: 'AreaConfig for left slot', | ||
| } | ||
| }, | ||
| { | ||
| props: { | ||
| top: { | ||
| types: `{ absolute?: boolean, order?: number }` | ||
| }, | ||
| bottom: { | ||
| types: `{ absolute?: boolean, order?: number }` | ||
| }, | ||
| left: { | ||
| types: `{ absolute?: boolean, order?: number }` | ||
| }, | ||
| right: { | ||
| types: `{ absolute?: boolean, order?: number }` | ||
| } | ||
| } | ||
| }) | ||
| ] | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters