React 컴포넌트가 Merge를 사용하여 UXPin에 통합 연결되면 모든 속성이 코드의 이름으로 순서화됩니다. 이 때문에 컴포넌트의 속성 패널을 읽을 수 없으므로 디자이너에게 중복 속성이 많이 표시될 수 있습니다.

속성 제외하기

특정 속성을 속성 패널에서 제외하여 컨트롤 모드(속성 패널의 UI표시 모드)에서 표시되지 않도록 할 수 있습니다. 제외하려는 속성 앞에 @uxpinignoreprop 코멘트을 이용하면 됩니다.

BarChart.propTypes = {
  width: PropTypes.number,
  height: PropTypes.number,
  */** @uxpinignoreprop */*
  onSeriesMouseOver: PropTypes.func,
}

이 코멘트 속성 덕분에 onSeriesMouseOver가 컨트롤모드(속성 패널의 UI표시 모드)와 코드 모드(속성패널의 코드표시 모드)에서 둘다에서 속성 패널에 더 이상 표시되지 않습니다.

대체 이름

속성에는 매우 전문적인 이름이 있을 수 있지만 속성 패널의 컨트롤 모드에서 표시되는 대체 이름을 설정할 수 있습니다. 이를 설정하려면 변경하려는 속성 앞에 @uxpinpropname 코멘트를 사용하십시오.

Button.propTypes = {
/**
   * Icon that goes after the children
   * @uxpinpropname  right icon
   * */
  iconEnd: PropTypes.element,
/**
   * Icon that goes before the children
   * @uxpinpropname left icon
   * */
  iconStart?: PropTypes.element,
}

원래 이름은 속성 패널의 코드 모드에서도 표시됩니다.

대체 설명문

컴포넌트 설명을 바꾸어서 사용하기 쉽도록 할 수도 있습니다. 이를 변경하려면 속성 패널의 컨트롤 모드에서 속성 유형을 선언하기 전에 @uxpindescription이라는 코멘트를 삽입하고 속성에 대체 설명을 설정하십시오.

BarChart.propTypes = {
/**
   * Width of the Chart in px. Accepts only numbers.
   * @uxpindescription width of the chart
   * */
  width: PropTypes.number,
/**
   * Height of the Chart in px. Accepts only numbers.
   * @uxpindescription height of the chart
   * */
  height: PropTypes.number,
}

원래의 설명은 속성 패널의 코드 모드에서는 표시됩니다.

컨트롤 유형

UXPin은 컴포넌트의 속성을 다루는 컨트롤을 제공합니다. 이러한 컨트롤은 속성 패널에 표시됩니다.

• codeeditor - 코드 편집기를 표시합니다.