html-and-css-only-tabs.pt-br.md (2096B)
1 +++ 2 authors = ["Programador Solitário"] 3 title = "HTML and CSS only tabs" 4 date = "2023-07-09" 5 description = "Sample article showcasing shortcodes for HTML/CSS only tabs" 6 tags = [ 7 "hugo", 8 "markdown", 9 "css", 10 "html", 11 "shortcodes", 12 ] 13 categories = [ 14 "sintaxe", 15 "demonstração do tema", 16 ] 17 series = ["Demonstração do Tema"] 18 aliases = ["migrate-from-jekyl"] 19 +++ 20 21 ## Shortcodes 22 23 O seguinte conteúdo: 24 25 ```markdown 26 {{</* tabgroup */>}} 27 {{</* tab name="Hello" */>}} 28 Hello World! 29 {{</* /tab */>}} 30 31 {{</* tab name="Goodbye" */>}} 32 Goodbye Everybody! 33 {{</* /tab */>}} 34 {{</* /tabgroup */>}} 35 ``` 36 37 Irá gerar: 38 39 {{< tabgroup >}} 40 {{< tab name="Hello" >}} 41 Hello World! 42 {{< /tab >}} 43 44 {{< tab name="Goodbye" >}} 45 Goodbye Everybody! 46 {{< /tab >}} 47 {{< /tabgroup >}} 48 49 ## Alinhamento à direita 50 51 Você também pode alinhas as tabs à direita: 52 53 ```markdown 54 {{</* tabgroup align="right" */>}} 55 {{</* tab name="Hello" */>}} 56 Hello World! 57 {{</* /tab */>}} 58 59 {{</* tab name="Goodbye" */>}} 60 Goodbye Everybody! 61 {{</* /tab */>}} 62 {{</* /tabgroup */>}} 63 ``` 64 65 Obtendo o seguinte resultado: 66 67 {{< tabgroup align="right" >}} 68 {{< tab name="Hello" >}} 69 Hello World! 70 {{< /tab >}} 71 72 {{< tab name="Goodbye" >}} 73 Goodbye Everybody! 74 {{< /tab >}} 75 {{< /tabgroup >}} 76 77 ## Conteúdo Markdown 78 79 Qualquer conteúdo Markdown válido pode ser usado dentro das tabs: 80 81 ````markdown 82 {{</* tabgroup align="right" style="code" */>}} 83 {{</* tab name="Ruby" */>}} 84 85 ```ruby 86 puts 'Hello' 87 ``` 88 89 {{</* /tab */>}} 90 {{</* tab name="Python" */>}} 91 92 ```python 93 print('Hello') 94 ``` 95 96 {{</* /tab */>}} 97 {{</* tab name="JavaScript" */>}} 98 99 ```js 100 console.log("Hello"); 101 ``` 102 103 {{</* /tab */>}} 104 {{</* /tabgroup */>}} 105 ```` 106 107 Assim você obterá o seguinte resultado: 108 109 {{< tabgroup align="right" style="code" >}} 110 {{< tab name="Ruby" >}} 111 112 ```ruby 113 puts 'Hello' 114 ``` 115 116 {{< /tab >}} 117 {{< tab name="Python" >}} 118 119 ```python 120 print('Hello') 121 ``` 122 123 {{< /tab >}} 124 {{< tab name="JavaScript" >}} 125 126 ```js 127 console.log("Hello"); 128 ``` 129 130 {{< /tab >}} 131 {{< /tabgroup >}} 132 133 Nesse exemplo, `style="code"` faz com que o resultado seja mais agradável quando conteúdo é puramente blocos de código.