「利用者:Adminkoyama100/sandbox」の版間の差分
Adminkoyama100 (トーク | 投稿記録) 編集の要約なし |
Adminkoyama100 (トーク | 投稿記録) 編集の要約なし |
||
| 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時点における版
タブのデモ
<tabs>
<tab name="First" style="border:1px solid black;">This tab has a defined name. It also has a style attribute set to style="border:1px solid black;".</tab>
<tab name="Second" style="background:salmon;">This tab also has a defined name attribute, and its style attribute set to style="background:salmon;".</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 index 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 name 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 <tab> tags, and can be used as default content for the tab menu.
</tabs>
For example, this will not work:
<tabs style="color:red">
<tab name="">Foo</tab>
<tab name="">Bar</tab>
</tabs>
But this will work:
- と言うが機能していないようだ。
<tabs style="color:red">
<tab name="">Foo</tab>
{{#tab:|Bar}}
</tabs>
Toggle box demos
Plain toggle box
<tab openname="Show code" closename="Hide code" collapsed block style="max-width:100%;">
<tab>This toggle box has no attributes assigned to it.</tab>
</tab>
<tab>This toggle box has no attributes assigned to it.</tab>
Toggle box attributes
<tab openname="Show code" closename="Hide code" collapsed block style="max-width:100%;">
<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>
</tab>
<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:
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.
</tab>
Inline toggle boxes
<tab openname="Show code" closename="Hide code" collapsed block style="max-width:100%;">
<tab inline collapsed openname="Show" closename="Hide">
</tab>
Here is an example of an inline toggle box. <tab inline collapsed openname="Show" closename="Hide">This togglebox is inline and collapsed</tab> This toggle box has the attributes openname="Show" and closename="Hide" to change the default label text.