عرض مصدر قالب:Div col/شرح

{{صفحة توثيق فرعية}}
{{تصميم سي إس إس 3 للأعمدة المتعددة}}
{{Lua|Module:Check for unknown parameters}}
{{Uses TemplateStyles|Template:Div col/styles.css}}

The '''div col''' (short for division columns) formats a list into columns that wrap at multiple screen resolutions responsively. It automatically breaks the available screen space into equal parts, meaning, for instance, that it is not necessary to guess how many columns to use and then figure out the dividing point(s), e.g., the halfway point to divide the list into two columns, or the one-third and two-thirds points to divide the list into three columns.

== الوسائط ==
=== الوصف ===
There are six parameters for this template:
; {{وسيط|colwidth}}
: Specifies the minimum width of the columns so that the number of columns is automatically based on screen width (that is, more columns will be shown on wider displays). If no value is supplied, the template uses a default of 30em. The width can be specified in any [[أوراق الأنماط المتتالية|CSS unit of measure]], for instance, the [[Em (typography)|em]] (about the width of the capital "M" of the displayed typeface), e.g., <code>colwidth=20em</code>.
; {{وسيط|rules|yes}}
: Adds vertical lines ("rules") between the columns if set to <code>yes</code>.
; {{وسيط|gap}}
: Specifies the space between the content of adjacent columns, in any valid CSS width unit, e.g., <code>gap=2em</code>. The default spacing (set by browser) is 1em.
; {{وسيط|style}}
: [[أوراق الأنماط المتتالية|CSS styling]] to apply to the columns.
; {{وسيط|small|yes}}
: Sets font size to 90%.
; {{وسيط|content}}
: Content to apply to the columns.

=== مثال لاستخدام وسيط "colwidth" ===
<pre>
{{Div col|colwidth=10em}} <!-- column width of 10em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
</pre>
ينتج:
{{Div col|colwidth=10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

=== مثال لاستخدام وسيط "rules" ===
<pre>
{{Div col|colwidth=10em|rules=yes}} <!-- column width of 10em with rules -->
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
</pre>
ينتج:
{{Div col|colwidth=10em|rules=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

=== مثال وسيط "gap" ===
<pre>
{{Div col|colwidth=10em|rules=yes|gap=2em}} <!-- column width of 10em with rules and a gap of 2em -->
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
</pre>
ينتج:
{{Div col|colwidth=10em|rules=yes|gap=2em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

=== مثال وسيط "small" ===
<pre>
{{Div col|small=yes}} <!-- Small = yes -->
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
</pre>
ينتج:
{{Div col|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

=== مثال وسيط "content" ===
<pre>
{{Div col|colwidth=10em|content= <!-- content parameter doesn't need {{Div col end}} -->
* a
* b
* c
* d
* e
* f
* g
* h
}}
</pre>
ينتج:
{{Div col|colwidth=10em|content=
* a
* b
* c
* d
* e
* f
* g
* h
}}

=== Usage with multiple parameters ===
<pre>
{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
</pre>
ينتج:
{{Div col|colwidth=10em|rules=yes|gap=2em|small=yes}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
=== Colwidth 20em ===
<pre>
{{Div col|colwidth=20em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}
</pre>
ينتج:
{{Div col|colwidth=20em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col end}}

=== Text characters without list markup ===
<pre>
{{Div col|colwidth=10em}} <!--Text characters without list markup -->
a
b
c
d
e
f
g
h
{{Div col end}}
</pre>
Produces
{{Div col|colwidth=10em}}
a
b
c
d
e
f
g
h
{{Div col end}}

=== Lorem ipsum ===
<pre>
{{Div col|colwidth=20em}} <!--Lorem ipsum -->
{{لوريم إيبسوم}}
{{Div col end}}
</pre>
Produces
{{Div col|colwidth=20em}}
{{لوريم إيبسوم}}
{{Div col end}}

== Limitation ==
=== Sub-lists ===
The underlying CSS system is unable to break sub-lists into columns. Note the uneven formatting below:

<pre>
{{Div col|colwidth=10em|rules=yes|gap=2em|style=column-count:3|content=
* a
* b
* c
** c.d
** c.e
** c.f
* g
* h
}}
</pre>
ينتج:
{{Div col|colwidth=10em|rules=yes|gap=2em|style=column-count:3|content=
* a
* b
* c
** c.d
** c.e
** c.f
* g
* h
}}

Turning off the {{كود|break-inside: avoid-column;}} rule appears to help.<!-- A full page refersh is needed; just F12-ing doesn't work. -->

== تصانيف التتبع ==
* {{سطر تصنيف وصفحاته|صفحات تستخدم قالب:Div col مع وسائط غير معروفة}}
* {{سطر تصنيف وصفحاته|Pages using div col with small parameter}}

== بيانات القالب ==
{{رأس بيانات القالب}}
{{#switch: {{BASEPAGENAME}}
|Div col=<templatedata>
{
 "description": "يقسم القائمة إلى أعمدة، ويقوم تلقائيًا بتقسيم كل عمود إلى مساحة متساوية، لذلك لا يتعين عليك العثور يدويًا على نقطة المنتصف على عمودين. القائمة مقدمة بواسطة | content = أو مغلقة بـ {{Div col end}}.",
 "params": {
 "colwidth": {
 "label": "Column width",
 "description": "Specifies the width of columns, and determines dynamically the number of columns based on screen width; more columns will be shown on wider displays.",
 "type": "string",
 "example": "30em"
 },
 "rules": {
 "label": "Rules",
 "description": "Produces vertical rules between the columns if set to yes.",
 "type": "string",
 "example": "yes"
 },
 "gap": {
 "label": "Gap size",
 "description": "Specifies the space between the content of adjacent columns.",
 "type": "string",
 "example": "2em"
 },
 "style": {
 "label": "CSS style",
 "description": "Specifies any custom styling.",
 "type": "string"
 },
 "content": {
 "label": "Content",
 "description": "Specifies the content to divide into columns",
 "type": "string"
 },
 "small": {
 "label": "Small font",
 "description": "Use a smaller font size (90%)",
 "example": "yes",
 "type": "string"
 }
 }
}
</templatedata>
|Div col end=<templatedata>
{
 "description": "Ends a multi-column list started by {{Div col}}. It takes no parameters.",
 "params": {
 }
}
</templatedata>
}}
== طالع ==
{{قوالب توليد الأعمدة}}

<includeonly>{{ملعب أخر|
| 
[[تصنيف:قوالب متعددة الأعمدة]]
[[تصنيف:قوالب تضيف تصانيف تتبع]]
}}</includeonly>