「利用者:Adminkoyama100/sandbox」の版間の差分

提供:八中・小山台デジタルアーカイブ
ナビゲーションに移動 検索に移動
1行目: 1行目:
== タブのデモ ==
<tabs>
<tab name="First" style="border:1px solid black;">This tab has a defined <code>name</code>. It also has a <code>style</code> attribute set to <code>style="border:1px solid black;"</code>.</tab>
<tab name="Second" style="background:salmon;">This tab also has a defined <code>name</code> attribute, and its <code>style</code> attribute set to <code>style="background:salmon;"</code>.</tab>
<tab>This tab has no attributes defined. Its name is automatically generated based on its position.</tab>
<tab index="1">This is a seperate tab. It has a defined <code>index</code> attribute with value "1". This makes it also show when the first tab is selected.</tab>
<tab name="Second">This is a seperate tab. It has a defined <code>name</code> attribute, with a value equal to that of the second tab ("Second"). It therefore also shows when the second tab is opened.</tab>
----
This line of text will show for every tab you view. It is not placed within <code><tab> tags, and can be used as default content for the tab menu.
</tabs>
<br>
<br>
<br>
<br>
For example, this will not work:
For example, this will not work:



2022年3月21日 (月) 10:24時点における版

タブのデモ

This tab has a defined name. It also has a style attribute set to style="border:1px solid black;".
This tab also has a defined name attribute, and its style attribute set to style="background:salmon;".
This tab has no attributes defined. Its name is automatically generated based on its position.
This is a seperate tab. It has a defined index attribute with value "1". This makes it also show when the first tab is selected.
This is a seperate tab. It has a defined name attribute, with a value equal to that of the second tab ("Second"). It therefore also shows when the second tab is opened.

This line of text will show for every tab you view. It is not placed within <tab> tags, and can be used as default content for the tab menu.





For example, this will not work:

Foo
Bar




But this will work:

と言うが機能していないようだ。
Foo
Bar




Toggle box demos

Plain toggle box

<tab>This toggle box has no attributes assigned to it.</tab>
This toggle box has no attributes assigned to it.

Toggle box attributes

<tab collapsed openname="Toggle" style="font-weight:bold;width:500px;" container="font-style:italic;" title="Example tooltip">
This toggle box has the following attributes defined:
*<code>collapsed</code> - By default, it is closed.
*<code>openname="Toggle"</code> - The label will show "Toggle" when it can be clicked to open the box. Since no <code>closename</code> attribute is defined, it defaults to "Toggle" too.
*<code>style="font-weight:bold;width:500px;"</code> - The whole toggle box will be bold, and have a width of 500px.
*<code>container="font-style:italic;"</code> - Only the contents of the toggle box will be italic.
*<code>title="Example tooltip"</code> - The tooltip that shows when hovering over this tab is defined via the <code>title</code> attribute.
</tab>

This toggle box has the following attributes defined:

  • collapsed - By default, it is closed.
  • openname="Toggle" - The label will show "Toggle" when it can be clicked to open the box. Since no closename attribute is defined, it defaults to "Toggle" too.
  • style="font-weight:bold;width:500px;" - The whole toggle box will be bold, and have a width of 500px.
  • container="font-style:italic;" - Only the contents of the toggle box will be italic.
  • title="Example tooltip" - The tooltip that shows when hovering over this tab is defined via the title attribute.

Inline toggle boxes

<tab inline collapsed openname="Show" closename="Hide">

Here is an example of an inline toggle box.

This togglebox is inline and collapsed

This toggle box has the attributes openname="Show" and closename="Hide" to change the default label text.