diff options
Diffstat (limited to 'docs/guide')
-rw-r--r-- | docs/guide/components/page-section.md | 1 | ||||
-rw-r--r-- | docs/guide/components/page-title.md | 1 | ||||
-rw-r--r-- | docs/guide/components/page.md | 67 | ||||
-rw-r--r-- | docs/guide/quickstart/page-anatomy.md | 18 |
4 files changed, 72 insertions, 15 deletions
diff --git a/docs/guide/components/page-section.md b/docs/guide/components/page-section.md deleted file mode 100644 index 9c8f1b2d..00000000 --- a/docs/guide/components/page-section.md +++ /dev/null @@ -1 +0,0 @@ -# Page Section
\ No newline at end of file diff --git a/docs/guide/components/page-title.md b/docs/guide/components/page-title.md deleted file mode 100644 index ebc2fc57..00000000 --- a/docs/guide/components/page-title.md +++ /dev/null @@ -1 +0,0 @@ -# Page Title
\ No newline at end of file diff --git a/docs/guide/components/page.md b/docs/guide/components/page.md new file mode 100644 index 00000000..83106e37 --- /dev/null +++ b/docs/guide/components/page.md @@ -0,0 +1,67 @@ +# Page + +The essential building blocks of each page, or single-file component, consist of: +- `<b-container>` +- `<page-title>` +- `<page-section>` + +```vue +<template> + <b-container fluid="xl"> + <page-title /> + <page-section :section-title="$t('pageName.sectionTitle')"> + // Page content goes here + </page-section> + </b-container> +</template> +``` + +## 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. [Learn more about BootstrapVue containers](https://bootstrap-vue.org/docs/components/layout#responsive-fluid-containers). + +```vue +<template> + <b-container fluid="xl"> + </b-container> +</template> +``` + + +Within the page container, include the [page title](#/page-title) and [page section](#page-section) components. + +## Page title +The `<page-title>` component will automatically render the page title that corresponds with the title property set in the route record's meta field in `src/router/routes.js`. + +```js +// src/router/routes.js + { + path: '', + name: 'login', + component: Login, + meta: { + title: i18n.t('appPageTitle.login'), + }, + }, +``` + +Optional page descriptions can be included by using the description prop `:description` prop and passing in the i18n localized text string. Translations are found in the `src/locales` folder. + +``` vue +// Example: `src/views/AccessControl/Ldap/Ldap.vue` + <page-title :description="$t('pageLdap.pageDescription')" /> +``` + +[View the page title component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageTitle.vue). + +## Page section + +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 +// Example: `src/views/AccessControl/Ldap/Ldap.vue` + <page-section :section-title="$t('pageLdap.settings')"> +``` + +[View the page section component source code](https://github.com/openbmc/webui-vue/blob/master/src/components/Global/PageSection.vue). + + [Visit the quick start guide](/guide/quickstart/page-anatomy) to learn how to build a single-file component using this page anatomy.
\ No newline at end of file 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'; |