This is a documentation for Board Game Arena: play board games online !
模板:InfoBox:修订间差异
跳到导航
跳到搜索
(创建页面,内容为“<div style="float:{{{float|none}}};clear:both;display:flex;margin:8px;"><div class="mw-collapsible mw-{{{state|}}}" style="display:flex;flex-flow:column wrap;min-width:{{{minWidth|}}};max-width:{{{maxWidth|600}}}px;border-radius:{{{corner|0.5}}}rem;background:{{{color|linear-gradient(to bottom right,{{{colorA|#c00}}},{{{colorB|#703}}},{{{colorC|#307}}})}}};"><div class="mw-collapsible-toggle" style="box-sizing:border-box;width:100%;padding:0.5rem;text-align:{{{…”) |
无编辑摘要 |
||
第1行: | 第1行: | ||
<div style="float:{{{float|none}}};clear:both;display:flex;margin:8px;"><div class="mw-collapsible mw-{{{state|}}}" style="display:flex;flex-flow:column wrap;min-width:{{{minWidth|}}};max-width:{{{maxWidth|600}}}px;border-radius:{{{corner|0.5}}}rem;background:{{{color|linear-gradient(to bottom right,{{{colorA|#c00}}},{{{colorB|#703}}},{{{colorC|#307}}})}}};"><div class="mw-collapsible-toggle" style="box-sizing:border-box;width:100%;padding:0.5rem;text-align:{{{titleAlign|center}}};color:{{{titleColor|#fff}}};font-weight:bold;overflow-wrap:break-word;hyphens:auto;"><span> | <div style="float:{{{float|none}}};clear:both;display:flex;margin:8px;"><div class="mw-collapsible mw-{{{state|}}}" style="display:flex;flex-flow:column wrap;min-width:{{{minWidth|}}};max-width:{{{maxWidth|600}}}px;border-radius:{{{corner|0.5}}}rem;background:{{{color|linear-gradient(to bottom right,{{{colorA|#c00}}},{{{colorB|#703}}},{{{colorC|#307}}})}}};"><div class="mw-collapsible-toggle" style="box-sizing:border-box;width:100%;padding:0.5rem;text-align:{{{titleAlign|center}}};color:{{{titleColor|#fff}}};font-weight:bold;overflow-wrap:break-word;hyphens:auto;"><span>【标题】</span></div><div class="mw-collapsible-content" style="box-sizing:border-box;width:calc(100% - 0.5rem);margin:0 0.25rem 0.25rem;padding:0.25rem;border-radius:calc({{{corner|0.5}}}rem - 0.25rem);background:{{{bodyBgColor|#fffc}}};color:{{{bodyColor|#202122}}};overflow-wrap:break-word;hyphens:auto;"><span>【内文】</span></div></div></div><noinclude> | ||
使用InfoBox时,你需要在页面中输入: | |||
<pre> | <pre> | ||
{{infoBox | {{infoBox | ||
第9行: | 第9行: | ||
</pre> | </pre> | ||
一个InfoBox包含一个标题(Title)和一个内容(Body)。 | |||
== | == 参数 == | ||
<div style="display:grid;grid-template-columns:repeat(4,max-content) 1fr;gap:0 0.25rem;overflow:auto;text-overflow:ellipsis;"> | <div style="display:grid;grid-template-columns:repeat(4,max-content) 1fr;gap:0 0.25rem;overflow:auto;text-overflow:ellipsis;"> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">参数名</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">预设值</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">例子</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">结果</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">介绍</div> | ||
<div><code>title</code></div> | <div><code>title</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBox |title=Example}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |title=Example}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example}}</div> | <div>{{infoBox |title=Example}}</div> | ||
<div> | <div>定义标题</div> | ||
<div><code>body</code></div> | <div><code>body</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBox |body=Body content}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |body=Body content}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content}}</div> | <div>{{infoBox |title=Example |body=Body content}}</div> | ||
<div> | <div>定义内文</div> | ||
<div><code>state</code></div> | <div><code>state</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBox |state=collapsed}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |state=collapsed}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |state=collapsed}}</div> | <div>{{infoBox |title=Example |body=Body content |state=collapsed}}</div> | ||
<div>''''' | <div>'''''可选:''''' 默认折叠</div> | ||
<div><code>float</code></div> | <div><code>float</code></div> | ||
<div><code>none</code></div> | <div><code>none</code></div> | ||
<div><code><nowiki>{{infoBox |float=right}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |float=right}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |float=right}}</div> | <div>{{infoBox |title=Example |body=Body content |float=right}}</div> | ||
<div>''''' | <div>'''''可选:''''' 置左 <code>left</code> 或置右 <code>right</code> ,允许被文字包围。</div> | ||
<div><code>minWidth</code></div> | <div><code>minWidth</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBox |minWidth=100%}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |minWidth=100%}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |minWidth=100%}}</div> | <div>{{infoBox |title=Example |body=Body content |minWidth=100%}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以[https://developer.mozilla.org/en-US/docs/Web/CSS/length CSS宽度]定义最少宽度 e.g. <code>500px</code>.</div> | ||
<div><code>maxWidth</code></div> | <div><code>maxWidth</code></div> | ||
<div><code>600</code></div> | <div><code>600</code></div> | ||
<div><code><nowiki>{{infoBox |maxWidth=80}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |maxWidth=80}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |maxWidth=80}}</div> | <div>{{infoBox |title=Example |body=Body content |maxWidth=80}}</div> | ||
<div>''''' | <div>'''''可选:''''' 定义最大宽度 | ||
'''''Tip:''''' | '''''Tip:''''' 使用<code><nowiki>{{infoBox |maxWidth=}}</nowiki></code> (留空)取消宽度限制</div> | ||
<div><code>color</code></div> | <div><code>color</code></div> | ||
<div><pre>linear-gradient( | <div><pre>linear-gradient( | ||
第60行: | 第60行: | ||
<div><code><nowiki>{{infoBox |color=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |color=green}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |color=green}}</div> | <div>{{infoBox |title=Example |body=Body content |color=green}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义框的单色 e.g. <code>green</code>.</div> | ||
<div><code>colorA</code></div> | <div><code>colorA</code></div> | ||
<div><code>#c00</code> (red)</div> | <div><code>#c00</code> (red)</div> | ||
<div><code><nowiki>{{infoBox |colorA=lightgreen}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |colorA=lightgreen}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |colorA=lightgreen}}</div> | <div>{{infoBox |title=Example |body=Body content |colorA=lightgreen}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义框在渐变中的左上色 e.g. <code>green</code>.</div> | ||
<div><code>colorB</code></div> | <div><code>colorB</code></div> | ||
<div><code>#703</code> (dark pink)</div> | <div><code>#703</code> (dark pink)</div> | ||
<div><code><nowiki>{{infoBox |colorB=lightgreen}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |colorB=lightgreen}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |colorB=lightgreen}}</div> | <div>{{infoBox |title=Example |body=Body content |colorB=lightgreen}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义框在渐变中的中间色 e.g. <code>green</code>.</div> | ||
<div><code>colorC</code></div> | <div><code>colorC</code></div> | ||
<div><code>#307</code> (dark blue)</div> | <div><code>#307</code> (dark blue)</div> | ||
<div><code><nowiki>{{infoBox |colorC=lightgreen}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |colorC=lightgreen}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |colorC=lightgreen}}</div> | <div>{{infoBox |title=Example |body=Body content |colorC=lightgreen}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义框在渐变中的右下色 e.g. <code>green</code>.</div> | ||
<div><code>bodyBgColor</code></div> | <div><code>bodyBgColor</code></div> | ||
<div><code>#fffc</code> (translucent white)</div> | <div><code>#fffc</code> (translucent white)</div> | ||
<div><code><nowiki>{{infoBox |bodyBgColor=lightgreen}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |bodyBgColor=lightgreen}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |bodyBgColor=lightgreen}}</div> | <div>{{infoBox |title=Example |body=Body content |bodyBgColor=lightgreen}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义框内文背景色 e.g. <code>green</code>.</div> | ||
<div><code>titleColor</code></div> | <div><code>titleColor</code></div> | ||
<div><code>#fff</code> (white)</div> | <div><code>#fff</code> (white)</div> | ||
<div><code><nowiki>{{infoBox |titleColor=lightgreen}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |titleColor=lightgreen}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |titleColor=lightgreen}}</div> | <div>{{infoBox |title=Example |body=Body content |titleColor=lightgreen}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义标题文字颜色 e.g. <code>green</code>.</div> | ||
<div><code>bodyColor</code></div> | <div><code>bodyColor</code></div> | ||
<div><code>#202122</code> (black)</div> | <div><code>#202122</code> (black)</div> | ||
<div><code><nowiki>{{infoBox |bodyColor=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |bodyColor=green}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |bodyColor=green}}</div> | <div>{{infoBox |title=Example |body=Body content |bodyColor=green}}</div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义标题文字颜色 e.g. <code>green</code>.</div> | ||
<div><code>titleAlign</code></div> | <div><code>titleAlign</code></div> | ||
<div><code>center</code></div> | <div><code>center</code></div> | ||
<div><code><nowiki>{{infoBox |titleAlign=left}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |titleAlign=left}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |titleAlign=left}}</div> | <div>{{infoBox |title=Example |body=Body content |titleAlign=left}}</div> | ||
<div>''''' | <div>'''''可选:''''' 定义标题置左<code>left</code>或右<code>right</code></div> | ||
<div><code>corner</code></div> | <div><code>corner</code></div> | ||
<div><code>0.5</code></div> | <div><code>0.5</code></div> | ||
<div><code><nowiki>{{infoBox |corner=1}}</nowiki></code></div> | <div><code><nowiki>{{infoBox |corner=1}}</nowiki></code></div> | ||
<div>{{infoBox |title=Example |body=Body content |corner=1}}</div> | <div>{{infoBox |title=Example |body=Body content |corner=1}}</div> | ||
<div>''''' | <div>'''''可选:''''' 定义圆角px</div> | ||
</div> | </div> | ||
---- | ---- | ||
{{infoBoxes}} | {{infoBoxes}} | ||
要使用2个InfoBoxes在一起时,输入 | |||
<pre> | <pre> | ||
{{infoBoxes | {{infoBoxes | ||
|title1= | |title1=例子1 | ||
|body1= | |body1= | ||
|title2= | |title2=例子2 | ||
|body2= | |body2= | ||
}} | }} | ||
</pre> | </pre> | ||
== 新增参数 == | |||
== | |||
<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | <div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">参数名</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">预设值</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">例子</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">介绍</div> | ||
<div><code>title'''#'''</code></div> | <div><code>title'''#'''</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBoxes |title2=Example}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |title2=Example}}</nowiki></code></div> | ||
<div>''''' | <div>'''''可选:''''' 定义标题</div> | ||
<div><code>body'''#'''</code></div> | <div><code>body'''#'''</code></div> | ||
<div><code>null</code></div> | <div><code>null</code></div> | ||
<div><code><nowiki>{{infoBoxes |body2=Body content}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |body2=Body content}}</nowiki></code></div> | ||
<div>''''' | <div>'''''可选:''''' 定义内文</div> | ||
<div><code>color'''#'''</code></div> | <div><code>color'''#'''</code></div> | ||
<div><code>linear-gradient</code></div> | <div><code>linear-gradient</code></div> | ||
<div><code><nowiki>{{infoBoxes |color2=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |color2=green}}</nowiki></code></div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义两个框的单色,例如 <code>green</code>.</div> | ||
<div><code>colorD</code></div> | <div><code>colorD</code></div> | ||
<div><code>#00c</code> (blue)</div> | <div><code>#00c</code> (blue)</div> | ||
<div><code><nowiki>{{infoBoxes |colorD=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |colorD=green}}</nowiki></code></div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义右框的右下角颜色 e.g. <code>green</code>.</div> | ||
<div><code>title'''#'''color</code></div> | <div><code>title'''#'''color</code></div> | ||
<div><code>#fff</code></div> | <div><code>#fff</code></div> | ||
<div><code><nowiki>{{infoBoxes |title2Color=black}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes |title2Color=black}}</nowiki></code></div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义标题文字颜色 e.g. <code>green</code>.</div> | ||
</div> | </div> | ||
第150行: | 第148行: | ||
{{infoBoxes3}} | {{infoBoxes3}} | ||
要使用3个InfoBoxes在一起时,输入 | |||
<pre> | <pre> | ||
第163行: | 第161行: | ||
</pre> | </pre> | ||
== 增加参数 == | |||
== | |||
<div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | <div style="display:grid;grid-template-columns:repeat(3,max-content) 1fr;gap:1rem;overflow:auto;text-overflow:ellipsis;"> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">参数名</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">预设值</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">例子</div> | ||
<div style="font-weight:bold;width:8rem;"> | <div style="font-weight:bold;width:8rem;">介绍</div> | ||
<div><code>colorE</code></div> | <div><code>colorE</code></div> | ||
<div><code>#037</code> (dark cyan)</div> | <div><code>#037</code> (dark cyan)</div> | ||
<div><code><nowiki>{{infoBoxes3 |colorE=green}}</nowiki></code></div> | <div><code><nowiki>{{infoBoxes3 |colorE=green}}</nowiki></code></div> | ||
<div>''''' | <div>'''''可选:''''' 以 [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS颜色] 定义最右框的右下角颜色 e.g. <code>green</code> e.g. <code>green</code>.</div> | ||
</div> | </div> | ||
== English documentation == | == English documentation == | ||
* '''[en.doc.boardgamearena.com/Template:InfoBox Template:InfoBox]''' | * '''[https://en.doc.boardgamearena.com/Template:InfoBox Template:InfoBox]''' | ||
* '''[en.doc.boardgamearena.com/Wiki_formatting Formatting]''' | * '''[https://en.doc.boardgamearena.com/Wiki_formatting Formatting]''' | ||
</noinclude> | </noinclude> |
2024年7月15日 (一) 03:34的版本
【标题】
【内文】
使用InfoBox时,你需要在页面中输入:
{{infoBox |title=Example |body= }}
一个InfoBox包含一个标题(Title)和一个内容(Body)。
参数
参数名
预设值
例子
结果
介绍
title
null
{{infoBox |title=Example}}
【标题】
【内文】
定义标题
body
null
{{infoBox |body=Body content}}
【标题】
【内文】
定义内文
state
null
{{infoBox |state=collapsed}}
【标题】
【内文】
可选: 默认折叠
float
none
{{infoBox |float=right}}
【标题】
【内文】
可选: 置左
left
或置右 right
,允许被文字包围。minWidth
null
{{infoBox |minWidth=100%}}
【标题】
【内文】
可选: 以CSS宽度定义最少宽度 e.g.
500px
.maxWidth
600
{{infoBox |maxWidth=80}}
【标题】
【内文】
可选: 定义最大宽度
{{infoBox |maxWidth=}}
(留空)取消宽度限制color
linear-gradient( to bottom right, {{{colorA|#c00}}}, {{{colorB|#703}}}, {{{colorC|#307}}})
{{infoBox |color=green}}
【标题】
【内文】
可选: 以 CSS颜色 定义框的单色 e.g.
green
.colorA
#c00
(red){{infoBox |colorA=lightgreen}}
【标题】
【内文】
可选: 以 CSS颜色 定义框在渐变中的左上色 e.g.
green
.colorB
#703
(dark pink){{infoBox |colorB=lightgreen}}
【标题】
【内文】
可选: 以 CSS颜色 定义框在渐变中的中间色 e.g.
green
.colorC
#307
(dark blue){{infoBox |colorC=lightgreen}}
【标题】
【内文】
可选: 以 CSS颜色 定义框在渐变中的右下色 e.g.
green
.bodyBgColor
#fffc
(translucent white){{infoBox |bodyBgColor=lightgreen}}
【标题】
【内文】
可选: 以 CSS颜色 定义框内文背景色 e.g.
green
.titleColor
#fff
(white){{infoBox |titleColor=lightgreen}}
【标题】
【内文】
可选: 以 CSS颜色 定义标题文字颜色 e.g.
green
.bodyColor
#202122
(black){{infoBox |bodyColor=green}}
【标题】
【内文】
可选: 以 CSS颜色 定义标题文字颜色 e.g.
green
.titleAlign
center
{{infoBox |titleAlign=left}}
【标题】
【内文】
可选: 定义标题置左
left
或右right
corner
0.5
{{infoBox |corner=1}}
【标题】
【内文】
可选: 定义圆角px
【标题】
【内文】
【标题】
【内文】
要使用2个InfoBoxes在一起时,输入
{{infoBoxes |title1=例子1 |body1= |title2=例子2 |body2= }}
新增参数
参数名
预设值
例子
介绍
title#
null
{{infoBoxes |title2=Example}}
可选: 定义标题
body#
null
{{infoBoxes |body2=Body content}}
可选: 定义内文
color#
linear-gradient
{{infoBoxes |color2=green}}
可选: 以 CSS颜色 定义两个框的单色,例如
green
.colorD
#00c
(blue){{infoBoxes |colorD=green}}
可选: 以 CSS颜色 定义右框的右下角颜色 e.g.
green
.title#color
#fff
{{infoBoxes |title2Color=black}}
可选: 以 CSS颜色 定义标题文字颜色 e.g.
green
.【标题】
【内文】
【标题】
【内文】
【标题】
【内文】
要使用3个InfoBoxes在一起时,输入
{{infoBoxes3 |title1=Example 1 |body1= |title2=Example 2 |body2= |title3=Example 3 |body3= }}
增加参数
参数名
预设值
例子
介绍
colorE
#037
(dark cyan){{infoBoxes3 |colorE=green}}