github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-28 11:05:39 -04:00
Code Issues Projects Releases Packages Wiki Activity

[KibanaPageLayout] Solution Nav specific styles & props (#100089)

Browse source 
* Fixing sticky nav
* Adding some side bar styles
* Added a built-in solution nav title with avatar icon
* Adding tutorial docs
* Added KibanaPageTemplateSolutionNavAvatar
* Added KibanaPageTemplateSolutionNav
* Increased limit to `core` / `kibanaReact` plugin because of additional CSS
This commit is contained in:
Caroline Horn 2021-05-25 13:28:05 -04:00 • committed by GitHub
parent 111e15a054
commit bca1c14f9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 755 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
dev_docs/tutorials/kibana_page_template.mdx
View file

@ -9,13 +9,13 @@ tags: ['kibana', 'dev', 'ui', 'tutorials']
`KibanaPageTemplate` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns.
Refer to EUI's documentation on [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.
Refer to EUI's documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/layout/page) for constructing page layouts.
## `isEmptyState`
Use the `isEmptyState` prop for when there is no page content to show. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met.
The default empty state uses any `pageHeader` info provided to populate an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type.
The default empty state uses any `pageHeader` info provided to populate an [**EuiEmptyPrompt**](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type.
```tsx
<KibanaPageTemplate
@ -84,3 +84,36 @@ When passing both a `pageHeader` configuration and `isEmptyState`, the component
```
![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png)
## `solutionNav`
To add left side navigation for your solution, we recommend passing [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav) props to the `solutionNav` prop. The template component will then handle the mobile views and add the solution nav embellishments. On top of the EUI props, you'll need to pass your solution `name` and an optional `icon`.
If you need to custom side bar content, you will need to pass you own navigation component to `pageSideBar`. We still recommend using [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav).
When using `EuiSideNav`, root level items should not be linked but provide section labelling only.
```tsx
<KibanaPageTemplate
solutionNav={{
name: 'Management',
icon: 'managementApp',
items: [
{
name: 'Root item',
items: [
{ name: 'Navigation item', href: '#' },
{ name: 'Navigation item', href: '#' },
]
}
]
}}
>
{...}
</KibanaPageTemplate>
```
![Screenshot of Stack Management empty state with a provided solution navigation shown on the left, outlined in pink.](../assets/kibana_template_solution_nav.png)
![Screenshots of Stack Management page in mobile view. Menu closed on the left, menu open on the right.](../assets/kibana_template_solution_nav_mobile.png)