FANDOM


Hộp thông tin lưu động chứa nhiều thẻ và tùy chọn đa dạng để bạn có thể sử dụng cho việc hiển thị hộp thông tin theo cách bạn muốn. Dưới đây là danh sách các thẻ chuẩn kèm theo mã wiki mẫu và kết quả xuất ra HTML để giúp bạn dễ xác định thứ mình cần dùng, và cách thiết kế CSS (xem thêm Trợ giúp:Hộp thông tin/CSS). Lưu ýcác hàm phân tích cú pháp cũng có thể được sử dụng.

Tất cả các trường hộp thông tin nên được khai báo dưới dạng XML, với các thuộc tính được dùng để cấu hình cho trường.

Các thẻ cơ bản

infobox

Thuộc tính
  • theme
  • theme-source
  • layout
Các thẻ con
  • title
  • image
  • header
  • navigation
  • data
  • group
Đây là thẻ chứa tất cả các thẻ khác và giới hạn phạm vi của hộp thông tin.

<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">Tiêu đề</h2>
</aside>

title

Thuộc tính
  • source
Các thẻ con
  • default
  • format
Định tiêu đề của hộp thông tin. Hình ảnh sử dụng trong thẻ title sẽ không hiển thị trên di động.

<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>

<h2 class="pi-item pi-item-spacing pi-title">Tên trang</h2>

data

Thuộc tính
  • source
Các thẻ con
  • default
  • label
  • format
Thẻ dữ liêu chuẩn dạng khóa-giá trị.

<data source="tên">
	<label>Tên</label>
	<default>Bình</default>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Tên</h3>
	<div class="pi-font pi-data-value">Bình</div>
</div>


Thay đổi kết quả hiển thị

label

Thuộc tính Không có
Các thẻ con Không có
Thẻ label chỉ có thể được sử dụng trong các thẻ khác, xem cột các thẻ con để biết thêm thông tin. Nhận mã wiki.

<label>Tên</label>

<h3 class="pi-secondary-font pi-data-label">Tên</h3>

default

Thuộc tính Không có
Các thẻ con Không có
Thẻ default hiển thị văn bản mặc định khi biến không có dữ liệu, chỉ có thể sử dụng trong các thẻ khác. Nhận mã wiki.

<default>Nam</default>

<div class="pi-font pi-data-value">Nam</div>

format

Thuộc tính Không có
Các thẻ con Không có
Thẻ format chỉ có thể sử dụng trong các thẻ khác, xem cột các thẻ con để biết thêm thông tin. Nhận mã wiki.

<data source="dollars">
	<label>Giá tiền</label>
	<format>{{{vnđ}}} VNĐ</format>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Giá tiền</h3>
	<div class="pi-font pi-data-value">15.000 VNĐ</div>
</div>

Image tags

image

Thuộc tính
  • source
Các thẻ con
  • alt
  • caption
  • default
Thẻ hình ảnh được dùng để chèn hình ảnh hoặc video vào hộp thông tin. Để thiết kế kiểu cách, bạn chỉ có thể dùng CSS cộng đồng và kích thước không thể được thay đổi thủ công. Nhiều ảnh có thể được chèn cùng lúc bằng cách dùng thẻ gallery.

<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

Thuộc tính
  • source
Các thẻ con
  • default
Chỉ có thể được dùng bên trong thẻ image.

<image source="image">
	<alt source="alternative_title">
		<default>Văn bản thay thế mặc định</default>
	</alt>
</image>

<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="Văn bản thay thế mặc định">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="Văn bản thay thế mặc định" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

caption

Thuộc tính
  • source
Các thẻ con
  • default
  • format
Chỉ có thể được dùng bên trong thẻ image.

<image source="image">
	<caption source="caption">
		<default>Chú thích ảnh</default>
	</caption>
</image>

<figcaption class="pi-item-spacing pi-caption">Chú thích ảnh</figcaption>

Các thẻ khác

group

Thuộc tính
  • layout="horizontal"
  • show="incomplete"
  • collapse="open"
  • collapse="closed"
Các thẻ con
  • data
  • header
  • image
Được dùng để nhóm các trường với nhau, có thể cung cấp một tiều đề cho mỗi nhóm. Nhóm sẽ không được hiển thị (kể cả tiêu đề) khi tất cả trường trong nhóm đó đều bỏ trống. Tuy nhiên, nếu thuộc tính show="incomplete" được khai báo, tất cả trường trong nhóm sẽ hiển thị nếu có ít nhất một trường không bỏ trống.

Nhóm mặc định

<group>
	<header>Tên nhóm</header>
	<data source="gtri1" />
</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">Tên nhóm</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Giá trị dữ liệu</div>
	</div>
</section>

Nhóm hiển thị ngang

<group layout="horizontal">
	<header>Tên nhóm</header>
	<data source="gtri1">
		<label>Dữ liệu nhãn</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">Tên nhóm</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Dữ liệu nhãn</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Dữ liệu nhãn</td>
			</tr>
		</tbody>
	</table>
</section>

header

Thuộc tính Không có
Các thẻ con Không có
Thẻ header định điểm bắt đầu của một phần hoặc một nhóm các thẻ.

<header>Tiêu đề</header>

Nhóm mặc định
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Tiêu đề</h2>
Nhóm ngang
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Tiêu đề</caption>

navigation

Thuộc tính Không có
Các thẻ con Không có
Dùng để cung cấp mã wiki bất kì.

<navigation>[[Liên kết]]</navigation>

<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/Liên kết" title="Liên kết">Liên kết</a>
</nav>

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.