Szablon:ElastycznyWiersz2
Użycie
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
- 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:
Przykład
- 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:
Opis parametrów
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
Błędy należy zgłaszać na stronie Wikibooks:Kwestie techniczne.
Parametry szablonu (strukturyzacja Wizualnego Edytora)
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.
| 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ż
- 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.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Powyższy opis jest dołączany ze strony Szablon:ElastycznyWiersz2/opis. (edytuj | historia)
Kategorie należy dodawać do podstrony /opis. Zobacz podstrony tego szablonu. |