crowd-button

何らかのアクションを表す、型を持つボタン。

この Crowd HTML 要素を使用する HTML テンプレートのインタラクティブな例については、「」を参照してくださいCodePen。

次に、<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>

属性

次の属性が、この要素でサポートされています。

無効

ブールスイッチ。存在する場合、ボタンを無効なものと表示してクリックを防止します。

form-action

"submit" に設定されている場合は親 crowd-form 要素を送信し、"reset" に設定されている場合は親 <crowd-form> 要素をリセットするスイッチ。

href

オンラインリソースの URL。ボタン型のリンクが必要な場合は、このプロパティを使用します。

アイコン

ボタンのテキストの横に表示するアイコンを指定する文字列。文字列はオープンソースの iron-icons セットのアイコンの名前であることが必要です。これは事前にロードされています。例えば、検索 iron-icon を挿入するには、以下を使用します。

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

アイコンは、icon-align 属性で指定されたようにテキストの左または右に配置されます。

カスタムアイコンを使用するには、icon-url を参照してください。

icon-align

ボタンのテキストを基準とする、アイコンの左または右の位置。デフォルトは "left" です。

icon-url

アイコン用のカスタムイメージの URL。カスタムイメージは、icon 属性で指定されている標準アイコンの代わりに使用できます。

ロード中

ブールスイッチ。存在する場合、ボタンをロード中の状態として表示します。この属性と disabled 属性がどちらも指定されている場合、この属性が優先されます。

target

href 属性を使用して、ボタンが特定の URL のハイパーリンクとして動作するように指定する場合、オプションで target 属性はリンク先 URL がロードするフレームまたはウィンドウをターゲットにします。

variant

ボタンの一般的なスタイル。1 次ボタンには "primary"、2 次ボタンには "normal"、3 次ボタンには "link" を使用し、テキストなしでアイコンのみを表示するには "icon" を使用します。

要素の階層

この要素には、以下の親および子要素があります。

• 親要素: crowd-form

• 子要素: なし

その他の参照資料

詳細については、以下を参照してください。

• Amazon SageMaker Ground Truth を使用してデータにラベルを付ける

• Crowd HTML 要素のリファレンス