Πρότυπο: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}}
}}
Δίνει αποτέλεσμα:
- 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
}}
Δίνει αποτέλεσμα:
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