Ohje:Tietolaatikot/Tunnisteet

Kannettaviin tietolaatikoihin sisältyy laaja valikoima tunnisteita ja vaihtoehtoja, joita voit käyttää saadaksesi tietolaatikon näkymään niin kuin haluan. Alla ovat luetetuina kaikki tavalliset tunnisteet, wikitekstinäytteiden ja HTML-tulosteiden kera, auttaaksemme sinua näkemään mitä sinun tarvitsee käyttää, ja miten antaa sille CSS-muodonmuutoksen (katso myös Ohje:Tietolaatikot/CSS). Huomaa, että jäsennysfunktioita voi myös käyttää.

Kaikki tietolaatikon kentät pitäisi määrittää käyttämällä XML-sopimuksia ja kenttäkonfigurointiin käytettyjä attribuutteja^[1].

Perustunnisteet[]

`infobox`[]

Attribuutit	`theme` `theme-source` `layout` `accent-color-source` `accent-color-text-source` `accent-color-default` `accent-color-text-default`
Lapsitunnisteet	`title` `image` `header` `navigation` `data` `group`

Tunniste, joka sisältää kaikki muut ja rajaa tietolaatikon laajuutta.

Syöte	Tuloste
<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`[]

Attribuutit	`source`
Lapsitunnisteet	`default` `format`

Määrittää tietolaatikon otsikon. title-tunnisteissa käytetttävät kuvat eivät näy mobiiliversiossa.^[2]

Syöte	Tuloste
<title source="title_source"> <default>{{PAGENAME}}</default> </title>	<h2 class="pi-item pi-item-spacing pi-title">Sivun nimi</h2>

`data`[]

Attribuutit	`source` `span` `layout`
Lapsitunnisteet	`default` `label` `format`

Tavallinen avainarvotunniste.

Syöte

Tuloste

<data source="name">
	<label>Etunimi</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">Etunimi</h3>
	<div class="pi-font pi-data-value">John</div>
</div>

Tulosteen muokkaajat[]

`label`[]

Attribuutit	None
Lapsitunnisteet	None

Nimiketunniste, voidaan käyttää vain muiden tunnisteiden sisällä, tarkistaa lapsitunnisteen sarakkeen lisätietojen saamiseksi. Hyväksyy wikitekstin.

Syöte	Tuloste
<label>First name</label>	<h3 class="pi-secondary-font pi-data-label">Etunimi</h3>

`default`[]

Attribuutit	Ei ole
Lapsitunnisteet	Ei ole

Oletustunniste näyttää tekstiä vain jos on dataa, voidaan käyttää vain muiden tunnisteiden sisällä, tarkistaa lapsitunnisteiden sarakkeen lisätietojen saamiseksi. Hyväksyy wikitekstin.

Syöte	Tuloste
<default>John</default>	<div class="pi-font pi-data-value">John</div>

`format`[]

Attribuutit	Ei ole
Lapsitunnisteet	Ei ole

Muotoilutunniste, voidaan käyttää vain muiden tunnisteiden sisällä, tarkistaa lapsitunnisteiden sarakkeen lisätietojen saamiseksi. Hyväksyy wikitekstin.

Syöte

Tuloste

<data source="dollars">
	<label>Normaalihinta</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">Normaalihinta</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

Kuvatunnisteet[]

`image`[]

Attribuutit	`source`
Lapsitunnisteet	`alt` `caption` `default`

|Kuvatunniste, käytetään lisäämään kuva tietolaatikon sisään. Sen tyyliä voi mukauttaa vain käyttämällä yhteisön CSS-koodia. Useamman kuvan voi lisätä käyttämällä galleriatunnistetta.

Täällä on käytetty oletustunnistetta määrittämään mitä kuvaa käytetään, jos artikkeliin ei ole valittu kuvaa. Esimerkiksi, <default>Example.jpg</default>.

Syöte

Tuloste

<image source="image" />

<figure class="pi-item pi-image">
	<a href=".../Tiedosto: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`[]

Attribuutit	`source`
Lapsitunniste	`default`

Voidaan käyttää vain kuvatunnisteen sisällä.

Syöte

Tuloste

<image source="image">
	<alt source="alternative_title">
		<default>Default alt text</default>
	</alt>
</image>

<figure class="pi-item pi-image">
	<a href=".../Tiedosto: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`[]

Attribuutit	`source`
Lapsitunnisteet	`default` `format`

Voidaan käyttää vain kuvatunnisteen sisällä.

Syöte	Tunniste
<image source="image"> <caption source="caption"> <default>Kuvatekstini</default> </caption> </image>	<figcaption class="pi-item-spacing pi-caption">Kuvatekstini</figcaption>

Muut tunnisteet[]

`group`[]

Attribuutit	`layout` `show` `collapse` `row-items`
Lapsitunnisteet	`data` `header` `image` `title` `navigation`

Käytetään kenttien ryhmitykseen, voi antamaan otsikon jokaiselle ryhmälle. Ryhmää ei rendeerata (edes otsikkoa), jos kaikki kentät ovat tyhjiä. Kuitenkin, jos käytössä on attribuutti "show=incomplete", se näyttää kaikki ryhmän kentät, jos vähintään yksi kenttä ei ole tyhjä.

Oletusryhmä[]

Syöte

Tuloste

<group>
	<header>Ryhmän nimi</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>

Vaakasuora ryhmä[]

Syöte

Tuloste

<group layout="horizontal">
	<header>Ryhmän nimi</header>
	<data source="value1">
		<label>Tietonimike</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">Ryhmän nimi</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Tietonimike</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>

Älykäs ryhmä[]

Syöte

Tuloste

<group row-items="3">
    <header>Otsikkoteksti</header>
    <data source="row3">
      <label>Tietonimike</label>
    </data>
    <data source="row4">
      <label>Tietonimike </label>
    </data>
    <data source="row5">
      <label>Tietonimike </label>
    </data>
    <data source="row6">
      <label>Tietonimike </label>
    </data>
    <data source="row7">
      <label>Tietonimike </label>
    </data>
    <data source="row8" layout="default">
      <label>Tietonimike </label>
    </data>
    <data source="row9" layout="default">
      <label>Tietonimike </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%);">Tietonimike </h3>
            
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Tietonimike </h3>
            
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Tietonimike </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%);">Tietonimike </h3>
            
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Tietonimike </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">Tietonimike </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">Tietonimike </h3>
	
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

`header`[]

Attribuutit	Ei ole
Lapsitunnisteet	Ei ole

Otsikkotunniste merkitsee tunnisteryhmän tai -osion alkua.

Input

Output

<header>Otsikkoteksti</header>

Oletusryhmä

<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Otsikkoteksti</h2>

Vaakasuora ryhmä

<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Otsikkoteksti</caption>

`navigation`[]

Attribuutit	None
Lapsitunnisteet	None

Käytetään minkä tahansa wikitekstin toimittamiseen.

Syöte	Tunniste
<navigation>[[Linkki]]</navigation>	<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation"> <a href="/wiki/Link" title="Link">Link</a> </nav>

Viitteet[]

[1] Wikibooks xml introduction

[2] Portability Hub Office Hours, 26.11.2015

[1]

[2]

Ohje:Tietolaatikot/Tunnisteet

Sisällys

Perustunnisteet[]

`infobox`[]

`title`[]

`data`[]

Tulosteen muokkaajat[]

`label`[]

`default`[]

`format`[]

Kuvatunnisteet[]

`image`[]

`alt`[]

`caption`[]

Muut tunnisteet[]

`group`[]

Oletusryhmä[]

Vaakasuora ryhmä[]

Älykäs ryhmä[]

`header`[]

`navigation`[]

Viitteet[]

Fan Feed

Ohje:Tietolaatikot/Tunnisteet

Perustunnisteet[]

infobox[]

title[]

data[]

Tulosteen muokkaajat[]

label[]

default[]

format[]

Kuvatunnisteet[]

image[]

alt[]

caption[]

Muut tunnisteet[]

group[]

Oletusryhmä[]

Vaakasuora ryhmä[]

Älykäs ryhmä[]

header[]

navigation[]

Viitteet[]

Fan Feed

`infobox`[]

`title`[]

`data`[]

`label`[]

`default`[]

`format`[]

`image`[]

`alt`[]

`caption`[]

`group`[]

`header`[]

`navigation`[]