crowd-button - Amazon SageMaker
AttributesHiérarchie des élémentsVoir aussi

crowd-button

Bouton avec style qui représente une action.

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

Voici un exemple de modèle d'enquête qui utilise l'élément <crowd-button>. 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
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Please select 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>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-button>
        <iron-icon icon="question-answer"/>
      </crowd-button>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

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 comme étant désactivé et empêche les clics.

form-action

Commutateur qui envoie son élément parent crowd-form s'il est défini sur « submit », ou réinitialise son élément parent <crowd-form> s'il est défini sur « reset ».

href

URL d'une ressource en ligne. Utilisez cette propriété si vous avez besoin d'un lien avec style sous forme d'un bouton.

icon

Chaîne qui spécifie l'icône à afficher en regard du texte du bouton. La chaîne doit être le nom d'une icône de l'ensemble open source iron-icons, qui est préchargé. Par exemple, pour insérer l'iron-icon search, procédez comme suit :

<crowd-button>
    <iron-icon icon="search"/>
</crowd-button>

L'icône est positionnée à gauche ou à droite du texte, comme spécifié par l'attribut icon-align.

Pour utiliser une icône personnalisée, voir icon-url.

icon-align

Position de l'icône à gauche ou à droite du texte du bouton. La valeur par défaut est « left » (gauche).

icon-url

URL d'une image personnalisée pour l'icône. Une image personnalisée peut être utilisée à la place de l'icône standard qui est spécifiée par l'attribut icon.

loading

Commutateur booléen qui, s'il est présent, affiche le bouton comme étant dans un état de chargement. Cet attribut a la priorité sur l'attribut disabled si les deux attributs sont présents.

cible

Si vous utilisez l'attribut href pour que le bouton fasse office de lien hypertexte vers une URL spécifique, l'attribut target cible, si vous le souhaitez, un cadre ou une fenêtre où l'URL avec lien doit charger.

variant

Style général du bouton. Utilisez « primary » pour les boutons principaux, « normal » pour les boutons secondaires, « link » pour les boutons tertiaires ou « icon » pour afficher uniquement l'icône sans texte.

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.