Panel

Toggle content visibility using Panel.

install	yarn add @clayui/panel
version
use	`import Panel from '@clayui/panel';`

The Panel is a replacement for the old ClayCollapse in version 2.x, has the same effect but written in React using composition, try it. We recommend that you review the use cases in the Storybook.

Basic Usage

Open Sandbox

import {Provider} from '@clayui/core';
import Panel from '@clayui/panel';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Panel
					collapsable
					displayTitle="Title"
					displayType="secondary"
					showCollapseIcon={true}
				>
					<Panel.Body>{'Body!'}</Panel.Body>
				</Panel>
			</div>
		</Provider>
	);
}

Usage with a custom Title

ClayPanel.Title allows you to add custom content to the title of the panel as seen in this example using ClayLabels.

Open Sandbox

import {Provider} from '@clayui/core';
import Panel from '@clayui/panel';
import Label from '@clayui/label';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Panel
					collapsable
					displayTitle={
						<Panel.Title>
							<h3>{'Title'}</h3>
							<span>{'If field '}</span>
							<Label displayType="success">{'Country'}</Label>
							<Label>{'Is Equal To'}</Label>
							<span>{'value '}</span>
							<Label displayType="info">{'Brazil'}</Label>
							<span>{'enable '}</span>
							<Label displayType="success">{'State'}</Label>
						</Panel.Title>
					}
					displayType="secondary"
					showCollapseIcon={true}
				>
					<Panel.Body>{'Body!'}</Panel.Body>
				</Panel>
			</div>
		</Provider>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Basic Usage
Usage with a custom Title