Right side panel
A cross-product right-side-panel component
yarn add @atlaskit/right-side-panel2.0.1
Patch Changes
-
#120533
f1bec731e278f- Adds asideEffectsfield 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.
Usage
import React from 'react';
import Button, { ButtonGroup } from '@atlaskit/button';
import Page from '@atlaskit/page';
import { ButtonsWrapper, TextWrapper } from './utils/styled';
import { RightSidePanel, FlexContainer, ContentWrapper } from '../src';
export default class extends React.Component {
state = {
isOpen: false,
};
openDrawer = () => {
this.setState({
isOpen: true,
});
};
closeDrawer = () =>
this.setState({
isOpen: false,
});
render() {
const { isOpen } = this.state;
return (
<FlexContainer id="RightSidePanelExample">
<ContentWrapper>
<Page>
<ButtonsWrapper>
<ButtonGroup>
<Button type="button" onClick={this.openDrawer}>
Open drawer
</Button>
<Button type="button" onClick={this.closeDrawer}>
Close drawer
</Button>
</ButtonGroup>
</ButtonsWrapper>
</Page>
<RightSidePanel isOpen={isOpen} attachPanelTo="RightSidePanelExample">
<TextWrapper>
<h1>Right Side Panel content</h1>
</TextWrapper>
</RightSidePanel>
</ContentWrapper>
</FlexContainer>
);
}
}Props
isOpen boolean required
Open/Closed state
attachPanelTo string required
ID for the HTML tag where we want to attach the RightSidePanel
children import
Right Hand Side panel content
react.ReactNodeskipAnimationOnMount boolean
Don't animate the component when the component is mounted (false by default)
mountOnEnter boolean
Mount component on enter (true by default)
unmountOnExit boolean
Unmount component on exit (true by default)
disableEnterAnimation boolean
Disable enter animation (false by default)
disableExitAnimation boolean
Disable exit animation (false by default)
onOpenAnimationFinished function
Function to be executed when the open animation finishes
() => undefinedonCloseAnimationFinished function
Function to be executed when the close animation finishes
() => undefined