mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
921c942bef
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
86 lines
3.7 KiB
Text
86 lines
3.7 KiB
Text
---
|
|
id: kibDevDocsKBLTutorial
|
|
slug: /kibana-dev-docs/tutorials/kibana-page-layout
|
|
title: KibanaPageLayout 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.
|
|
|
|
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.
|
|
|
|
```tsx
|
|
<KibanaPageLayout
|
|
isEmptyState={true}
|
|
pageHeader={{
|
|
iconType: 'dashboardApp',
|
|
pageTitle: 'Dashboards',
|
|
description: "You don't have any dashboards yet.",
|
|
rightSideItems: [
|
|
<EuiButton fill iconType="plusInCircleFilled">
|
|
Create new dashboard
|
|
</EuiButton>,
|
|
],
|
|
}}
|
|
/>
|
|
```
|
|
|
|
|
|
|
|
<DocCallOut color="warning" title="Missing page header content can lead to an anemic empty state">
|
|
Because all properties of the page header are optional, the empty state has the potential to
|
|
render blank. Make sure your empty state doesn't leave the user confused.
|
|
</DocCallOut>
|
|
|
|
### 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.
|
|
|
|
```tsx
|
|
<KibanaPageLayout isEmptyState={true}>
|
|
<EuiEmptyPrompt
|
|
title={<h1>No data</h1>}
|
|
body="You have no data. Would you like some of ours?"
|
|
actions={[
|
|
<EuiButton fill iconType="plusInCircleFilled">
|
|
Get sample data
|
|
</EuiButton>,
|
|
]}
|
|
/>
|
|
</KibanaPageLayout>
|
|
```
|
|
|
|
|
|
|
|
### Empty states with a page header
|
|
|
|
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
|
|
isEmptyState={true}
|
|
pageHeader={{
|
|
pageTitle: 'Dashboards',
|
|
}}
|
|
>
|
|
<EuiEmptyPrompt
|
|
title={<h2>No data</h2>}
|
|
body="You have no data. Would you like some of ours?"
|
|
actions={[
|
|
<EuiButton fill iconType="plusInCircleFilled">
|
|
Get sample data
|
|
</EuiButton>,
|
|
]}
|
|
/>
|
|
</KibanaPageLayout>
|
|
```
|
|
|
|
|