8x8 Oxygen - SlideOut

Instalation

$ yarn add @8x8/oxygen-slide-out

$ npm install @8x8/oxygen-slide-out

Usage

import SlideOut, { Styled } from '@8x8/oxygen-slide-out';

<SlideOut
  isVisible={false}
  isResizable={true}
  hasAnimation={true}
  defaultWidth={defaultWidth}
  minWidth={minWidth}
  maxWidth={maxWidth}
  onResize={onResize}
>
  Content
</SlideOut>

Available styled components

• SlideOut
• Splitter
• Content

Props

SlideOut

interface SlideOutProps

| Name | Type | Default | Description | | :-------------- | :------------------------ | :------------ | :---------------------------------------------------------------------------------- | | children | React.ReactNode | | Content | | theme? | Partial<SlideOutTheme> | undefined | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | testId? | string | 'SLIDE_OUT' | Test ID DOM attribute value | | className? | string | undefined | Adds css class to the Container | | isVisible? | boolean | false | Tell when the SlideOut is open | | isResizable? | boolean | true | Tell when the SlideOut is resizable | | hasAnimation? | boolean | true | Tell when the SlideOut uses animation on opening and closing | | defaultWidth? | number | 400 | The default width of the SlideOut in pixels | | minWidth? | number | undefined | Minimum width of the SlideOut | | maxWidth? | number | undefined | Maximum width of the SlideOut | | onResize? | (width: number) => void | () => {} | Callback executed when the SlideOut is being resized |