Cilņu logrīks izmanto pielāgoto elementu <devsite-selector> , lai sakārtotu datus, kuriem ir vairāki attēlojumi, piemēram, koda piemērus dažādās programmēšanas valodās vai datu struktūras, kas attēlotas dažādos formātos (piemēram, JSON, YAML vai XML).
Vispārējs lietojums
Nākamajā piemērā tiek izmantots pielāgotais elements <devsite-selector> , lai renderētu trīs ciļņu sadaļas, izmantojot HTML.
1. cilnes nosaukums
1. cilnes saturs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2. cilnes nosaukums
2. cilnes saturs
Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. cilnes nosaukums
3. cilnes saturs
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis.
Nākamajā piemērā tiek izmantota Markdown sintakse, lai renderētu tās pašas trīs cilnes.
1. cilnes nosaukums
1. cilnes saturs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2. cilnes nosaukums
2. cilnes saturs
Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. cilnes nosaukums
3. cilnes saturs
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis.
Cilņu logrīks ar pārpildes izvēlni
Nākamajā piemērā tiek izmantots pielāgotais elements <devsite-selector> taču tajā ir pārāk daudz ciļņu, lai tās ietilptu ekrānā, un tas automātiski pārplūst nolaižamajā izvēlnē Vēl .
Āboli
Saturs par āboliem
Aprikozes
Saturs par aprikozēm
Avokado
Saturs par avokado
zīm
Saturs par vīģēm
Vīnogas
Saturs par vīnogām
Kivi
Saturs par kivi
Citroni
Saturs par citroniem
Laimi
Saturs par liepām
Mango
Saturs par mango
Persiki
Saturs par persikiem
Nākamajā piemērā tiek izmantota Markdown sintakse, lai renderētu to pašu pārpildes izvēlni.
Āboli
Saturs par āboliem
Aprikozes
Saturs par aprikozēm
Avokado
Saturs par avokado
zīm
Saturs par vīģēm
Vīnogas
Saturs par vīnogām
Kivi
Saturs par kivi
Citroni
Saturs par citroniem
Laimi
Saturs par liepām
Mango
Saturs par mango
Persiki
Saturs par persikiem
Dublējiet ciļņu nosaukumus vairākos ciļņu logrīkos
Noklikšķinot uz cilnes, tiek ietekmētas visas pārējās lapas cilnes ar tādu pašu tekstu tajā pašā sintaksē. Piemēram, tālāk esošajā logrīkā noklikšķinot uz Āboli vai Aprikozes , tiek ietekmēts arī otrais logrīks iepriekšējā sadaļā, jo tie abi ir veidoti, izmantojot Markdown.
Āboli
Vairāk satura par āboliem!
Aprikozes
Vairāk satura arī par aprikozēm!
Cilņu logrīku pielāgošana
Lai gan varat izveidot ciļņu logrīku, izmantojot Markdown, jums ir jāizmanto HTML sintakse, lai piešķirtu pielāgotus atribūtus.
Teksta ietīšana cilnē
Teksts, kas pārsniedz DevSite iestatīto maksimālo cilnes platumu, tiek apgriezts un pievienots ar elipsēm. Nākamajā piemērā tiek izmantota two-line-tab klase pielāgotajā elementā <devsite-selector> , lai aplautu tekstu otrajā cilnē.
Šī ir gara etiķete, kas nav iesaiņota
Šī etiķete netiek apvilkta citā rindā.
Šī etiķete tiek aplauzta otrajā rindā
Šīs cilnes etiķete tiek aplauzta otrajā rindā.
Teksta ietīšana cilnē ar mazāku etiķeti
Nākamajā piemērā pielāgotā elementa <devsite-selector> rindiņai ir iestatīta two-line-tab pirmajā rindiņā un tab-label otrajā rindā, lai divu rindiņu cilnes otrajā rindā parādītu mazāku etiķeti.
Svifta
Šai cilnei ir Swift etiķete.
Java
Šai divu rindiņu cilnei zem Java etiķetes ir mazāks Android apzīmējums.
Kotlins
Šai divu rindiņu cilnei zem Kotlin etiķetes ir mazāks Android apzīmējums.
Java
Šai cilnei ir Java etiķete.
Tieša saite uz noteiktu cilni
Tālāk sniegtajā piemērā ir tieša saite uz noteiktu cilni un tiek atvērta tā, norādot id pielāgotajā elementā <devsite-selector> .
Cobol
Šī cilne ir noklusējuma cilne, taču varat izmantot enkuru #cobol .
Fortran
Jūs izveidosiet tiešu saiti uz šo cilni, savai saitei pievienojot enkuru #fortran .
Haskels
Šajā cilnē tiks izmantots jūsu saites enkurs #haskell .
Saites izveide ar visiem logrīkiem, kas atvērti vienā cilnē
Šī saite šīs lapas vietrādim URL pievieno vaicājuma parametru ?tab=Apricots un ielādē lapu, kurā visos atlasītājos ir atvērta cilne Aprikozes :
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots
, Cilņu logrīks izmanto pielāgoto elementu <devsite-selector> , lai sakārtotu datus, kuriem ir vairāki attēlojumi, piemēram, koda piemērus dažādās programmēšanas valodās vai datu struktūras, kas attēlotas dažādos formātos (piemēram, JSON, YAML vai XML).
Vispārējs lietojums
Nākamajā piemērā tiek izmantots pielāgotais elements <devsite-selector> , lai renderētu trīs ciļņu sadaļas, izmantojot HTML.
1. cilnes nosaukums
1. cilnes saturs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2. cilnes nosaukums
2. cilnes saturs
Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. cilnes nosaukums
3. cilnes saturs
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis.
Nākamajā piemērā tiek izmantota Markdown sintakse, lai renderētu tās pašas trīs cilnes.
1. cilnes nosaukums
1. cilnes saturs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio.
2. cilnes nosaukums
2. cilnes saturs
Curabitur semper tortor, nec dictum sagittis. Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. cilnes nosaukums
3. cilnes saturs
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor, nec dictum sagittis.
Cilņu logrīks ar pārpildes izvēlni
Nākamajā piemērā tiek izmantots pielāgotais elements <devsite-selector> taču tajā ir pārāk daudz ciļņu, lai tās ietilptu ekrānā, un tas automātiski pārplūst nolaižamajā izvēlnē Vēl .
Āboli
Saturs par āboliem
Aprikozes
Saturs par aprikozēm
Avokado
Saturs par avokado
zīm
Saturs par vīģēm
Vīnogas
Saturs par vīnogām
Kivi
Saturs par kivi
Citroni
Saturs par citroniem
Laimi
Saturs par liepām
Mango
Saturs par mango
Persiki
Saturs par persikiem
Nākamajā piemērā tiek izmantota Markdown sintakse, lai renderētu to pašu pārpildes izvēlni.
Āboli
Saturs par āboliem
Aprikozes
Saturs par aprikozēm
Avokado
Saturs par avokado
zīm
Saturs par vīģēm
Vīnogas
Saturs par vīnogām
Kivi
Saturs par kivi
Citroni
Saturs par citroniem
Laimi
Saturs par liepām
Mango
Saturs par mango
Persiki
Saturs par persikiem
Dublējiet ciļņu nosaukumus vairākos ciļņu logrīkos
Noklikšķinot uz cilnes, tiek ietekmētas visas pārējās lapas cilnes ar tādu pašu tekstu tajā pašā sintaksē. Piemēram, tālāk esošajā logrīkā noklikšķinot uz Āboli vai Aprikozes , tiek ietekmēts arī otrais logrīks iepriekšējā sadaļā, jo tie abi ir veidoti, izmantojot Markdown.
Āboli
Vairāk satura par āboliem!
Aprikozes
Vairāk satura arī par aprikozēm!
Cilņu logrīku pielāgošana
Lai gan varat izveidot ciļņu logrīku, izmantojot Markdown, jums ir jāizmanto HTML sintakse, lai piešķirtu pielāgotus atribūtus.
Teksta ietīšana cilnē
Teksts, kas pārsniedz DevSite iestatīto maksimālo cilnes platumu, tiek apgriezts un pievienots ar elipsēm. Nākamajā piemērā tiek izmantota two-line-tab klase pielāgotajā elementā <devsite-selector> , lai aplautu tekstu otrajā cilnē.
Šī ir gara etiķete, kas nav iesaiņota
Šī etiķete netiek apvilkta citā rindā.
Šī etiķete tiek aplauzta otrajā rindā
Šīs cilnes etiķete tiek aplauzta otrajā rindā.
Teksta ietīšana cilnē ar mazāku etiķeti
Nākamajā piemērā pielāgotā elementa <devsite-selector> rindiņai ir iestatīta two-line-tab pirmajā rindiņā un tab-label otrajā rindā, lai divu rindiņu cilnes otrajā rindā parādītu mazāku etiķeti.
Svifta
Šai cilnei ir Swift etiķete.
Java
Šai divu rindiņu cilnei zem Java etiķetes ir mazāks Android apzīmējums.
Kotlins
Šai divu rindiņu cilnei zem Kotlin etiķetes ir mazāks Android apzīmējums.
Java
Šai cilnei ir Java etiķete.
Tieša saite uz noteiktu cilni
Tālāk sniegtajā piemērā ir tieša saite uz noteiktu cilni un tiek atvērta tā, norādot id pielāgotajā elementā <devsite-selector> .
Cobol
Šī cilne ir noklusējuma cilne, taču varat izmantot enkuru #cobol .
Fortran
Jūs izveidosiet tiešu saiti uz šo cilni, savai saitei pievienojot enkuru #fortran .
Haskels
Šajā cilnē tiks izmantots jūsu saites enkurs #haskell .
Saites izveide ar visiem logrīkiem, kas atvērti vienā cilnē
Šī saite šīs lapas vietrādim URL pievieno vaicājuma parametru ?tab=Apricots un ielādē lapu, kurā visos atlasītājos ir atvērta cilne Aprikozes :
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots