subin1224 / Simple-brain-training

[React] 간단한 뇌훈련테스트 입니다
0 stars 0 forks source link

[#31] Input Component variant 타입 추가 #32

Closed subin1224 closed 1 year ago

subin1224 commented 1 year ago
const TYPE_VARIANTS = {
  standard: {
    border: 'none',
    outline: 'none',
  },
  filled: {
    backgroundColor: '#e9e9e9',
    border: 'none',
    borderRadius: '8px',
    transition: 'background .2s ease, color .1s ease, box-shadow .2s ease',
    boxShadow: 'none',
  },
  outlined: {
    padding: '10px',
    outline: 'none',
    border: 'none',
    borderRadius: '8px',
    transition: `background .2s ease,color .1s ease, box-shadow .2s ease`,
    boxShadow: `inset 0 0 0 4px #e9e9e9`,
  },
};

해당 스타일을 추가 하였습니다.

standard

image

default 값 입니다. 밑줄 없는 기본 input > textfield 으로 지정해두었습니다.

filled

image

배경화면이 채워져있는 스타일 입니다.

outlined

image

테두리가 있는 스타일 입니다.