Podo UI

Podo UI

선택

드롭다운 형태로 옵션을 선택할 수 있는 컴포넌트입니다.

Import

@use 'podo-ui/scss/atom/select';

기본 사용법

select는 여러 옵션 중 하나를 선택할 수 있는 드롭다운 요소입니다.

HTML
<select>
  <option value="" disabled selected>옵션을 선택하세요</option>
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>
실제 예제:

아이콘

select에 아이콘을 추가할 수 있습니다.

HTML
<div class="with-icon">
  <i class="icon-user"></i>
  <select>
    <option value="" disabled selected>사용자 역할 선택</option>
    <option value="admin">관리자</option>
    <option value="user">사용자</option>
  </select>
</div>
실제 예제:

SCSS 스타일

SCSS
@use 'podo-ui/mixin' as *;

select {
  padding: s(3) s(7) s(3) s(5);
  border: 1px solid color(border);
  border-radius: r(3);
  background: color(bg-block);
  appearance: none;
  cursor: pointer;

  &:focus-visible:not(:disabled) {
    outline: 4px solid color(primary-outline);
  }

  &:disabled {
    background-color: color(bg-disabled);
    cursor: not-allowed;
  }
}

.with-icon {
  position: relative;

  > i {
    position: absolute;
    left: s(3);
    top: 50%;
    transform: translateY(-50%);
  }

  > select {
    padding-left: s(8);
  }
}