crowd-fab - アマゾン SageMaker

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

crowd-fab

中央にイメージを持つフローティングボタン。

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

<crowd-fab> 要素を使用するイメージ分類用に設計された Liquid テンプレートの例を次に示します。このテンプレートは、JavaScript を使用して、ワーカーがワーカー UI に関する問題をレポートできるようにします。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <crowd-form> <crowd-image-classifier src="${image_url}" categories="['Cat', 'Dog', 'Bird', 'None of the Above']" header="Choose the correct category for the image" name="category"> <short-instructions> <p>Read the task carefully and inspect the image.</p> <p>Choose the appropriate label that best suits the image.</p> <p>If there is an issue with the image or tools, please select <b>None of the Above</b>, describe the issue in the text box and click the button below.</p> <crowd-input label="Report an Issue" name="template-issues"></crowd-input> <crowd-fab id="button1" icon="report-problem" title="Issue"/> </short-instructions> <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. Use the <b>None of the Above</b> option if none of the other labels suit the image.</p> </full-instructions> </crowd-image-classifier> </crowd-form> <script> [ button1, ].forEach(function(button) { button.addEventListener('click', function() { document.querySelector('crowd-form').submit(); }); }); </script>

属性

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

無効

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

アイコン

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

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

<crowd-fab "id="button1" icon="icon-name" title="Issue"/>

label

アイコンの代わりに使用できる 1 文字で構成される文字列。絵文字または複数の文字を使用すると、代わりに省略記号がボタンに表示される場合があります。

title

ボタンの上にマウスカーソルを置いたときに、ツールヒントとして表示される文字列。

要素の階層

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

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

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