Виџет картица користи прилагођени елемент <devsite-selector> за организовање података који имају вишеструке репрезентације, као што су примери кода у различитим програмским језицима или структуре података представљене различитим форматима (као што су ЈСОН, ИАМЛ или КСМЛ).
Општа употреба
Следећи пример користи прилагођени елемент <devsite-selector> за приказивање три одељка картице помоћу ХТМЛ-а.
Наслов картице 1
Картица 1 Садржај
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Цурабитур семпер тортор нец дицтум сагиттис. Нунц масса ипсум, моллис нон некуе сед, вулпутате дигниссим одио.
Наслов картице 2
Таб 2 Садржај
Цурабитур семпер тортор нец дицтум сагиттис. Нунц масса ипсум, моллис нон некуе сед, вулпутате дигниссим одио. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит.
Наслов картице 3
Картица 3 Садржај
Нунц масса ипсум, моллис нон некуе сед, вулпутате дигниссим одио. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Цурабитур семпер тортор нец дицтум сагиттис.
Следећи пример користи Маркдовн синтаксу да прикаже исте три картице.
Наслов картице 1
Картица 1 Садржај
Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Цурабитур семпер тортор нец дицтум сагиттис. Нунц масса ипсум, моллис нон некуе сед, вулпутате дигниссим одио.
Наслов картице 2
Таб 2 Садржај
Цурабитур семпер тортор нец дицтум сагиттис. Нунц масса ипсум, моллис нон некуе сед, вулпутате дигниссим одио. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит.
Наслов картице 3
Картица 3 Садржај
Нунц масса ипсум, моллис нон некуе сед, вулпутате дигниссим одио. Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Цурабитур семпер тортор нец дицтум сагиттис.
Табс виџет са менијем за преливање
Следећи пример користи прилагођени елемент <devsite-selector> , али има превише картица да би стао на екран и аутоматски се прелива у падајући мени Још .
јабуке
Садржај о јабукама
кајсије
Садржај о кајсијама
Авокадо
Садржај о авокаду
Фиг
Садржај о смоквама
Грожђе
Садржај о грожђу
Киви
Садржај о кивију
Лимун
Садржај о лимуну
Лимес
Садржај о лиметима
Манго
Садржај о мангу
Брескве
Садржај о бресквама
Следећи пример користи Маркдовн синтаксу да прикаже исти мени преливања.
јабуке
Садржај о јабукама
кајсије
Садржај о кајсијама
Авокадо
Садржај о авокаду
Фиг
Садржај о смоквама
Грожђе
Садржај о грожђу
Киви
Садржај о кивију
Лимун
Садржај о лимуну
Лимес
Садржај о лиметима
Манго
Садржај о мангу
Брескве
Садржај о бресквама
Дуплирани називи картица у вишеструким виџетима картица
Кликом на картицу утиче на све остале картице на страници са истим текстом у истој синтакси. На пример, клик на јабуке или кајсије у виџету у наставку такође утиче на други виџет у претходном одељку јер су оба направљена помоћу Маркдовн-а.
јабуке
Више садржаја о јабукама!
кајсије
Више садржаја о кајсијама, такође!
Прилагођавање виџета картица
Иако можете да направите виџет за картице помоћу Маркдовн-а, морате да користите ХТМЛ синтаксу да бисте доделили прилагођене атрибуте.
Преламање текста унутар картице
Текст који премашује максималну ширину за картицу коју је поставио ДевСите се исече и додаје елипсама. Следећи пример користи класу two-line-tab реда у оквиру прилагођеног елемента <devsite-selector> за преламање текста унутар друге картице.
Ово је дуга етикета која се не омота
Ова ознака се не премотава у другу линију.
Ова ознака се премотава у други ред
Ознака за ову картицу прелази у други ред.
Преламање текста унутар картице са мањом ознаком
Следећи пример поставља тво two-line-tab на први ред и tab-label на други ред унутар <devsite-selector> прилагођеног елемента да би се приказала мања ознака у другом реду картице у два реда.
Свифт
Ова картица има Свифт ознаку.
Јава
Ова картица у два реда има мању Андроид ознаку испод Јава ознаке.
Котлин
Ова картица у два реда има мању Андроид ознаку испод ознаке Котлин .
Јава
Ова картица има Јава ознаку.
Директно повезивање до одређене картице
Следећи пример директно повезује и отвара одређену картицу навођењем id -а унутар <devsite-selector> прилагођеног елемента.
Цобол
Ова картица је подразумевана, али можете користити #cobol сидро.
Фортран
Директно бисте се повезали са овом картицом додавањем #fortran сидра вашој вези.
Хаскелл
Ова картица би користила #haskell сидро у вашој вези.
Прављење везе са свим виџетима отвореним на истој картици
Следећа веза додаје параметар упита ?tab=Apricots УРЛ адреси ове странице и учитава страницу са картицом Кајсије отвореном на свим селекторима:
хттпс://ввв.девситетест.хов/интегратион-тестс/видгетс/табс?таб=Априцотс