SOROUSH.DESIGN
Design SystemMarkdownStyled System

Slide

Slides one child in from an edge of the window and back out.

Source

Slides one child in from an edge of the window and back out. The child holds a ref and takes a style - a ref-holding component, or a DOM element - and the transition draws its position on it. Out, the child is hidden, so it takes no click or focus. A user who asked for less motion (prefers-reduced-motion: reduce) sees it change at once, and the callbacks still fire.

import { Slide } from '@soroush.tech/design-system/Slide'

;<Slide isShown={isOpen}>
  <Paper p={3}>Content</Paper>
</Slide>

Examples

Default

const args: Partial<SlideProps> = { isShown: true }

<Slide {...args}>{surface}</Slide>

Toggled

const args: Partial<SlideProps> = { isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Slide {...args} isShown={isShown}>
      {surface}
    </Slide>
  )}
</TransitionToggle>

Unmounted

const args: Partial<SlideProps> = { isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Slide {...args} isShown={isShown} shouldMountOnEnter shouldUnmountOnExit>
      {surface}
    </Slide>
  )}
</TransitionToggle>

Directions

const args: Partial<SlideProps> = { isShown: true }

<Flex gap={2}>
  {slideDirectionTokens.map((direction) => (
    <TransitionToggle key={direction}>
      {(isShown) => (
        <Slide {...args} direction={direction} isShown={isShown}>
          <Paper p={2}>{direction}</Paper>
        </Slide>
      )}
    </TransitionToggle>
  ))}
</Flex>