diff options
Diffstat (limited to 'docs/guide')
| -rw-r--r-- | docs/guide/components/alerts/alert.png | bin | 0 -> 45130 bytes | |||
| -rw-r--r-- | docs/guide/components/alerts/index.md (renamed from docs/guide/components/alert.md) | 2 | ||||
| -rw-r--r-- | docs/guide/components/info-tooltip/index.md (renamed from docs/guide/components/tooltip.md) | 2 | ||||
| -rw-r--r-- | docs/guide/components/info-tooltip/info-tooltip.png | bin | 0 -> 4234 bytes | |||
| -rw-r--r-- | docs/guide/components/page-section/index.md | 10 | ||||
| -rw-r--r-- | docs/guide/components/page-title/index.md | 23 | ||||
| -rw-r--r-- | docs/guide/components/page.md | 67 | ||||
| -rw-r--r-- | docs/guide/components/toasts/index.md (renamed from docs/guide/components/toast.md) | 2 | ||||
| -rw-r--r-- | docs/guide/components/toasts/toast.png | bin | 0 -> 100290 bytes | |||
| -rw-r--r-- | docs/guide/quickstart/page-anatomy.md | 2 |
10 files changed, 37 insertions, 71 deletions
diff --git a/docs/guide/components/alerts/alert.png b/docs/guide/components/alerts/alert.png Binary files differnew file mode 100644 index 00000000..7a368f7f --- /dev/null +++ b/docs/guide/components/alerts/alert.png diff --git a/docs/guide/components/alert.md b/docs/guide/components/alerts/index.md index 1892f3f8..9273f8e2 100644 --- a/docs/guide/components/alert.md +++ b/docs/guide/components/alerts/index.md @@ -3,7 +3,7 @@ An alert is an inline message that contains a short description that a user cann [Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert) - + ```vue <alert show variant="warning">This is a warning message</alert> diff --git a/docs/guide/components/tooltip.md b/docs/guide/components/info-tooltip/index.md index ebc1a16d..25425475 100644 --- a/docs/guide/components/tooltip.md +++ b/docs/guide/components/info-tooltip/index.md @@ -12,4 +12,4 @@ The `InfoTooltip` is a custom component that uses a Bootstrap-vue tooltip with a /> ``` - + diff --git a/docs/guide/components/info-tooltip/info-tooltip.png b/docs/guide/components/info-tooltip/info-tooltip.png Binary files differnew file mode 100644 index 00000000..7af1b7ae --- /dev/null +++ b/docs/guide/components/info-tooltip/info-tooltip.png diff --git a/docs/guide/components/page-section/index.md b/docs/guide/components/page-section/index.md new file mode 100644 index 00000000..ccf654e1 --- /dev/null +++ b/docs/guide/components/page-section/index.md @@ -0,0 +1,10 @@ +# 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).
\ No newline at end of file diff --git a/docs/guide/components/page-title/index.md b/docs/guide/components/page-title/index.md new file mode 100644 index 00000000..b51ab640 --- /dev/null +++ b/docs/guide/components/page-title/index.md @@ -0,0 +1,23 @@ +# 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). diff --git a/docs/guide/components/page.md b/docs/guide/components/page.md deleted file mode 100644 index 83106e37..00000000 --- a/docs/guide/components/page.md +++ /dev/null @@ -1,67 +0,0 @@ -# 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/components/toast.md b/docs/guide/components/toasts/index.md index fa8e56ee..271155a9 100644 --- a/docs/guide/components/toast.md +++ b/docs/guide/components/toasts/index.md @@ -3,7 +3,7 @@ Use a toast message to indicate the status of a user action. For example, a user There are different transitions for the toast messages. The `success` toast message will auto-hide after 10 seconds. The user must manually dismiss the `informational`, `warning`, and `error` toast messages. The `BVToastMixin` provides a simple API that generates a toast message that meets the transition guidelines. -<img :src="$withBase('/toast.png')" alt="Toast example" style="max-width:350px"> +<img src="./toast.png" alt="Toast message examples" style="max-width:350px"> ```js{5} // Sample method from Reboot BMC page diff --git a/docs/guide/components/toasts/toast.png b/docs/guide/components/toasts/toast.png Binary files differnew file mode 100644 index 00000000..97f9bc4c --- /dev/null +++ b/docs/guide/components/toasts/toast.png diff --git a/docs/guide/quickstart/page-anatomy.md b/docs/guide/quickstart/page-anatomy.md index ed17c04e..120bf70b 100644 --- a/docs/guide/quickstart/page-anatomy.md +++ b/docs/guide/quickstart/page-anatomy.md @@ -7,7 +7,7 @@ When creating a new page, each template consists of at least 3 components: - `<page-title>` - `<page-section>` -Learn more about the [page container, page title and page section](/guide/components/page) components. +Learn more about the [page title](/guide/components/page-title)and [page section](/guide/components/page-section) components. ```vue <template> |
