CoreDropdown

Usage

기본 사용법

import { useState, useRef } from 'react';
import { CoreDropdown, CoreButton } from '@featuring-corp/components';

const [open, setOpen] = useState(false);
const ref = useRef(null);

<>
  <CoreButton
    text="드롭다운 열기"
    ref={ref}
    onClick={() => setOpen(!open)}
  />
  <CoreDropdown
    open={open}
    handler={setOpen}
    placement="bottom-center"
    targetMargin="4px"
    targetRef={ref}
  >
    <div>드롭다운 내용</div>
  </CoreDropdown>
</>

다양한 Placement 옵션

import { useState, useRef } from 'react';
import { CoreDropdown, CoreButton } from '@featuring-corp/components';

const [open, setOpen] = useState(false);
const ref = useRef(null);

// Top
<CoreDropdown
  open={open}
  handler={setOpen}
  placement="top-start"
  targetRef={ref}
>
  <div>Top-Start</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="top-center"
  targetRef={ref}
>
  <div>Top-Center</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="top-end"
  targetRef={ref}
>
  <div>Top-End</div>
</CoreDropdown>

// Bottom
<CoreDropdown
  open={open}
  handler={setOpen}
  placement="bottom-start"
  targetRef={ref}
>
  <div>Bottom-Start</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="bottom-center"
  targetRef={ref}
>
  <div>Bottom-Center</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="bottom-end"
  targetRef={ref}
>
  <div>Bottom-End</div>
</CoreDropdown>

// Left
<CoreDropdown
  open={open}
  handler={setOpen}
  placement="left-start"
  targetRef={ref}
>
  <div>Left-Start</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="left-center"
  targetRef={ref}
>
  <div>Left-Center</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="left-end"
  targetRef={ref}
>
  <div>Left-End</div>
</CoreDropdown>

// Right
<CoreDropdown
  open={open}
  handler={setOpen}
  placement="right-start"
  targetRef={ref}
>
  <div>Right-Start</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="right-center"
  targetRef={ref}
>
  <div>Right-Center</div>
</CoreDropdown>

<CoreDropdown
  open={open}
  handler={setOpen}
  placement="right-end"
  targetRef={ref}
>
  <div>Right-End</div>
</CoreDropdown>

크기와 스타일 설정

import { useState, useRef } from 'react';
import { CoreDropdown, CoreButton } from '@featuring-corp/components';

const [open, setOpen] = useState(false);
const ref = useRef(null);

<>
  <CoreButton
    text="드롭다운 열기"
    ref={ref}
    onClick={() => setOpen(!open)}
  />
  <CoreDropdown
    open={open}
    handler={setOpen}
    placement="bottom-center"
    targetRef={ref}
    width="200px"
    height="120px"
    padding="16px"
    targetMargin="8px"
  >
    <div>드롭다운 내용</div>
  </CoreDropdown>
</>

자동 위치 조정

import { useState, useRef } from 'react';
import { CoreDropdown, CoreButton } from '@featuring-corp/components';

const [open, setOpen] = useState(false);
const ref = useRef(null);

<>
  <CoreButton
    text="드롭다운 열기"
    ref={ref}
    onClick={() => setOpen(!open)}
  />
  <CoreDropdown
    open={open}
    handler={setOpen}
    placement="bottom-center"
    targetRef={ref}
    autoAdjust
  >
    <div>자동으로 위치가 조정됩니다</div>
  </CoreDropdown>
</>

Props

ComponentPropsWithoutRef<'div'> 타입을 확장한 컴포넌트입니다.

Prop

Type

Placement

Prop

Type

스타일

기본 스타일 속성

Dropdown:

position: fixed
elevation: elevation-8
border-radius: radius-100
background-color: white
z-index: 10
width: 100% (기본값)
height: auto (기본값)

Overlay Scrollbars:

padding: spacing-200 (8px) (기본값)
max-height: unset (기본값)
overscroll-behavior: none

Background:

width: 100vw
height: 100vh
position: fixed
top: 0
left: 0
z-index: 1

CSS 변수

런타임에 설정되는 CSS 변수:

변수명	설명	기본값
`dropdownWidthVar`	드롭다운 너비	`100%`
`dropdownHeightVar`	드롭다운 높이	`auto`
`dropdownMaxHeightVar`	드롭다운 최대 높이	`unset`
`dropdownTopVar`	top 위치	`unset`
`dropdownBottomVar`	bottom 위치	`unset`
`dropdownLeftVar`	left 위치	`unset`
`dropdownRightVar`	right 위치	`unset`
`dropdownPaddingVar`	내부 padding	`spacing-200` (8px)
`dropdownTranslate`	transform translate 값	`translate(0,0)`

On this page