Story 컨트롤

Storybook Controls는 별도의 코딩 없이도 컴포넌트 인자, 인터랙션 할 수 있는 GUI를 제공합니다. 애드온 패널을 생성하여 실시간으로 편집 할 수 있습니다.

https://storybook.js.org/9d2e1f29cfb010e3aae6cd76547c4bab/addon-controls-optimized.mp4storybook.js.org

컨트롤 타입 설정

기본적으로 Storybook은 전달 인자(args) backgroundColor를 텍스트 입력 컨트롤로 렌더링합니다 .

Button.stories.js

const Basic = Template.bind({});

Basic.args = {
   backgroundColor: '#e00',
};

텍스트 컨트롤은 컬러 선택에 적합한 UI는 아닙니다. Storybook의 컬러 피커 컴포넌트로 대체할 필요가 있습니다.

argTypes 설정을 통해 사용 할 컨트롤을 지정할 수 있습니다.

Button.stories.js

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    // 배경 색상을 선택할 수 있는 컬러 피커 컨트롤 설정
    backgroundColor: { control: 'color' },
  },
}

컨트롤 목록

다음은 사용할 수 있는 컨트롤의 전체 목록 표입니다.

데이터	컨트롤	설명	옵션
array	array	배열을 텍스트 필드에 콤마(,)로 구분 된 문자열로 직렬화	separator
boolean	boolean	체크 박스 인풋	-
number	number	숫자 텍스트 필드 인풋	min, max, step
	range	레인지 슬라이더(range slider) 인풋	min, max, step
object	object	json 에디터 텍스트 인풋	-
enum	radio	라디오(radio) 버튼	options
	inline-radio	인라인 라디오(inline radio) 버튼	options
	check	멀티 셀렉트 체크박스(multi-select checkbox)	options
	inline-check	인라인 멀티 셀렉트 체크박스	options
	select	셀렉트 드롭다운(dropdown)	options
	multi-select	멀티 셀렉트 드롭다운	options
string	text	텍스트 입력 인풋	-
	color	컬러 피커 (문자열이 색상 값이라고 가정)	-
	date	날짜 피커	-

예를 들어 Story에서 열거 형 데이터를 사용하도록 컨트롤 지정하려면 inline-radio를 설정합니다.

컴포넌트 Story 포멧 (CSF)

export default {
  // ...
  argTypes: {
    // 컨트롤 할 속성
    loadingState: {
      control: {
        type: 'inline-radio',
        options: ['idle', 'pending', 'resolved', 'rejected'],
      },
    },
  },
}

레인지 슬라이더를 사용하도록 컨트롤 지정하려면 range를 설정합니다.

export default {
  // ...
  argTypes: {
    // 컨트롤 할 속성
    width: { 
      control: { 
        type: 'range', 
        min: 400, max: 1200, step: 50 
      },
    },
  },
}

셀렉트 드롭다운을 사용하도록 컨트롤 지정하려면 select를 설정합니다.

export default {
  // ...
  argTypes: {
    // 컨트롤 할 속성
    type: { 
      control: {
        type: 'select',
        options: ['color', 'mono', 'black'],
      }
    },
  },
}

속성 문서 표시

Controls는 Storybook Docs와 동일한 엔진에 구축되었으므로 확장 된 매개 변수를 사용하여 컨트롤과 함께 속성 문서를 함게 표시 할 수도 있습니다. 확장 모드를 글로벌 활성화하려면 다음과 같이 설정합니다.

.storybook/preview.js

export const parameters = {
  controls: { expanded: true },
};

No Controls 경고

Story 내에서 controls를 사용하지 않을 경우 경고 메시지가 표시되지 않도록 설정할 수 있습니다.

Plain Text

export const Large = Template.bind({});

Large.parameters = {
  controls: { hideNoControlsWarning: true },
};