mNo edit summary Tags: Help sourceedit |
(+ja) Tag: sourceedit |
||
| Line 278: | Line 278: | ||
[[fr:Aide:Infoboxes_portables/wikitexte]] |
[[fr:Aide:Infoboxes_portables/wikitexte]] |
||
[[zh:Help:移動化訊息框/標籤]] |
[[zh:Help:移動化訊息框/標籤]] |
||
| + | [[ja:ヘルプ:ポータブル・インフォボックス/タグ]] |
||
Revision as of 23:49, 31 August 2015
Portable infoboxes include a wide variety of tags and options that you can use to make the infobox display how you want. Below we have listed all the standard tags, with sample wikitext and output HTML , to help you identify what you need to use, and how to give it a CSS makeover (see also Help:PortableInfoboxes/CSS).
All infobox fields should be declared using XML convention, with attributes used for field configuration[1].
Available tags
| Tag | Attributes | Child tags | Description |
|---|---|---|---|
| infobox | theme, theme-source, layout | title, image, header, navigation, data, group | The tag which holds all others and delimits the scope of the infobox |
Usage example:
<infobox> <title source="title_source" /> </infobox> HTML output: <aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default"> <h2 class="pi-item pi-item-spacing pi-title">Title</h2> </aside> | |||
| data | source | default, label, format | Standard key value tag |
Usage example:
<data source="name"> <label>First name</label> <default>John</default> </data> HTML output: <div class="pi-item pi-item-spacing pi-data pi-border-color"> <h3 class="pi-secondary-font pi-data-label">First name</h3> <div class="pi-font pi-data-value">John</div> </div> | |||
| label | N/A | N/A | Label tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext. |
Usage example:
<label>First name</label> HTML output: <h3 class="pi-secondary-font pi-data-label">First name</h3> | |||
| default | N/A | N/A | Default tag shows text when data, can be used only inside other tags, check child tags column for more info. Accepts wikitext. |
Usage example:
<default>John</default> HTML output: <div class="pi-font pi-data-value">John</div> | |||
| format | N/A | N/A | Format tag, can be used only inside other tags, check child tags column for more info. Accepts wikitext. |
Usage example:
<data source="dollars">
<label>Regular price</label>
<format>{{{dollars}}}$</format>
</data>
HTML output: <div class="pi-item pi-item-spacing pi-data pi-border-color"> <h3 class="pi-secondary-font pi-data-label">Regular price</h3> <div class="pi-font pi-data-value">15$</div> </div> | |||
| title | source | default, format | Should be used only once per infobox, states infobox title. |
Usage example:
<title source="title_source">
<default>{{PAGENAME}}</default>
</title>
HTML output: <h2 class="pi-item pi-item-spacing pi-title">Page name</h2> | |||
| image | source | alt, caption, default | Image tag, used to insert an image inside an infobox. It can only be styled using the community's CSS. |
Usage example:
<image source="img_name" /> HTML output: <figure class="pi-item pi-image"> <a href=".../File:Image.jpg" class="image image-thumbnail" title=""> <img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg"> </a> </figure> | |||
| alt | source | default | Can be used only inside image tag. |
Usage example:
<image source="image"> <alt source="alternative_title"> <default>Default alt text</default> </alt> </image> HTML output: <figure class="pi-item pi-image"> <a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text"> <img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg"> </a> </figure> | |||
| caption | source | default, format | Can be used only inside image tag. |
Usage example:
<image source="image"> <caption source="caption"> <default>My caption</default> </caption> </image> HTML output: <figcaption class="pi-item-spacing pi-caption">My caption</figcaption> | |||
| group | layout, show="incomplete" | data, header, image | Used for grouping fields, can provide header for each group. Group won't be rendered (including header) when all fields are empty. However, if the attribute "show=incomplete" is used, it will render all of the group's fields if at least one field is not empty. |
Usage example: <group> <header>Group name</header> <data source="value1" /> </group> HTML output: <section class="pi-item pi-group pi-border-color"> <h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2> <div class="pi-item pi-item-spacing pi-data pi-border-color"> <div class="pi-font pi-data-value">Data value</div> </div> </section>
<group layout="horizontal"> <header>Group name</header> <data source="value1"><label>Data label</label></data> </group> HTML output: | |||
| header | N/A | N/A | Header tag denotes the beginning of a section or group of tags. |
Usage example:
<header>Header Text</header> HTML output (default group layout): <h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2> HTML output (horizontal group layout): <caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Text</caption> | |||
| navigation | N/A | N/A | Used for providing any wikitext. |
Usage example:
<navigation>[[Link]]</navigation> HTML output: <nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation"> <a href="/wiki/Link" title="Link">Link</a> </nav> | |||