移動化訊息框 help:移動化訊息框/CSS
所有訊息框欄位都應使用XML規則，使用欄位中的配置屬性
基本标签 infobox
属性
themetheme-sourcelayoutaccent-color-sourceaccent-color-text-sourceaccent-color-defaultaccent-color-text-default
子标签
titleimageheadernavigationdatagroup
這個標籤是用來包括其他標籤，並劃定訊息框的範圍。
输入
输出
<infobox>
<title source= "title_source" />
</infobox>
< aside class = "portable-infobox pi-background pi-theme-wikia pi-layout-default" >
< h2 class = "pi-item pi-item-spacing pi-title" > Title</ h2 >
</ aside >
title呈现讯息框标题。标题标签中的图像并不会在手机中显示。[1]
输入
输出
<title source= "title_source" >
<default> {{PAGENAME}}</default>
</title>
< h2 class = "pi-item pi-item-spacing pi-title" > Page name</ h2 >
data標準輸入數值標籤。
输入
输出
<data source= "name" >
<label> First name</label>
<default> John</default>
</data>
< 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 >
输出修正 labelLabel標籤只能用於其他標籤之中，參見其他的子標籤欄位。可接受Wiki文本。
输入
输出
<label> First name</label>
< h3 class = "pi-secondary-font pi-data-label" > First name</ h3 >
defaultDefault標籤，只能用在其他標籤之中，參見其他的子標籤欄位。可接受Wiki文本。
输入
输出
< div class = "pi-font pi-data-value" > John</ div >
formatFormat標籤，只能用在其他標籤之中，參見其他的子標籤欄位。可接受Wiki文本。
输入
输出
<data source= "dollars" >
<label> Regular price</label>
<format> ${{{dollars}}}</format>
</data>
< 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 >
Image tags imageImage標籤，用於在訊息框中插入圖片。
输入
输出
< 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只能使用於image標籤中。
输入
输出
<image source= "image" >
<alt source= "alternative_title" >
<default> Default alt text</default>
</alt>
</image>
< 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只能使用於image標籤中。
输入
输出
<image source= "image" >
<caption source= "caption" >
<default> My caption</default>
</caption>
</image>
< figcaption class = "pi-item-spacing pi-caption" > My caption</ figcaption >
其他标签 group
属性
layoutshowcollapserow-items
子标签
dataheaderimagetitlenavigation
用於區分欄位群組，可幫每個群組製作一個標題欄位。如果所有的欄位（除了標題欄位以外）都是空的，就不會顯示。
预设群组
输入
输出
<group>
<header> Group name</header>
<data source= "value1" />
</group>
< 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>
< section class = "pi-item pi-group pi-border-color" >
< table class = "pi-horizontal-group" >
< caption class = "pi-secondary-font pi-secondary-background pi-item-spacing pi-header" > Group name</ caption >
< thead >
< tr >
< th class = "pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing" > Data label</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td class = "pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing" > Data value</ td >
</ tr >
</ tbody >
</ table >
</ section >
智能群组
输入
输出
<group row-items= "3" >
<header> Section Header</header>
<data source= "row3" >
<label> Label</label>
</data>
<data source= "row4" >
<label> Label</label>
</data>
<data source= "row5" >
<label> Label</label>
</data>
<data source= "row6" >
<label> Label</label>
</data>
<data source= "row7" >
<label> Label</label>
</data>
<data source= "row8" layout= "default" >
<label> Label</label>
</data>
<data source= "row9" layout= "default" >
<label> Label</label>
</data>
</group>
< section class = "pi-item pi-group pi-border-color" >< h2 class = "pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background" > Section Header</ h2 >
< section class = "pi-item pi-smart-group pi-border-color" >
< section class = "pi-smart-group-head" >
< h3 class = "pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style = "width: calc(1 / 3 * 100%);" > Label</ h3 >
< h3 class = "pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style = "width: calc(1 / 3 * 100%);" > Label</ h3 >
< h3 class = "pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style = "width: calc(1 / 3 * 100%);" > Label</ h3 >
</ section >
< section class = "pi-smart-group-body" >
< div class = "pi-smart-data-value pi-data-value pi-font pi-item-spacing" style = "width: calc(1 / 3 * 100%);" > CCC</ div >
< div class = "pi-smart-data-value pi-data-value pi-font pi-item-spacing" style = "width: calc(1 / 3 * 100%);" > DDD</ div >
< div class = "pi-smart-data-value pi-data-value pi-font pi-item-spacing" style = "width: calc(1 / 3 * 100%);" > EEE</ div >
</ section >
</ section >
< section class = "pi-item pi-smart-group pi-border-color" >
< section class = "pi-smart-group-head" >
< h3 class = "pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style = "width: calc(1 / 2 * 100%);" > Label</ h3 >
< h3 class = "pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style = "width: calc(1 / 2 * 100%);" > Label</ h3 >
</ section >
< section class = "pi-smart-group-body" >
< div class = "pi-smart-data-value pi-data-value pi-font pi-item-spacing" style = "width: calc(1 / 2 * 100%);" > FFF</ div >
< div class = "pi-smart-data-value pi-data-value pi-font pi-item-spacing" style = "width: calc(1 / 2 * 100%);" > GGG</ div >
</ section >
</ section >
< div class = "pi-item pi-data pi-item-spacing pi-border-color" >
< h3 class = "pi-data-label pi-secondary-font" > Label</ h3 >
< div class = "pi-data-value pi-font" > HHH</ div >
</ div >
< div class = "pi-item pi-data pi-item-spacing pi-border-color" >
< h3 class = "pi-data-label pi-secondary-font" > Label</ h3 >
< div class = "pi-data-value pi-font" > III</ div >
</ div >
</ section >
Header標籤用來標注段落或標籤群組的開始。
输入
输出
<header> Header Text</header>
Default group < h2 class = "pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header" > Header Text</ h2 >
Horizontal group
< caption class = "pi-secondary-font pi-secondary-background pi-item-spacing pi-header" > Header Text</ caption >
navigation用於提供任何wiki文本.
输入
输出
<navigation> [[Link]]</navigation>
< nav class = "pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation" >
< a href = "/wiki/Link" title = "Link" > Link</ a >
</ nav >
