crowd-tab - アマゾン SageMaker

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

crowd-tab

下記の情報を示すタブのような形式のコンポーネント。

この Crowd HTML 要素を使用する HTML テンプレートのインタラクティブな例については、「CodePen」を参照してください。

次に、<crowd-tab> 要素を使用するテンプレートの例を示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。

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

属性

次の属性が、この要素でサポートされています。

ヘッダー

タブに表示されるテキスト。これは通常、タブの下に含まれた情報を示す、短くわかりやすい名前です。

要素の階層

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

以下の資料も参照してください。

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