Sintaxe Wiki

What follows was borrowed from http://pagi.wikidot.com/ajuda:sintaxe-wiki


Este documento descreve a Sintaxe Wiki utilizada dentro do pagi e de todo o projeto WIkidot.

Helpful is: [http://doc.wikidot.com/] (build by Community-Admins ) with the translate-button right side!

Toda página do site existe em duas formas: o código fonte e o código compilado. O código fonte é aquele que pode ser editado e que descreve o conteúdo da página. Este código é compilado no interior do código (XHTML) que é enviado para o browser quando você vê a página. A Sintaxe Wiki é usada para criar o conteúdo das páginas através da edição do código fonte.

Formatação básica

quando você digita… você obtém…
//texto em itálico// texto em itálico
**texto em negrito** texto em negrito
//**itálico e negrito**// itálico e negrito
__texto sublinhado__ texto sublinhado
--texto riscado-- texto riscado
{{texto mono-espaçado}} texto mono-espaçado
normal^^superscrito^^ normalsuperscrito
normal,,subscrito,, normalsubscrito
[!-- comentário invisível --]
[[span style="color:red"]]elemento //span// feito sob medida[[/span]] elemento span feito sob medida
cor ##blue|predefinida## ou ##229966|codificada## cor predefinida ou codificada

Parágrafos e novas linhas

Parágrafos são separados por duas novas linhas. Uma nova linha produz… uma nova linha.

Primeiro parágrafo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Segundo parágrafo. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Apenas uma linha.
Outra linha.

Primeiro parágrafo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Segundo parágrafo. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Apenas uma linha.
Outra linha.

Aspectos tipográficos

Se você está preocupado com aspectos tipográficos, existem algumas maneiras de melhorar o seu texto:

você digita… você obtém…
``citação'' “citação”
`citação' ‘citação’
,,citação'' „citação”
três pontinhos... três pontinhos…
travessão -- travessão —

Texto literal

Se você quiser evitar o processamento de formatação e produzir apenas texto, embrulhe o texto com dois caracteres @@.

Este //texto// é **processado**.

@@Este //texto// não é **processado**.@@

Este texto é processado.

Este //texto// não é **processado**.

Comentários invisíveis

Um comentário invisível é um bloco de código que não é processado na versão compilada. Para acrescentar um comentário invisível ao código fonte, use a forma [!-- ... --], isto é:

[!--
Este texto não será processado
--]

Cabeçalhos

Para fazer um cabeçalho, comece a linha com uma sinal de "mais". Coloque tanto sinais de mais quanto necessário para obter o nível de cabeçalho que você quer.

+ Cabeçalho nível 1
++ Cabeçalho nível 2
+++ Cabeçalho nível 3
++++ Cabeçalho nível 4
+++++ Cabeçalho nível 5
++++++ Cabeçalho nível 6

Índice

Para criar uma lista de cada seção/cabeçalho, com um link para a seção/cabeçalho, utilize o tag table of contents em uma linha.

[[toc]]
[[f>toc]] - índice flutuante alinhado à direita
[[f<toc]] - índice flutuante alinhado à esquerda

Linhas horizontais

Utilize quatro hífens ou mais (----) para criar uma linha horizontal.

Listas

Listas com "bolinhas"

Crie um elemento de lista iniciando a linha com um asterisco. Para aumentar a indentação, acrescente espaços antes do asterisco.

* Bolinha 1
* Bolinha 2
 * Bolinha 2.1
  • Bolinha 1
  • Bolinha 2
    • Bolinha 2.1

Listas numeradas

De maneira similar, você pode criar listas numeradas iniciando o parágrafo com um ou mais "forquilhas" (#).

# Item 1
# Item 2
 # Item 2.1
  1. Item 1
  2. Item 2
    1. Item 2.1

Você pode misturar listas com bolinhas e listas numeradas.

Listas de definição

Você pode criar uma lista de definição (com descrição) usando a seguinte sintaxe:

: Item 1 : Alguma coisa
: Item 2 : Algumas coisa a mais
Item 1
Alguma coisa
Item 2
Algumas coisa a mais

Blocos de citação

Você pode marcar um bloco de citação iniciando a linha com um ou mais caracteres '>', seguidos por um espaço e pelo texto a ser citado.

Um parágrafo normal.

> Faça eu me tornar uma citação. The quick brown fox jumps over the lazy dog. \
Now this the time for all good men to come to the aid of \
their country. Notice how we can continue the block-quote \
in the same "paragraph" by using a backslash at the end of \
the line.
>
> Outro bloco, que leva a...
>> Segundo nível de indentação. Ele se torna ainda mais afastado \
do que o anterior.

De volta ao texto normal.

Um parágrafo normal.

Faça eu me tornar uma citação. The quick brown fox jumps over the lazy dog. Now this the time for all good men to come to the aid of their country. Notice how we can continue the block-quote in the same "paragraph" by using a backslash at the end of the line.
Outro bloco, que leva a…

Segundo nível de indentação. Ele se torna ainda mais afastado do que o anterior.

De volta ao texto normal.

Links

Links internos

Unlike some other wiki engines wikibox.net does not process SqusherAndCapitalized words as page links. Instead any link should be marked with 3 nesting square brackets.

If a page address contains disallowed characters the address will be "unixified" to contain only allowed chars. The displayed name however will maintain original form.

what you type what you get comments
[[[link-to-a-page]]] link-to-a-page using raw page name
[[[link "TO" ą pagE]]] link "TO" ą pagE automatic purification of destination page
[[[category: sample page]]] sample page linked to a page with category
[[[some page| custom text]]] [[[some page| custom text]] using custom text
[[[doc|Documentation]]] Ducumentation linking to an existing page (different color)
[[[doc#toc1|Section 1]]] Section 1 linking to an anchor (first section)
[[[doc#toc1]]] doc linking to an anchor (first section)

URLs

what you type what you get comments
http://www.wikidot.com http://www.wikidot.com simple inline link
[http://www.wikidot.com wikidot] wikidot named link (custom anchor)
*http://www.wikidot.com
[*http://www.wikidot.com wikidot]
http://www.wikidot.com
wikidot
opens in a new window
[# empty link] empty link link with href="javascript:;" i.e. not leading anywhere. usefull when constructing pull-down menus

Âncoras

To place an anchor use [[# anchor-name]] syntax. To refer to an anchor (and scroll to it) use [#anochor-name text to display].

Emails

what you type what you get comments
support@example.com moc.elpmaxe|troppus#moc.elpmaxe|troppus simple inline email
[support@example.com email me!] moc.elpmaxe|troppus#!em liame custom anchor

Although we discourage anyone from putting his/her email address on the web, WikiDot engine provides a simple scrambling mechanism to prevent automated bots from reading emails. Each email is scrambled and it is decoded in the client's browser. So it is not 100% spam-safe, but much safer than plain-text emails.

InterWiki

To link directly to a Wikipedia article you can use a syntax:

what you type what you get
[wikipedia:Albert_Einstein] Albert_Einstein
[wikipedia:Albert_Einstein Albert] Albert

Other links defined by example:

  • [google:free+wiki] - search google for the "free wiki" term
  • [dictionary:wiki] - look up definitions of the word wiki from dictionary.reference.com

Imagens

Apenas uma imagem

To insert an image into the page use the following syntax:

[[image image-source attribute1="value1" attribute2="value2" ...]]

And here is the list of allowed attributes:

attribute name allowed values example value description
link wiki page name or URL "wiki-page"
"http://www.example.com"
makes image a link to another page or web address; this is ignored when using Flickr as a source; prepend the link with '*' to make it open in a new window
alt any string "a photo of me" text substitution when image not available
width number of pixels "200px" forces width of a image when displaying
height number of pixels "200px" forces height of a image when displaying
style valid CSS style definition "border: 1px solid red; padding: 2em;" adds extra CSS style to the image
class CSS class "mystyle" forces the image CSS class - suggested use only with customized themes
size "square" - 75x75 pixels
"thumbnail" - 100 on longest side
"small" - 240 on longest side
"medium" - 500 on longest side
"large" - 1024 on longest side (only for Flickr large images)
"original" - original image (Flickr only)
any of allowed ;-) displays a resized image; great for thumbnails
if flickr is the source it pulls required size from a Flickr server;
this option has effect only on local images or Flickr images

size attribute works very well with local files (attached to pages) not only with image files, but with e.g. PDF or PostScript. See this page for more details.

The image-source can be one of the following:

source type format example value description
URL address any valid URL address http://www.example.com/image.jpg displays image from the web address
file attachment (current page) filename exampleimage.jpg displays image attached to the current page
file attachement (different page) /another-page-name/filename /another-page/exampleimage.jpg displays image attached to a different page
flickr image flickr:photoid flickr:83001279 displays image from Flickr and links to the original Flickr page
flickr image (private) flickr:photoid_secret flickr:149666562_debab08866 displays image from Flickr and links to the original Flickr page; if the secret is provided the image is available despite being marked as non-public

To make the linked document in a new window you can either prepend the link attribute with '*' (e.g. link="*http://www.example.com" or prepend the src element with '*' (e.g. *flickr:149666562_debab08866, *image-file etc.) for images that automatically generate links.

To choose horizontal alignment use:

  • [[=image… - centered image
  • [[<image… - image on left
  • [[>image… - image on right
  • [[f<image… - image on left floating (surrounded by text)
  • [[f>image… - image on right floating (surrounded by text)

Galeria de imagens

To insert a series of images into a page content use the [[gallery]] element:

[[gallery size="image-size"]]

or
[[gallery size="image-size"]]
: image-source1 attribute1="value1" attribute2="value2" ...
: image-source2 attribute1="value1" attribute2="value2" ...
...
[[/gallery]]

The only allowed attribute within the [[gallery]] tag is size with allowed values: "square", "thumbnail", "small", "medium".

If the [[gallery]] tag is invoked without a list of images it automatically displays rescaled images (thumbnails) of imageable files attached to the current page (this also include thumbnails for any .pdf or .ps document).

If [[gallery]] is invoked with a list of images, only these images are displayed. image-source must not be a URL in this case. Allowed "per-image attributes are:

  • link - URL or wiki page name (does not work with Flickr images to be o.k. with Flickr terms)
  • alt - alternative text when the image is not available

To make a document open in a new window the same rules as with a single image applies.

Also see FlickrGallery module if you wish to import images from Flickr.

Blocos de código

Create code blocks by using [[code]]…[[/code]] tags (each on its own line).

This is an example code block!

To create PHP blocks that get automatically colorized when you use PHP tags, simply surround the code with [[code type="php"]]…[[/code]] tags).

To get PHP code colorized you should surround it with <?php.. ?>.

WikiDot.com uses PEAR::Text_Highlighter and supports a number of color schemes. Here is what is supported (allowed type values):

php, html, cpp, css, diff, dtd, java, javascript, perl, python, ruby, xml.

[[code type="php"]]
<?php
/* comment */
for($i=0; $i<100; $i++){
echo "number".$i."\n";
}
?>
[[/code]]
<?php
/* comment */
for($i=0; $i<100; $i++){
echo "number".$i."\n";
}
?>

Tabelas

Tabelas simples

You can create simple tables using pairs of vertical bars:

||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||
head 1 head 2 head 3
cell 1 cell 2 cell 3
long cell 4 cell 5
cell 6 long cell 7
looong cell 8
|| lines must start and end || with double vertical bars || nothing ||
|| cells are separated by || double vertical bars || nothing ||
|||| you can span multiple columns by || starting each cell ||
|| with extra cell |||| separators ||
|||||| but perhaps an example is _
the easiest way to see ||
lines must start and end with double vertical bars nothing
cells are separated by double vertical bars nothing
you can span multiple columns by starting each cell
with extra cell separators
but perhaps an example is
the easiest way to see

For a newline inside the table cell use _ (underscore) at the end of the line (see the example above).

Tabelas avançadas (customizadas)

To create more advanced tables, special tags can be used that can accept class and style attributes for managing appearance. To create an advanced table use the following syntax:

[[table]]
[[row]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
call 0.0
[[/cell]]
[[cell style="border: 1px solid silver"]]
call 0.1
[[/cell]]
[[/row]]
[[row style="border: 1px solid silver"]]
[[cell]]
call 1.0
[[/cell]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
call 1.1
[[/cell]]
[[/row]]
[[/table]]
transforms to…
cell 0.0 cell 0.1
cell 1.0 cell 1.1

Each of elements [[table]], [[row]] and [[cell]] can accept attributes style and class and they are transformed to (X)HTML tags: <table>, <tr> and <td>.

An example of using tables for page layout can be found on our Snippets Wiki at: http://snippets.wikidot.com/code:layout-with-tables .

Tables can be nested.

Formatação de blocos de elementos

Alinhado à esquerda, à direita, centralizado e justificado

To apply horizontal alignment to a block of text use:

[[<]] ... [[/<]] align left
[[>]] ... [[/>]] align right
[[=]] ... [[/=]] align center
[[==]] ... [[/==]] align justified

E.g.

[[=]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\
Aenean a libero. Vestibulum adipiscing, felis ac faucibus \
imperdiet, erat lacus accumsan neque, vitae nonummy lorem \
pede ac elit.

Maecenas in urna. Curabitur hendrerit risus vitae ligula.
[[/=]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.

Maecenas in urna. Curabitur hendrerit risus vitae ligula.

To center a single line use = at the beginning:

= Centered line

Centered line

Blocos div customizados

To improve the layout you can use [[div]] ... [[/div]] elements which transform to html @div> ... </div@ blocks.
Allowed attributes are: class and style only but this should be more than enough to create desired layout.

[[div]] blocks can be nested.

Below is an example how to create a 2-column layout using div block:

[[div style="float:left; width: 45%; padding: 0 2%"]]
left column left column left column left column left column
left column left column left column left column left column
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
right column right column right column right column right column
right column right column right column right column right column
[[/div]]

~~~~~

left column left column left column left column left column left column left column left column left column left column

right column right column right column right column right column right column right column right column right column right column

The ~~~~ element is used to clear floats and translates more or less to <div style="clear:both"></div>).

Custom [[div]] blocks can be used to create very advanced page layouts.

Matemática

WikiDot.com uses LaTeX to render beautiful equations. For these who know LaTeX syntax using wikidot equations should be quite obvious. Please

Equações

Simply put the equation between [[math label]] … [[/math]] block tags (the label is optional). The equation is rendered within LaTex \begin{equation} ... \end{equation} environment. Please refer to any LaTeX reference manual for details about syntax.

[[math label1]]
\rho _{\rm GJ} = -\sigma (r) \left[ (1 - \eta _{\ast }^2 {\kappa \over {\eta ^3}}) \cos \chi \right.
+ \left. {3\over 2} \theta (\eta) H(\eta)
\xi \sin \chi \cos \phi \right]
[[/math]]
(1)
\begin{align} \rho _{\rm GJ} = -\sigma (r) \left[ (1 - \eta _{\ast }^2 {\kappa \over {\eta ^3}}) \cos \chi \right. + \left. {3\over 2} \theta (\eta) H(\eta) \xi \sin \chi \cos \phi \right] \end{align}

To refer to a labeled equation simply use [[eref label]] to get a raw number or e.g. Eq. ([[eref label1]]) which gives Eq. (1).

To break long equations use a type="eqnarray" attribute, e.g.

[[math label2 type="eqnarray"]]
\lefteqn{ \cos x = 1        
-\frac{x^{2}}{2!} +{} } \\
& & {}+\frac{x^{4}}{4!}
-\frac{x^{6}}{6!}+{}\cdots
[[/math]]
(2)
\begin{eqnarray} \lefteqn{ \cos x = 1 -\frac{x^{2}}{2!} +{} } \\ & & {}+\frac{x^{4}}{4!} -\frac{x^{6}}{6!}+{}\cdots \end{eqnarray}

Matemática inserida no texto

To use math expressions inside text (sentence) use [[$ ... $]] block tags.

[[$ E = mc^2 $]] is much more popular than
[[$ G_{\mu\nu} - \Lambda g_{\mu\nu} = \kappa T_{\mu\nu} $]]

$E = mc^2$ is much more popular than $G_{\mu\nu} - \Lambda g_{\mu\nu} = \kappa T_{\mu\nu}$

Notas de rodapé

To make footnotes in the text use [[footnote]] block. To force the list of footnotes
to appear not at the end of the page, use [[footnoteblock]].

Some text[[footnote]]And a small footnote.[[/footnote]]. Here we go
with another footnote[[footnote]]Content of another footnote.[[/footnote]].

[[footnoteblock]]

Some text1. Here we go with another footnote2.

If you are not satisfied with the default title ("Footnotes") you can force your own title by using [[footnoteblock title="Custom title"]] or even do not use title at all (title="").

Bibliografia

The bibliography block is defined by [[bibliography]]...[[/bibliography]]. Each bibliography item has the form:
label : full reference
To cite a bibliography entry use ((bibcite label)).

The first pulsar was observed by J. Bell and A. Hewish [((bibcite bell))]. Another reference [see ((bibcite guy))].

[[bibliography]]
: bell : Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collins, R. A. //Observation of a Rapidly Pulsating Radio Source.// Nature 217, 709, 1968.
: guy : Guy, R. K. //Modular Difference Sets and Error Correcting Codes.// §C10 in Unsolved Problems in Number Theory, 2nd ed. New York: Springer-Verlag, pp. 118-121, 1994.
[[/bibliography]]

The first pulsar was observed by J. Bell and A. Hewish [1]. Another reference [see 2].

Bibliography
1. Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collins, R. A. Observation of a Rapidly Pulsating Radio Source. Nature 217, 709, 1968.
2. Guy, R. K. Modular Difference Sets and Error Correcting Codes. §C10 in Unsolved Problems in Number Theory, 2nd ed. New York: Springer-Verlag, pp. 118-121, 1994.

If you are not satisfied with the default title ("Bibliography") you can force your own title by using [[bibliography title="Custom title"]] or even do not use title at all (title="").

Inclusão de outras páginas

If you want to include contents of another page use:

 [[include pagename]]

The include tag should start and end with a newline.

The [[include]] tag can also take parameters and substitute variables in the included source. To denote variables in the included page use:

{$var1}, {$number_books}, {$title}, {$variable_name}, {$variableName}

and in the including page use:

 [[include pagename var1=value1 | number_books = 43 | title=Best Wiki Ever
| variable_name = just a variable
| variableName = another variable
]]

As you can see you can splid variable definitions over several lines for cleaner code.

NOTE: includes and images/files: The [[include]] works just by inserting the page source at a given place. If you have any images or files attached in the included page and you refer to them as [[image filename.jpg]] in the included page, please rather use the image/file source with the name of the page too, e.g. [[image included-page/filename.jpg]]

Embutir media

Video

To embed video directly into the page use [[embedvideo]] ... [[/embedvideo]] block.
Between the the "embedding html code" should be placed from any of the following video online galleries:

E.g.

[[embedvideo]]
<embed style="width:400px; height:326px;" id="VideoPlayback" align="middle"
type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=263244138622602613"
allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL"
FlashVars="playerMode=embedded"> </embed>
[[/embedvideo]]

Áudio

To embed audio use [[embedaudio]] ... [[/embedaudio]] and the html embedding code found on the audio hosting website.

Currently supported are:

E.g.

[[embedaudio]]
<embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf"
quality="high" width="300" height="52" name="audio_player_standard_gray"
align="middle" allowScriptAccess="always" wmode="transparent"  
type="application/x-shockwave-flash" flashvars="audio_id=99133&audio_duration=282.0&valid_sample_rate=true&external_url=http://www.vitalpodcasts.com/FileSystem/podcasts/89/opensource_episode1.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</embed><br /><a style="font-size: 9px; padding-left: 110px; color: #f39;
letter-spacing: -1px; text-decoration: none" href="http://odeo.com/audio/99133/view">
powered by <strong>ODEO</strong></a>
[[/embedaudio]]

Embutir códigos de outros sites

Sometimes web sites (mainly social-oriented ones) allow you to paste a code block directly into other pages in order to increase your site functionality or embed some contet from the original site.

Tag [[embed]]

The [[embed]] block tag allows you to do the same with your wiki pages. E.g. to display del.icio.us tag cloud as generated from http://del.icio.us/help/tagrolls simply wrap the html code:

[[embed]]
<script type="text/javascript" src="http://del.icio.us/feeds/js/tags/michal_frackowiak?icon;size=12-35;color=87ceeb-0000ff;title=my%20del.icio.us%20tags"></script>
[[/embed]]

For the list of supported services please see the page: Embedding code from other services.

Please note that if the code contains <script type="text/javascript"… i.e. just JavaScript, the content will not be fully rendered when you click preview while editing the page. It should be there however when you view the page afterwards.

Elemento [[iframe]]

Using the iframe element one can embed content of any other web page. The syntax is

[[iframe url-source attributes]]

and it translates into HTML tags <iframe src="url-source" attributes></iframe>. The allowed attributes are: frameborder (0 or 1 allowed), align (left, right, top, bottom, middle), height (number of pixels or %), width (number of pixels or %), scrolling (yes or no), class, style

Módulos

Modules are independent widgets that can be placed in the pages. The general syntax is:
[[module ModuleName param1="value1" param2="value2" ...]]

To read more about modules see the modules section of the documantation.

Arquivos anexados

what you type what it means
[[file filename]] produces a link to a file attached to this page
[[file /another-page/filename]] produces a link to a file attached to another-page

The destination file must be first attached to the page — by clicking "files" and "upload file" from the options at the bottom of any page.

Usuários

what you type what you get comments
[[user user-name]]
e.g. [[user michal frackowiak]]
michal-frackowiak user info (no buddy icon)
[[*user user-name]]
e.g. [[*user michal frackowiak]]
michal-frackowiakmichal-frackowiak user info (with buddy icon)

Social bookmarking

It is easy to add "social bookmarking" buttons to your pages — just write [[social]] (without any parameters) and get:

BlinkListblogmarksdel.icio.usdiggFarkfeedmelinksFurlLinkaGoGoNewsVineNetvouzRedditYahooMyWebFacebook

This is equivalent to:

[[social blinkbits,blinklist,blogmarks,co.mments,connotea,del.icio.us,de.lirio.us,digg,fark,feedmelinks,furl,linkagogo,ma.gnolia,newsvine,netvouz,rawsugar,reddit,scuttle,shadows,simpy,smarking,spurl,tailrank,wists,yahoomyweb,facebook]]

You can also choose only selected services, e.g. to choose digg, furl and del.icio.us use:

[[social digg,furl,del.icio.us,facebook]]

and get: diggFurldel.icio.usFacebook

Tip: use social bookmarking! It is always a good idea to put social shortcuts under an article or inside your side bar.

Botões individuais (opções de página)

Somehow it might be convenient to hide the default page options and present only selected buttons to the users. The syntax for it is:

[[button type options]]

Where the type is: edit, edit-append, edit-sections, history, print, files, tags, source (view page source), backlinks, talk (works similar as in MediaWiki/Wikipedia).

Possible attributes are:

  • text — alternative text to be displayed
  • class — CSS class of the A element
  • style — CSS style definition

For some nice "view source" and "print" buttons with icons you can use the following code:

[[>]]
[[button source style="background-image: url(http://www.wikidot.com/local--files/files/view-source.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px; color: #444"]]
[[button print style="background-image: url(http://www.wikidot.com/local--files/files/document-print.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;color: #444"]]
[[/>]]

to get:

Elementos de layout

Tabulados

Para gera um tabview, isto é, um conjunto de tabs, use a seguinte sintaxe:

[[tabview]]
[[tab Título do tab 1]]
Conteúdo do tab 1.
[[/tab]]
[[tab Título do tab 2]]
Conteúdo do tab 2.
[[/tab]]
[[tab Título do tab 3]]
Conteúdo do tab 3.
[[/tab]]
[[/tabview]]

Este código irá produzir o seguinte tabulado:

Conteúdo do tab 1.

Os tabs aceitam qualquer tipo de conteúdo, mas não é possível fazer tabs aninhados.

Outros exemplos tabview podem ser encontrados no Snippets Wiki em http://snippets.wikidot.com/code:tabs.


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License