crowd-fab

Bouton flottant avec une image en son centre.

Consultez un exemple interactif d'un modèle HTML qui utilise cet élément HTML Crowd dans CodePen.

Voici un exemple de modèle Liquid conçu pour la classification d'image qui utilise l'élément <crowd-fab>. Ce modèle utilise JavaScript pour permettre aux exécutants de signaler des problèmes avec l'UI de travail. Copiez le code suivant et enregistrez-le dans un fichier avec l'extension .html. Ouvrez le fichier dans n'importe quel navigateur pour prévisualiser et interagir avec ce modèle.

<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>

Attributes

Les attributs suivants sont pris en charge par cet élément.

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton flottant comme étant désactivé et empêche les clics.

icon

Chaîne qui spécifie l'icône à afficher au centre du bouton. La chaîne doit être le nom d'une icône de l'ensemble open source iron-icons, qui est préchargé, ou l'URL d'une icône personnalisée.

Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône de fer à un élément HTML <crowd-fab>. Remplacez icon-name par le nom de l'icône que vous souhaitez utiliser dans ce jeu d'icônes.

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

label

Chaîne composée d'un seul caractère, qui peut être utilisée à la place d'une icône. Les emojis ou les caractères multiples peuvent entraîner l'affichage d'une ellipse à la place.

title

Chaîne qui s'affiche sous la forme d'une info-bulle lorsque la souris passe sur le bouton.

Hiérarchie des éléments

Les éléments parents et enfants de cet élément sont les suivants :

• Éléments parents: crowd-form

• Éléments enfants : aucun

Voir aussi

Pour plus d’informations, consultez les rubriques suivantes.

• Utilisation d'Amazon SageMaker Ground Truth pour étiqueter les données

• Référence des éléments HTML crowd