diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-11-16 06:45:03 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-12-02 04:10:17 +0300 |
commit | e2707ef0ca20b669aca7ac06274591bd795719a9 (patch) | |
tree | 4fca8f8a0fdd9c34e4b45ed20a240cd9b3b21463 /docs/guide/quickstart | |
parent | 432134d451eaceea4daa8b60686271d14a89c466 (diff) | |
download | webui-vue-e2707ef0ca20b669aca7ac06274591bd795719a9.tar.xz |
Add page components documentation
Components include: b-container, page-title, and page-section.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I5933767d44504dbfb87c2772d140de4d0607d4ab
Diffstat (limited to 'docs/guide/quickstart')
-rw-r--r-- | docs/guide/quickstart/page-anatomy.md | 18 |
1 files changed, 5 insertions, 13 deletions
diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md index c0419acd..ed17c04e 100644 --- a/docs/guide/quickstart/page-anatomy.md +++ b/docs/guide/quickstart/page-anatomy.md @@ -7,31 +7,23 @@ When creating a new page, each template consists of at least 3 components: - `<page-title>` - `<page-section>` -### Page container -Use the `fluid="xl"` prop on the `<b-container>` component to render a container that is always 100% width on larger screen sizes. Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally. +Learn more about the [page container, page title and page section](/guide/components/page) components. -[Learn more about BootstrapVue containers](https://bootstrap-vue.org/docs/components/layout#responsive-fluid-containers). - -### Page title component -By including the `<page-title>` component in the template, it will automatically render the page title that corresponds with the title property set in the route record's meta field. - -Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string. - -### Page section component -The `<page-section>` component will render semantic HTML. By adding a `:section-title` prop to the `<page-section>` component, the localized text string will be rendered in an `h2` header element. ```vue <template> <b-container fluid="xl"> - <page-title :description="$t('pageName.pageDescription')"/> + <page-title /> <page-section :section-title="$t('pageName.sectionTitle')"> // Page content goes here </page-section> </b-container> </template> ``` - ## Scripts block In the scripts section, be sure to import the `PageTitle` and `PageSection` components and declare them in the `components` property. + +Importing `BContainer` in the [scripts block](#scripts-block) is not required as it is already registered globally. + ```vue <script> import PageTitle from '@/components/Global/PageTitle'; |