crowd-badge - アマゾン SageMaker

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

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 属性を設定することにより、テキストでなくアイコンを表示できます。

要素の階層

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

以下の資料も参照してください。

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