maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Docs] fixing KibanaPageTemplate docs (#100104)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Michail Yasonik 2021-05-14 13:59:33 -04:00 committed by GitHub
parent 2f3e175417
commit 2ba09e446f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dev_docs/building_blocks.mdx
View file

@ -74,7 +74,7 @@ Check out the Map Embeddable if you wish to embed a map in your application.
All Kibana pages should use KibanaPageTemplate to setup their pages. It's 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.
Check out <DocLink id="kibDevDocsKBTTutorial" text="the KibanaPageTemplate tutorial" /> for more implementation guidance.
Check out <DocLink id="kibDevDocsKPTTutorial" text="the KibanaPageTemplate tutorial" /> for more implementation guidance.
**Github labels**: `EUI`

20
dev_docs/tutorials/kibana_page_template.mdx
View file

@ -1,13 +1,13 @@
---
id: kibDevDocsKBLTutorial
slug: /kibana-dev-docs/tutorials/kibana-page-layout
title: KibanaPageLayout component
id: kibDevDocsKPTTutorial
slug: /kibana-dev-docs/tutorials/kibana-page-template
title: KibanaPageTemplate component
summary: Learn how to create pages in Kibana
date: 2021-03-20
tags: ['kibana', 'dev', 'ui', 'tutorials']
---
`KibanaPageLayout` 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.
`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.
@ -18,7 +18,7 @@ Use the `isEmptyState` prop for when there is no page content to show. For examp
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
<KibanaPageLayout
<KibanaPageTemplate
isEmptyState={true}
pageHeader={{
iconType: 'dashboardApp',
@ -42,10 +42,10 @@ The default empty state uses any `pageHeader` info provided to populate an [`Eui
### Custom empty state
You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageLayout.
You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageTemplate.
```tsx
<KibanaPageLayout isEmptyState={true}>
<KibanaPageTemplate isEmptyState={true}>
<EuiEmptyPrompt
title={<h1>No data</h1>}
body="You have no data. Would you like some of ours?"
@ -55,7 +55,7 @@ You can also provide a custom empty prompt to replace the pre-built one. You'll
</EuiButton>,
]}
/>
</KibanaPageLayout>
</KibanaPageTemplate>
```
![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 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_custom_empty_state.png)
@ -65,7 +65,7 @@ You can also provide a custom empty prompt to replace the pre-built one. You'll
When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `<h2>`.
```tsx
<KibanaPageLayout
<KibanaPageTemplate
isEmptyState={true}
pageHeader={{
pageTitle: 'Dashboards',
@ -80,7 +80,7 @@ When passing both a `pageHeader` configuration and `isEmptyState`, the component
</EuiButton>,
]}
/>
</KibanaPageLayout>
</KibanaPageTemplate>
```
![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)