full-screen-demos.md

Full screen demos

EUI's documentation sections provide an easy way to create full screen demos that are simply blank pages (no headers or other chrome).

When should you use one?

Full screen demos are most useful for page-level components, such as EuiCollapsibleNav or EuiPageTemplate.

Smaller, atom-like components typically do not require a full-screen demo.

How to

To create a basic full screen demo with a built-in button add the following as your section.

{
  title: '',
  fullScreen: {
    slug: 'url-you-want',
    demo: <FullScreenDemo />,
  }
}

If you want something other than a button to display in the default demo render, you can still provide a demo key.

{
  title: '',
  demo: <Demo />,
  fullScreen: {
    slug: 'url-you-want',
    demo: <FullScreenDemo />,
  }
}

In your full screen demo component, you'll want to provide an easy exit back to the original page. You can do this by adding a button wrapped with ExampleContext.consumer which passes the parentPath through.

import { ExampleContext } from '../../services';

<ExampleContext.Consumer>
  {({ parentPath }) => (
    <EuiButton fill href={`#${parentPath}`} iconType="exit">
      Exit full screen
    </EuiButton>
  )}
</ExampleContext.Consumer>