crowd-button - 아마존 SageMaker
Attributes요소 계층 구조참고 항목

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

crowd-button

몇 가지 작업을 나타내는 스타일이 지정된 버튼

CodePen에서 이 군중 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하세요.

다음은 <crowd-button> 요소를 사용하는 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Please select the correct category for this image"
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-button>
        <iron-icon icon="question-answer"/>
      </crowd-button>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

Attributes

이 요소는 다음 속성을 지원합니다.

disabled

(있는 경우) 버튼을 비활성화된 상태로 표시해 클릭하지 못하도록 방지하는 부울 스위치

form-action

"submit"으로 설정된 경우 상위 crowd-form 요소를 제출하고 "reset"으로 설정된 경우에는 상위 <crowd-form> 요소를 재설정하는 스위치

href

온라인 리소스의 URL. 버튼으로 스타일이 지정된 링크가 필요한 경우 이 속성을 사용합니다.

icon

버튼 텍스트 옆에 표시되는 아이콘을 지정하는 문자열. 문자열은 사전 로드된 오픈 소스 iron-icons 세트에서 나온 아이콘의 이름이어야 합니다. 예를 들어 검색 iron-icon을 삽입하려면 다음을 사용합니다.

<crowd-button>
    <iron-icon icon="search"/>
</crowd-button>

이 아이콘은 icon-align 속성으로 지정된 대로 텍스트의 왼쪽 또는 오른쪽에 배치됩니다.

사용자 정의 아이콘을 사용하려면 icon-url을 참조하십시오.

icon-align

버튼 텍스트를 기준으로 한 아이콘의 왼쪽 또는 오른쪽 위치. 기본값은 "left"입니다.

icon-url

아이콘에 대한 사용자 지정 이미지의 URL. 사용자 지정 이미지는 icon 속성으로 지정되는 표준 아이콘 위치에 사용할 수 있습니다.

로드 중

(있는 경우) 버튼을 로드 중인 상태로 표시하는 부울 스위치. disabled과 함께 있는 경우 이 속성이 disabled 속성보다 우선합니다.

대상

href 속성을 사용하여 버튼이 특정 URL에 대한 하이퍼링크로 작동하도록 설정한 경우 target 속성은 연결된 URL을 로드해야 하는 프레임 또는 창을 선택적으로 대상으로 지정합니다.

variant

일반적인 버튼 스타일. 기본 버튼에는 "primary", 보조 버튼에는 "normal", 제3의 버튼에는 "link" 또는 텍스트 없이 아이콘만 표시하려는 경우에는 "icon"을 사용합니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고 항목

자세한 내용은 다음을 참조하세요.