crowd-tabs - Amazon SageMaker

crowd-tabs

Conteneur pour des informations à onglets.

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

Voici un exemple de modèle qui utilise l'élément <crowd-tabs>. 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-tabs> <crowd-tab header="Tab 1"> <h2>Image</h2> <img src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" style="max-width: 40%" > <h2>Text</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus. </p> </crowd-tab> <crowd-tab header="Tab 2"> <h2>Description</h2> <p> Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus. </p> </crowd-tab> <crowd-tab header="Tab 3"> <div style="width: 40%; display: inline-block"> <img src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" style="max-width: 80%" > <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input> <input type="checkbox" name="checkbox" value="foo">Foo <input type="checkbox" name="checkbox" value="bar">Bar <crowd-button>Some button</crowd-button> </div> <div style="width: 40%; display: inline-block; vertical-align: top"> Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. Pellentesque nulla ipsum ante quisque quam augue. Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. </div> </crowd-tab> </crowd-tabs> <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input> <short-instructions> <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p> </short-instructions> <full-instructions header="Classification Instructions"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p> Tempus egestas sed sed risus.</p> </full-instructions> </crowd-form>

Attributes

Cet élément n'a pas d'attributs.

Hiérarchie des éléments

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

Voir aussi

Pour plus d’informations, consultez les rubriques suivantes.