Szablon:ElastycznyWiersz

Z Wikibooks, biblioteki wolnych podręczników.
Przejdź do nawigacji Przejdź do wyszukiwania
Template-info.png Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

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 z opcjonalnym jawnym podaniem stylów, jak za pomocą jego zwykłej wersji przy pomocy kontenera elastycznego flex wierszowego pisanych za pomocą div'ów i stylów.

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

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

Przykład

  • Ten sam kod, co powyżej, możemy napisać za pomocą szablonu {{ElastycznyWiersz}}, wtedy:
 {{ElastycznyWiersz
    |1=Zawartość jeden.
    |2=Zawartość dwa.
    |3=Zawartość trzy.
    |4=Zawartość ostatnia.
    |_1=background:red;width:100%;height:25px;margin: auto 0 auto 0;
    |_2=background:blue;width:50%;height:20px;margin: 0 0 auto 0;
    |_3=background:yellow;width:70%;height:30px;margin: auto 0 0 0;
    |_4=background:gray;width:80%;height:35px;
    |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

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ż), 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:

{{ElastycznyWiersz
  |  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: flex:1 0 auto;margin:auto 0 auto 0;width:auto;height:100%;)   
  | styl          = Styl rodzica (opcjonalny, domyślnie ustawiony na wartość pustą)
  | styl elementu = Styl poszczególnych elementów dzieci (opcjonalny, domyślnie wartość pusta)   
}}

Błędy

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

Parametry szablonu (strukturyzacja Wizualnego Edytora)

Zobacz też