Layout

Browser preview

A browser preview shows the result of configuration changes in a simplified representation of a browser interface.
Preview
Custom title! Custom...

Hello World

Here's the description

1
import {BrowserPreview} from '@coveord/plasma-react';
2
3
export default () => (
4
<BrowserPreview title={'Custom title! Custom title!'}>
5
<h4>Hello World</h4>
6
<p>Here's the description</p>
7
</BrowserPreview>
8
);

Props

NameTypeDefaultDescription
childrenReactNode
headerDescriptionstringThe final look in your search page may differ due to the customization you made in your page.
Text that will be displayed in the tooltip on the i icon
titlestring
Title of the browser preview

Examples

Empty state
Preview

Select a Query Pipelineto see the preview

1
import {BrowserPreview, BrowserPreviewEmpty} from '@coveord/plasma-react';
2
3
export default () => (
4
<BrowserPreview>
5
<BrowserPreviewEmpty onClick={() => alert('Clicked!')}>
6
<span>
7
Select a <span className="bolder">Query Pipeline</span>
8
</span>
9
<span>to see the preview</span>
10
</BrowserPreviewEmpty>
11
</BrowserPreview>
12
);

No guidelines exist for BrowserPreview yet.

Create guidelines