Difference between revisions of "Template:Scrollbox/doc"

m (Created page with '==Usage== <pre> {{scrollbox| }} </pre> ==Example== <pre> {{scrollbox| * Lorem * ipsum * dolor * sit * amet, * consectetur * adipisicing * elit * sed * do * eiusmod * t…')
 
m (Updating)
Line 1: Line 1:
==Usage==
+
{{Documentation subpage}}
<pre>
+
== Description ==
{{scrollbox|
+
This scrolling list template creates a scroll-box within a page that allows for large content to be limited to a given number of pixels on the page.
 +
 
 +
== Usage ==
 +
<div style="border: 1px #ccc solid; padding:1em;">
 +
<code>
 +
'''&#123;&#123;scroll box'''<br />
 +
'''|width='''''<span style="color:blue">width (in pixel or in percent)</span>''<br />
 +
'''|height='''''<span style="color:blue">height (in pixel)</span>''<br />
 +
'''|text='''''<span style="color:green">contents</span>''<br />
 +
'''&#125;&#125;'''
 +
</code>
 +
</div>
 +
 
 +
The colored text should be properly replaced as here described:
 +
 
 +
<span style="color:blue">width</span>
 +
:The width of the box, expressed in pixel or in percent. ('''default=100%''')
 +
<span style="color:blue">height</span>
 +
:The height of the box, you should express this value exclusively in pixel. ('''default=230px''')
 +
<span style="color:green">contents</span>
 +
:The text that should be displayed inside this frame. Note that the scroll bar will appear only if the text is long enough to overflow the given height. ('''required field''', no default value)
 +
 
 +
== Examples ==
 +
=== Example 1 (Simple) ===
 +
==== Code ====
 +
<pre><nowiki>
 +
{{scroll box|
 +
* Example 01
 +
* Example 02
 +
* Example 03
 +
* Example 04
 +
* Example 05
 +
* Example 06
 +
* Example 07
 +
* Example 08
 +
* Example 09
 +
* Example 10
 +
* Example 11
 +
* Example 12
 +
* Example 13
 +
* Example 14
 +
* Example 15
 
}}
 
}}
</pre>
+
</nowiki></pre>
  
==Example==
+
==== Result ====
<pre>
+
Some text:
{{scrollbox|
+
{{scroll box|
* Lorem
+
* Example 01
* ipsum
+
* Example 02
* dolor
+
* Example 03
* sit
+
* Example 04
* amet,
+
* Example 05
* consectetur
+
* Example 06
* adipisicing
+
* Example 07
* elit
+
* Example 08
* sed
+
* Example 09
* do
+
* Example 10
* eiusmod
+
* Example 11
* tempor
+
* Example 12
* incididunt
+
* Example 13
* ut
+
* Example 14
* labore
+
* Example 15
* et
 
* dolore
 
* magna
 
* aliqua.
 
 
}}
 
}}
</pre>
 
  
Will display as:
+
=== Example 2 (With 1 param) ===
 +
==== Code ====
 +
<pre><nowiki>
 +
{{scroll box|text=
 +
* Example 01
 +
* Example 02
 +
* Example 03
 +
* Example 04
 +
* Example 05
 +
* Example 06
 +
* Example 07
 +
* Example 08
 +
* Example 09
 +
* Example 10
 +
* Example 11
 +
* Example 12
 +
* Example 13
 +
* Example 14
 +
* Example 15
 +
}}
 +
</nowiki></pre>
 +
==== Result ====
 +
{{scroll box|text=
 +
* Example 01
 +
* Example 02
 +
* Example 03
 +
* Example 04
 +
* Example 05
 +
* Example 06
 +
* Example 07
 +
* Example 08
 +
* Example 09
 +
* Example 10
 +
* Example 11
 +
* Example 12
 +
* Example 13
 +
* Example 14
 +
* Example 15
 +
}}
  
{{scrollbox|
+
=== Example 3 (width) ===
* Lorem
+
==== Code ====
* ipsum
+
<pre><nowiki>
* dolor
+
{{scroll box|width=75%|text=
* sit
+
* Example 01
* amet,
+
* Example 02
* consectetur
+
* Example 03
* adipisicing
+
* Example 04
* elit
+
* Example 05
* sed
+
* Example 06
* do
+
* Example 07
* eiusmod
+
* Example 08
* tempor
+
* Example 09
* incididunt
+
* Example 10
* ut
+
* Example 11
* labore
+
* Example 12
* et
+
* Example 13
* dolore
+
* Example 14
* magna
+
* Example 15
* aliqua.
 
 
}}
 
}}
 +
</nowiki></pre>
  
==Advanced usage==
+
==== Result ====
<nowiki>{{scrollbox}}</nowiki> has two optional parameters. You can set the height and width of the box.
+
{{scroll box|width=75%|text=
 +
* Example 01
 +
* Example 02
 +
* Example 03
 +
* Example 04
 +
* Example 05
 +
* Example 06
 +
* Example 07
 +
* Example 08
 +
* Example 09
 +
* Example 10
 +
* Example 11
 +
* Example 12
 +
* Example 13
 +
* Example 14
 +
* Example 15
 +
}}
  
<pre>
+
=== Example 4 (width and height) ===
{{scrollbox|height=200px|width=50%|
+
==== Code ====
* Lorem
+
<pre><nowiki>
* ipsum
+
{{scroll box|width=150px|height=100px|bar=invisible|text=
* dolor
+
* Example 01
* sit
+
* Example 02
* amet,
+
* Example 03
* consectetur
+
* Example 04
* adipisicing
+
* Example 05
* elit
+
* Example 06
* sed
+
* Example 07
* do
+
* Example 08
* eiusmod
+
* Example 09
* tempor
+
* Example 10
* incididunt
+
* Example 11
* ut
+
* Example 12
* labore
+
* Example 13
* et
+
* Example 14
* dolore
+
* Example 15
* magna
 
* aliqua.
 
 
}}
 
}}
</pre>
+
</nowiki></pre>
  
Will display as:
+
==== Result ====
{{scrollbox
+
{{scroll box|width=150px|height=100px|text=
|height=200px
+
* Example 01
|width=50%|
+
* Example 02
* Lorem
+
* Example 03
* ipsum
+
* Example 04
* dolor
+
* Example 05
* sit
+
* Example 06
* amet,
+
* Example 07
* consectetur
+
* Example 08
* adipisicing
+
* Example 09
* elit
+
* Example 10
* sed
+
* Example 11
* do
+
* Example 12
* eiusmod
+
* Example 13
* tempor
+
* Example 14
* incididunt
+
* Example 15
* ut
 
* labore
 
* et
 
* dolore
 
* magna
 
* aliqua.
 
 
}}
 
}}
  
[[Category:Utility templates|{{PAGENAME}}]]
+
<includeonly>{{Sandbox other|
 +
| <!-- CATEGORIES BELOW THIS LINE, PLEASE: -->
 +
[[Category:Box templates]]
 +
[[Category:Archival templates]]
 +
}}</includeonly>

Revision as of 22:36, 14 May 2023

Description

This scrolling list template creates a scroll-box within a page that allows for large content to be limited to a given number of pixels on the page.

Usage

{{scroll box
|width=width (in pixel or in percent)
|height=height (in pixel)
|text=contents
}}

The colored text should be properly replaced as here described:

width

The width of the box, expressed in pixel or in percent. (default=100%)

height

The height of the box, you should express this value exclusively in pixel. (default=230px)

contents

The text that should be displayed inside this frame. Note that the scroll bar will appear only if the text is long enough to overflow the given height. (required field, no default value)

Examples

Example 1 (Simple)

Code

{{scroll box|
* Example 01
* Example 02
* Example 03
* Example 04
* Example 05
* Example 06
* Example 07
* Example 08
* Example 09
* Example 10
* Example 11
* Example 12
* Example 13
* Example 14
* Example 15
}}

Result

Some text:

  • Example 01
  • Example 02
  • Example 03
  • Example 04
  • Example 05
  • Example 06
  • Example 07
  • Example 08
  • Example 09
  • Example 10
  • Example 11
  • Example 12
  • Example 13
  • Example 14
  • Example 15

Example 2 (With 1 param)

Code

{{scroll box|text=
* Example 01
* Example 02
* Example 03
* Example 04
* Example 05
* Example 06
* Example 07
* Example 08
* Example 09
* Example 10
* Example 11
* Example 12
* Example 13
* Example 14
* Example 15
}}

Result

  • Example 01
  • Example 02
  • Example 03
  • Example 04
  • Example 05
  • Example 06
  • Example 07
  • Example 08
  • Example 09
  • Example 10
  • Example 11
  • Example 12
  • Example 13
  • Example 14
  • Example 15

Example 3 (width)

Code

{{scroll box|width=75%|text=
* Example 01
* Example 02
* Example 03
* Example 04
* Example 05
* Example 06
* Example 07
* Example 08
* Example 09
* Example 10
* Example 11
* Example 12
* Example 13
* Example 14
* Example 15
}}

Result

  • Example 01
  • Example 02
  • Example 03
  • Example 04
  • Example 05
  • Example 06
  • Example 07
  • Example 08
  • Example 09
  • Example 10
  • Example 11
  • Example 12
  • Example 13
  • Example 14
  • Example 15

Example 4 (width and height)

Code

{{scroll box|width=150px|height=100px|bar=invisible|text=
* Example 01
* Example 02
* Example 03
* Example 04
* Example 05
* Example 06
* Example 07
* Example 08
* Example 09
* Example 10
* Example 11
* Example 12
* Example 13
* Example 14
* Example 15
}}

Result

  • Example 01
  • Example 02
  • Example 03
  • Example 04
  • Example 05
  • Example 06
  • Example 07
  • Example 08
  • Example 09
  • Example 10
  • Example 11
  • Example 12
  • Example 13
  • Example 14
  • Example 15