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

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

要素の階層

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

• 親要素: crowd-form

• 子要素: なし

その他の参照資料

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

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

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