Szablon:ElastycznaKolumna2

 Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

Użycie

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, jak za pomocą jego zwykłej wersji przy pomocy kontenera elastycznego flex kolumnowego pisanych za pomocą div'ów i stylów. Przy czym <div>...</div> dzieci pochodzą od poszczególnych elementów tego szablonu podane jako elementy numerowane.

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

• Przykład dla kodu pisanego za pomocą div'ów jako odpowiednik kontenera szablonowego {{ElastycznaKolumna2}}:

{{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

{{ElastycznaKolumna2
   |1={{Div|styl=background:red;height:100%;width:150px;margin: 0 auto 0 auto;|Zawartość jeden.}}
   |2={{Div|styl=background:blue;height:50%;width:130px;margin: 0 0 0 auto;|Zawartość dwa.}}
   |3={{Div|styl=background:yellow;height:70%;width:130px;margin: 0 auto 0 0;|Zawartość trzy.}}
   |4={{Div|styl=background:gray;height:80%;width:250px;|Zawartość ostatnia.}}
   |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

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ż) i parametr stylu div'a flexowego styl:

{{ElastycznaKolumna2
  |  1 = |  2 = |  3 = |... = Zawartość div'owa pierwszego, drugiego i wzwyż dalszych dzieci rodzica (opcjonalny, domyślnie równa wartości pustej)
  | styl  = Styl rodzica (opcjonalny, domyślnie ustawiony na wartość pustą)
  | klasa = Zestaw reguł, w arkuszu kaskadowym stylów CSS, dla rodzica (opcjonalny).
}}

Błędy

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

Parametry szablonu (strukturyzacja Wizualnego Edytora)

Szablon obsługujący flexbox'a szablonu {{ElastycznegoKolumna2}}, czyli jego elastyczne komórki są ułożone w pionie, przy czym jego komórki oparte o <div>...</div> pochodzą od dzieci tego obiektu wstawiane jako poszczególne numerowane elementy.

Parametry szablonu

Parametr		Opis	Typ	Status
1	1	Zwartość pierwszej komórki kontenera flexbox'a.	Ciąg znaków	wymagany
2	2	Zwartość drugiej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
3	3	Zwartość trzeciej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
4	4	Zwartość czwartej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
5	5	Zwartość piątej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
6	6	Zwartość szóstej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
7	7	Zwartość siódmej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
8	8	Zwartość ósmej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
9	9	Zwartość dziewiątej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
10	10	Zwartość dziesiątej komórki kontenera flexbox'a.	Ciąg znaków	opcjonalny
styl	styl	Styl pudełka całego flexbox'a.	Ciąg znaków	opcjonalny
klasa	klasa	Zestaw reguł w arkuszu kaskadowym stylów CSS.	Ciąg znaków	opcjonalny

Zobacz też

• {{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.