FANDOM


移動化訊息框包括很多種你可以選用的標籤,讓訊息框變成你想要的樣子。以下我們列出所有標準標籤,並提供wiki文本的例子以及其HTML輸出,讓你比較容易確認想要使用的標籤,以及如何設定它的CSS外觀。(另參見help:移動化訊息框/CSS

所有訊息框欄位都應使用XML規則,使用欄位中的配置屬性

基本标签

infobox

属性
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
子标签
  • title
  • image
  • header
  • navigation
  • data
  • group

這個標籤是用來包括其他標籤,並劃定訊息框的範圍。

输入 输出
<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

属性
  • source
子标签
  • default
  • format

呈现讯息框标题。标题标签中的图像并不会在手机中显示。[1].

输入 输出
<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

data

属性
  • source
  • span
  • layout
子标签
  • default
  • label
  • format

標準輸入數值標籤。

输入 输出
<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>

输出修正

label

属性 None
子标签 None

Label標籤只能用於其他標籤之中,參見其他的子標籤欄位。可接受Wiki文本。

输入 输出
<label>First name</label>
<h3 class="pi-secondary-font pi-data-label">First name</h3>

default

属性 None
子标签 None

Default標籤,只能用在其他標籤之中,參見其他的子標籤欄位。可接受Wiki文本。

输入 输出
<default>John</default>
<div class="pi-font pi-data-value">John</div>

format

属性 None
子标签 None

Format標籤,只能用在其他標籤之中,參見其他的子標籤欄位。可接受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

image

属性
  • source
子标签
  • alt
  • caption
  • default

Image標籤,用於在訊息框中插入圖片。

输入 输出
<image source="image" />
<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

只能使用於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

属性
  • source
子标签
  • default
  • format

只能使用於image標籤中。

输入 输出
<image source="image">
	<caption source="caption">
		<default>My caption</default>
	</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

其他标签

group

属性
  • layout
  • show
  • collapse
  • row-items
子标签
  • data
  • header
  • image
  • title
  • navigation

用於區分欄位群組,可幫每個群組製作一個標題欄位。如果所有的欄位(除了標題欄位以外)都是空的,就不會顯示。

预设群组

输入 输出
<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

属性 None
子标签 None

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

属性 None
子标签 None

用於提供任何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>
  1. Portability Hub Office Hours, 2015-11-26