Przejdź do zawartości

Szablon:ElastycznyWiersz2/opis

Z Wikibooks, biblioteki wolnych podręczników.

Użycie

[edytuj]

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

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

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

Przykład

[edytuj]
  • Ten sam kod, co powyżej, możemy napisać za pomocą szablonu {{ElastycznyWiersz2}}, wtedy:
 {{ElastycznyWiersz2
    |1={{Div|styl=background:red;width:100%;height:25px;margin: auto 0 auto 0;|Zawartość jeden.}}
    |2={{Div|styl=background:blue;width:50%;height:20px;margin: 0 0 auto 0;|Zawartość dwa.}}
    |3={{Div|styl=background:yellow;width:70%;height:30px;margin: auto 0 0 0;|Zawartość trzy.}}
    |4={{Div|styl=background:gray;width:80%;height:35px;|Zawartość ostatnia.}}
    |styl=height:35px;width:600px;
  }}
  • 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 wierszowego, który może posiadać jako rodzic, aż dowolną liczbę dzieci div'owych (od 1 do wzwyż) i parametr stylu div'a flexowego styl :

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

[edytuj]

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

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

Parametry szablonu[Zarządzaj danymi szablonu]

ParametrOpisTypStatus
11

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

Ciąg znakówwymagany
22

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

Ciąg znakówopcjonalny
33

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

Ciąg znakówopcjonalny
44

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

Ciąg znakówopcjonalny
55

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

Ciąg znakówopcjonalny
66

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

Ciąg znakówopcjonalny
77

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

Ciąg znakówopcjonalny
88

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

Ciąg znakówopcjonalny
99

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

Ciąg znakówopcjonalny
1010

Zwartość dziesiątej komórki kontenera 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]
Kontenery flexbox'a wyświetlane w jednym wierszu, niezależnie od rozmiarów wiersza
  • {{ElastycznyWiersz}} - szablon wstawiający poszczególne zawartości poszczególnych komórek flexbox'a do poszczególnych ramek opartych o tag: <div>...</div>, którym można nadać styl wspólny ogólny lub style charakterystyczne dla każdej jego komórki,
  • {{ElastycznyWiersz2}} - szablon wstawiający poszczególne zawartości poszczególnych komórek flexbox'a opartych o ramki o tag: <div>...</div>, do ogólnego pudełka, któremu można dać styl pudełkowy.

Kontenery flexbox'a wyświetlane w jednym wierszu lub w zależności od rozmiaru wiersza zawijany, by się w nim zmieścił
  • {{ElastycznyZawijanyWiersz}} - szablon wstawiający poszczególne zawartości poszczególnych komórek zawijanego flexbox'a do poszczególnych ramek opartych o tag: <div>...</div>, którym można nadać styl wspólny ogólny lub style charakterystyczne dla każdej jego komórki,
  • {{ElastycznyZawijanyWiersz2}} - szablon wstawiający poszczególne zawartości poszczególnych komórek zawijanego flexbox'a opartych o ramki o tag: <div>...</div>, do ogólnego pudełka, któremu można dać styl pudełkowy.