Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
crowd-icon-button
Bouton flottant avec une image placée en son centre. Lorsque l'utilisateur touche le bouton, un effet d'ondulation émane du centre du bouton.
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-icon-button>
. 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-icon-button 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>
Attributs
Les attributs suivants sont pris en charge par cet élément.
disabled
Commutateur booléen qui, s'il est présent, affiche le bouton 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
Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône de fer à un élément HTML <crowd-icon-button>
. Remplacez
par le nom de l'icône que vous souhaitez utiliser dans ce jeu d'icônesicon-name
<crowd-icon-button id="button1" icon="
icon-name
" title="Issue"/>
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.