summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--docs/.vuepress/config.js9
-rw-r--r--docs/guide/components/alerts/alert.png (renamed from docs/.vuepress/public/alert.png)bin45130 -> 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 (renamed from docs/.vuepress/public/tooltip.png)bin4234 -> 4234 bytes
-rw-r--r--docs/guide/components/page-section/index.md10
-rw-r--r--docs/guide/components/page-title/index.md23
-rw-r--r--docs/guide/components/page.md67
-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 (renamed from docs/.vuepress/public/toast.png)bin100290 -> 100290 bytes
-rw-r--r--docs/guide/quickstart/page-anatomy.md2
11 files changed, 42 insertions, 75 deletions
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e86a9d25..45e5088a 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -47,13 +47,14 @@ module.exports = {
title: "Components",
children: [
"/guide/components/",
- "/guide/components/alert",
+ "/guide/components/alerts/",
"/guide/components/buttons/",
- "/guide/components/page",
+ "/guide/components/info-tooltip/",
+ "/guide/components/page-section/",
+ "/guide/components/page-title/",
"/guide/components/status-icon/",
"/guide/components/table/",
- "/guide/components/toast",
- "/guide/components/tooltip"
+ "/guide/components/toasts/"
]
},
{
diff --git a/docs/.vuepress/public/alert.png b/docs/guide/components/alerts/alert.png
index 7a368f7f..7a368f7f 100644
--- a/docs/.vuepress/public/alert.png
+++ b/docs/guide/components/alerts/alert.png
Binary files differ
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)
-![Alert examples](/alert.png)
+![Alert examples](./alert.png)
```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
/>
```
-![Tooltip example](/tooltip.png)
+![Tooltip example](./info-tooltip.png)
diff --git a/docs/.vuepress/public/tooltip.png b/docs/guide/components/info-tooltip/info-tooltip.png
index 7af1b7ae..7af1b7ae 100644
--- a/docs/.vuepress/public/tooltip.png
+++ b/docs/guide/components/info-tooltip/info-tooltip.png
Binary files differ
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/.vuepress/public/toast.png b/docs/guide/components/toasts/toast.png
index 97f9bc4c..97f9bc4c 100644
--- a/docs/.vuepress/public/toast.png
+++ b/docs/guide/components/toasts/toast.png
Binary files differ
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>