Panel

Examples
Typescript ❤️

A React component rendering a collapsible panel

Install
yarn add @atlaskit/panel
npm
@atlaskit/panel
Source
Bitbucket
Bundle
unpkg.com
Changelog
Latest

0.11.4

Patch Changes

  • #120533 f1bec731e278f - Adds a sideEffects field to ensure this package does not have Compiled styles tree-shaken in the future to avoid an accidental regression.

    This is related to https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

This panel component is designed hold content and expand and collapse with user interaction. It animates its opening and closing.

Usage

import Panel, { PanelStateless } from '@atlaskit/panel';

There are two initial visibility options for the panel: expanded or collapsed. Panels are collapsed by default.

The default export is a component that you can set default state for.

Basic

Description

We also provide a stateless version of the component which allows you the ability to control whether the panel is expanded or collapsed programatically

Stateless

This is stateless panel example

Panels are not a fixed height and will expand to the height of the content inside.

Panel Default Props

children import

Content to be shown inside the panel.

react.ReactNode

header import

Header to render on the panel. Clicking the header expands and collapses the panel

react.ReactNode

isDefaultExpanded boolean

Defines whether the panel is expanded by default.

Panel Stateless Props

children import

Content to be shown inside the panel.

react.ReactNode

header import

Header to render on the panel. Clicking the header expands and collapses the panel

react.ReactNode

isExpanded boolean required

Defines whether the panel is expanded by default.

onChange function required

This callback is called when panel is expanded/collapsed

isExpanded => undefined