Przejdź do zawartości

Szablon:ElastycznaKolumna/opis

Z Wikibooks, biblioteki wolnych podręczników.

Użycie

[edytuj]

Jest to szablon kontenera flex'owego kolumnowego, który może posiadać jako rodzic, aż dowolną liczbę dzieci div'owych. Jest on używany jako kontener elastyczny, w którym chcemy umieścić w jednej kolumnie n-dzieci rodzica flex'owego z opcjonalnym jawnym podaniem stylów, jak za pomocą jego zwykłej wersji przy pomocy kontenera elastycznego flex kolumnowego pisanych za pomocą div'ów i stylów. Przy czym poszczególne elementy numerowane szablonu są układane kolejno w tych dzieciach.

Kod zastępczy dla {{ElastycznaKolumna}} w postaci div'ów

[edytuj]
  • Przykład dla kodu pisanego za pomocą div'ów jako odpowiednik kontenera szablonowego {{ElastycznaKolumna}}:
 {{Div|styl=display:flex;flex-direction:column;height:100px;width:250px;|
    {{Div|styl=background:red;height:100%;width:150px;margin: 0 auto 0 auto;|Zawartość jeden.}}
    {{Div|styl=background:blue;height:50%;width:130px;margin: 0 0 0 auto;|Zawartość dwa.}}
    {{Div|styl=background:yellow;height:70%;width:130px;margin: 0 auto 0 0;|Zawartość trzy.}}
    {{Div|styl=background:gray;height:80%;width:250px;|Zawartość ostatnia.}}
 }}
  • Kod powyższy w działaniu jest taki:
Zawartość jeden.
Zawartość dwa.
Zawartość trzy.
Zawartość ostatnia.

Przykład

[edytuj]
  • Ten sam kod, co powyżej, możemy napisać za pomocą szablonu {{ElastycznaKolumna}}, wtedy:
{{ElastycznaKolumna
  |1=Zawartość jeden.
  |2=Zawartość dwa.
  |3=Zawartość trzy.
  |4=Zawartość ostatnia.
  |_1=background:red;height:100%;width:150px;margin: 0 auto 0 auto;
  |_2=background:blue;height:50%;width:130px;margin: 0 0 0 auto;
  |_3=background:yellow;height:70%;width:130px;margin: 0 auto 0 0;
  |_4=background:gray;height:80%;width:250px;
  |styl=height:100px;width:250px;
}}
  • A powyższy kod w działaniu jest taki sam, co za pomocą div'ów, a więc:
Zawartość jeden.
Zawartość dwa.
Zawartość trzy.
Zawartość ostatnia.

Opis parametrów

[edytuj]

Jest to opis szablonu kontenera flex'owego kolumnowego, który może posiadać jako rodzic, aż dowolną liczbę dzieci div'owych (od 1 do wzwyż), którym odpowiadają od jeden do wzwyż styli (od _1 do wzwyż) przyporządkowanym tym poszczególnym dzieciom i parametr stylu div'a flexowego styl :

{{ElastycznaKolumna
  |   1 =  |   2 =  |   3 = |... = Zawartość pierwszego, drugiego i wzwyż dalszych dzieci rodzica (opcjonalny, domyślnie równa wartości pustej)
  |  _1 =  |  _2 =  |  _3 = |... = Style pierwszego, drugiego i wzwyż dalszych dzieci rodzica (opcjonalny, domyślnie ustawiony na: width:100%;height:auto;)
  | __1 =  | __2 =  | __3 = |... = Zestaw reguł kaskadowych arkuszy stylów CSS dla odpowiednich komórek kontenera (opcjonalny)
  | styl          =  Styl rodzica (opcjonalny, domyślnie ustawiony na wartość pustą)
  | klasa         =  Zestaw reguł, w arkuszu kaskadowym stylów CSS, dla rodzica (opcjonalny).
  | styl elementu =  Styl elementu poszczególnych dzieci (opcjonalny, domyślnie wartość pusta)   
}}

Błędy

[edytuj]

Błędy należy zgłaszać na stronie Wikibooks:Kwestie techniczne.

Szablon obsługujący flexbox'a szablonu {{ElastycznegoKolumna}}, czyli jego elastyczne komórki kontenera flexbox'a są ułożone w pionie, przy czym kolejne elementy tego szablonu są wsadzane do poszczególnych dzieci opartych o <div>...</div>.

Parametry szablonu[Zarządzaj danymi szablonu]

ParametrOpisTypStatus
11

Zwartość pierwszej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówwymagany
22

Zwartość drugiej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
33

Zwartość trzeciej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
44

Zwartość czwartej komórki kontenera flexbox'a Flexbox'a.

Ciąg znakówopcjonalny
55

Zwartość piątej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
66

Zwartość szóstej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
77

Zwartość siódmej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
88

Zwartość ósmej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
99

Zwartość dziewiątej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
1010

Zwartość dziesiątej komórki kontenera flexbox'a Flexbox'a.

Ciąg znakówopcjonalny
_1_1

Styl pierwszej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_2_2

Styl drugiej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_3_3

Styl trzeciej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_4_4

Styl czwartej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_5_5

Styl piątej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_6_6

Styl szóstej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_7_7

Styl siódmej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_8_8

Styl ósmej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_9_9

Styl dziewiątej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
_10_10

Styl dzięsiątej komórki kontenera flexbox'a flexbox'a.

Ciąg znakówopcjonalny
__1__1

Zestaw reguł kaskadowych arkuszy stylów CSS dla pierwszej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__2__2

Zestaw reguł kaskadowych arkuszy stylów CSS dla drugiej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__3__3

Zestaw reguł kaskadowych arkuszy stylów CSS dla trzeciej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__4__4

Zestaw reguł kaskadowych arkuszy stylów CSS dla czwartej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__5__5

Zestaw reguł kaskadowych arkuszy stylów CSS dla piątej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__6__6

Zestaw reguł kaskadowych arkuszy stylów CSS dla szóstej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__7__7

Zestaw reguł kaskadowych arkuszy stylów CSS dla siódmej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__8__8

Zestaw reguł kaskadowych arkuszy stylów CSS dla ósmej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__9__9

Zestaw reguł kaskadowych arkuszy stylów CSS dla dziewiątej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
__10__10

Zestaw reguł kaskadowych arkuszy stylów CSS dla dziesiątej komórki kontenera flexbox'a.

Ciąg znakówopcjonalny
styl elementustyl elementu

Styl wspólny wszystkich komórek flexbox'a.

Ciąg znakówopcjonalny
stylstyl

Styl pudełka całego flexbox'a.

Ciąg znakówopcjonalny
klasaklasa

Zestaw reguł w arkuszu kaskadowym stylów CSS.

Ciąg znakówopcjonalny

Zobacz też

[edytuj]
  • {{ElastycznaKolumna}} - elastyczna kolumna zbudowana za pomocą flexbox'a, komórki są oparte o <div>...</div> i ułożone w pionie, zawartości elementów szablonu są do nich wsadzane.
  • {{ElastycznaKolumna2}} - elastyczna kolumna zbudowana za pomocą flexbox'a, komórki są ułożone w pionie, zawartości elementów szablonu zawierają własne <div>...</div>, które są dodawane do niego.