crowd-badge

アタッチ先の別の要素の右上隅の上にあるアイコン。

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

次に、<crowd-badge> 要素を使用するテンプレートの例を示します。次のコードをコピーし、拡張子 .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="Choose 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 id="short-instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-badge icon="star" for="short-instructions"/>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

属性

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

を

バッジのアタッチ先である要素の ID を指定する文字列。

アイコン

バッジに表示するアイコンを指定する文字列。この文字列は、ロード済みであるオープンソースの iron-icons セットにあるアイコンの名前か、カスタムアイコンの URL のいずれかにする必要があります。

この属性は label 属性よりも優先されます。

次に、<crowd-badge> HTML 要素に iron-icon を追加するために使用できる構文の例を示します。icon-name は、このアイコンセットから使用するアイコンの名前に置き換えます。

<crowd-badge icon="icon-name" for="short-instructions"/>

label

バッジに表示するテキスト。テキストが大きすぎるとバッジ領域からあふれるため、3 文字以下にすることをお勧めします。icon 属性を設定することにより、テキストでなくアイコンを表示できます。

要素の階層

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

• 親要素: crowd-form

• 子要素: なし

その他の参照資料

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

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

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