Πρότυπο:Div col

Τεκμηρίωση προτύπου[προβολή] [επεξεργασία] [ιστορικό] [ανανέωση]

Το πρότυπο {{div col}} διαιρεί μορφοποιημένη λίστα σε στήλες που καλύπτουν όλο το διαθέσιμο πλάτος της οθόνης. Οι στήλες που δημιουργούνται περιέχουν κατά το δυνατό ίσο αριθμό στοιχείων και ο αριθμός τους προσαρμόζεται αυτόματα στο εκάστοτε πλάτος της οθόνης.

Το πρότυπο χρησιμοποιεί τη δυνατότητα TemplateStyles. Μέρος της μορφοποίησής του ορίζεται στη σελίδα Πρότυπο:Div col/styles.css.

Χρήση

1ος τρόπος

{{Div col|colwidth= |rules= |gap= |style= |small= |
* στοιχείο λίστας 1
* στοιχείο λίστας 2
* στοιχείο λίστας 3
* κλπ
}}

2ος τρόπος

{{Div col|colwidth= |rules= |gap= |style= |small=}}
* στοιχείο λίστας 1
* στοιχείο λίστας 2
* στοιχείο λίστας 3
* κλπ
{{div col end}}

Χρησιμοποιείστε το δεύτερο τρόπος σύνταξης του προτύπου σε περιπτώσεις όπου:

• Η λίστα περιλαμβάνει υπο-ενότητες (δείτε παρακάτω στα παραδείγματα).
• Η λίστα εκτείνεται σε παραπάνω από μία σελίδες σκαναρισμένου εγγράφου και θέλετε να ενσωματωθεί σε άλλη σελίδα.

Σε αυτές τις περιπτώσεις ο πρώτος τρόπος σύνταξης του προτύπου δεν είναι τεχνικά δυνατόν να λειτουργήσει σωστά.

Παράμετροι

• |colwidth=: Καθορίζει το ελάχιστο πλάτος την στηλών πέρα από το οποίο αυτόματα μεταβάλλεται ο αριθμός τους, ανάλογα με το πλάτος της οθόνης. Δέχεται τιμές σε οποιαδήποτε μονάδα πλάτους CSS. Η προεπιλεγμένη τιμή είναι 30em.
• |rules=: Δημιουργεί κάθετη διαχωριστική γραμμή μεταξύ των στηλών. Δέχεται μόνο την τιμή yes.
• |gap=: Ορίζει το διάστημα μεταξύ μεταξύ του περιεχομένου και της γειτονικής στήλης. Δέχεται τιμές σε μονάδα πλάτους CSS Προεπιλεγμένη τιμή είναι 1em.
• |style=: Επιτρέπει τη μορφοποίηση με τη χρήση παραμέτρων μορφοποίησης CSS.
• |small=: Μεταβάλλει το μέγεθος της γραμματοσειράς στο 92% του κανονικού μεγέθους. Δέχεται μόνο την τιμή yes.

Παραδείγματα

colwidth

{{div col|colwidth=10em| <!-- πλάτος στήλης 10em -->
* a
* b
* c
* d
* e
* f
* g
* h
}}

Δίνει αποτέλεσμα:

• a
• b
• c
• d
• e
• f
• g
• h

rules

{{Div col|colwidth=10em|rules=yes| <!-- στήλες πλάτους 10em με διαχωριστικές γραμμές -->
* a
* b
* c
* d
* e
* f
* g
* h
}}

Δίνει αποτέλεσμα:

• a
• b
• c
• d
• e
• f
• g
• h

gap

{{Div col|colwidth=10em|rules=yes|gap=4em| <!-- πλάτος στήλης 10em με διαχωριστικές γραμμές και διάστημα 4em -->
* a
* b
* c
* d
* e
* f
* g
* h
}}

Δίνει αποτέλεσμα:

• a
• b
• c
• d
• e
• f
• g
• h

style

{{div col|colwidth=15em|style=text-align:justify|gap=2em| <!--πλήρη στοίχιση κειμένου -->
{{lorem ipsum}}
}}

Δίνει αποτέλεσμα:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

small

{{Div col|small=yes| <!-- Small = yes -->
* a
* b
* c
* d
* e
* f
* g
* h
}}

Δίνει αποτέλεσμα:

• a
• b
• c
• d
• e
• f
• g
• h

Λίστα με υπο-ενότητες

{{Div col|style=column-count:2}}
==== Ημέρες ====
* Κυριακή
* Δευτέρα
* Τρίτη
* Τετάρτη
* Πέμπτη
* Παρασκευή
* Σάββατο

==== Μήνες ====
*Ιανουάριος
* Φεβρουάριος
* Μάρτιος
* Απρίλιος
* Μάιος
* Ιούνιος
* Ιούλιος
* Αύγουστος
* Σεπτέμβριος
* Οκτώβριος
* Νοέμβριος
* Δεκέμβριος
{{div col end}}

Χωρίς μορφοποίηση λίστας

{{div col|colwidth=10em| <!-- κείμενο σε λίστα χωρίς μορφοποίηση λίστας -->
a
b
c
d
e
f
g
h
}}

Δίνει αποτέλεσμα:

a

b c d e f g h

Περιορισμοί

Το πρότυπο αδυνατεί να διαιρέσει υπο-λίστα, με αποτέλεσμα όταν υπάρχει τέτοια να δημιουργούνται άνισες στήλες.

{{Div col|colwidth=10em|rules=yes|gap=2em|style=column-count:3|
* a
* b
* c
** c.d
** c.e
** c.f
* g
* h
}}

Δίνει αποτέλεσμα:

• a
• b
• c
  • c.d
  • c.e
  • c.f
• g
• h