mozilla
Wyniki wyszukiwania

    Szczegóły modelu pudełkowego

    Widzieliśmy już dużo własności modelu pudełkowego. Tutaj znajdziemy trochę szczegółów z przykładami.

    Więcej szczegółów układu graficznego

    Własności stylu, takie jak min-width i max-height, mogą być dodawane do każdego elementu. Wstawialiśmy je już do przycisków i pól tekstowych, ale możemy je również dodać do pól odstępu czy pudełek. Dodatkowo do każdego elementu może być dodany atrybut flex.

    var el = env.locale; Przykład 1 : Źródła Podgląd

    <hbox flex="1">
      <button label="Lewo" style="min-width: 100px;" flex="1"/>
      <spacer flex="1"/>
      <button label="Prawo" style="min-width: 100px;" flex="1"/>
    </hbox>
    

    W powyższym przykładzie wszystkie trzy elementy zmieniają swój rozmiar, ponieważ mają ustawiony atrybut flex. Obydwa przyciski maja ustawioną minimalną szerokość 100 pikseli i nigdy się nie zmniejszą poniżej tej wartości, ale mogą się powiększać. Okno powinno być niewiele szersze niż 200 pikseli. Jest to szerokość wystarczająca, aby wyświetlić oba przyciski, dlatego wstępnie elastyczność nie zmieni ich rozmiaru.

    grafika:boxdet1.png

    Jak widać na obrazku obok, znajdują się tam dwa przyciski, które są rozciągnięte w pionie, aby wypełnić pudełko, które w tym przypadku jest typu hbox. Można zapobiec nadmiernemu rozciąganiu się pudełka poprzez ustawianie maksymalnej wysokości elementów w jego wnętrzu lub lepiej, samego pudełka. Jeśli ta wartość zostanie ustawiona, wszystkie elementy pudełka będą nim ograniczane. W tym wypadku pojawia się problem, gdyż musimy wiedzieć z góry, ile miejsca potrzebujemy, aby pomieścić wszystkie elementy w pudełku. Atrybut align kontroluje zachowanie się poziomego pudełka. Poniższy przykład demonstruje jego działanie.

    var el = env.locale; Przykład 2 : Źródła Podgląd

    <hbox flex="1" align="top">
      <button label="Lewo" style="min-width: 100px;" flex="1"/>
      <spacer flex="1"/>
      <button label="Prawo" style="min-width: 100px;" flex="1"/>
    </hbox>
    

    Podsumowanie modelu pudełkowego

    Realizując skomplikowane układy graficzne, trzeba zazwyczaj zagnieżdżać wiele pudełek, określać minimalne i maksymalne wymiary elementów oraz tworzyć pewne elementy jako elastyczne. Najlepszym układem jest taki, który można wyświetlić bezproblemowo w oknie o różnej wielkości. Model pudełkowy może być trudny do zrozumienia bez samodzielnego wypróbowania różnych kombinacji i możliwości.

    Poniżej są wypisane najważniejsze cechy dostępnych pudełek:

    Pudełka poziome

    1. Elementy potomne układane są obok siebie w poziomie (w rzędzie).
    2. Elementy elastyczne są rozciągane w poziomie.
    3. Pakowanie (pack) kontroluje ułożenie elementów potomnych w poziomie.
    4. Wyrównanie (align) kontroluje, w jaki sposób rząd elementów jest wyrównywany w pionie.

    Pudełka pionowe

    1. Elementy potomne układane są jeden pod drugim (w kolumnie).
    2. Elementy elastyczne są rozciągane w pionie.
    3. Pakowanie (pack) kontroluje pionowe ułożenie elementów potomnych.
    4. Wyrównanie (align) kontroluje, w jaki sposób kolumna elementów jest wyrównywana w poziomie.

    Pudełka mogą być wstawiane w dowolnym miejscu pliku XUL, w tym także wewnątrz elementów HTML (np. jako tabele). Jednakże ich układ graficzny będzie wtedy częściowo kontrolowany przez element HTML, do którego zostały wstawione. Oznacza to, że atrybut flex może nie działać w sposób, jaki byśmy sobie tego życzyli. Należy pamiętać, że elastyczność dotyczy tylko tych elementów, które są bezpośrednio zastosowane wewnątrz pudełka lub elemencie dziedziczącym z pudełka.

    Przykłady układu graficznego

    Zastosowanie odstępów

    var el = env.locale; Przykład 3 : Źródła Podgląd

    <hbox>
      <button label="Jeden"/>
      <spacer style="width: 5px"/>
      <button label="Dwa"/>
    </hbox>
    

    Tutaj spacer (odstęp) został użyty jako separator pomiędzy dwoma przyciskami, odstęp jest stały i wynosi 5 pikseli. To samo mogliśmy osiągnąć ustawiając marginesy używając własności CSS margin.

    Wyśrodkowanie przycisków

    var el = env.locale; Przykład 4 : Źródła Podgląd

    <hbox pack="center" align="center" flex="1">
      <button label="Look at Me!"/>
      <button label="Push Me!"/>
    </hbox>
    

    W tym przykładzie mamy elastyczne pudełko z dwoma przyciskami wewnątrz. Pudełko posiada atrybut pack, dzięki któremu możemy wyśrodkować przyciski w poziomie. Atrybut align wyrównuje przyciski w pionie. W efekcie przyciski będą wyśrodkowane w obu kierunkach. Jeśli zamiast pudełka typu hbox użyte zostało by pudełko vbox, efekt byłby ten sam z tą różnicą, że przyciski były by ustawione jeden pod drugim a nie obok siebie.

    Okno dialogowe <tt>Znajdź tekst</tt>

    var el = env.locale; Przykład 5 : Źródła Podgląd

    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    
    <window id="findtext" title="Znajdź tekst" orient="horizontal"
            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
      <vbox flex="3">
        <label control="t1" value="Szukaj tekstu:"/>
        <textbox id="t1" style="min-width: 100px;" flex="1"/>
      </vbox>
    
      <vbox style="min-width: 150px;" flex="1" align="start">
        <checkbox id="c1" label="Uwzględnij wielkość liter"/>
        <spacer flex="1" style="max-height: 30px;"/>
        <button label="Znajdź"/>
      </vbox>
    
    </window>
    
    grafika:boxdet-ex3.png

    Okno składa się z dwóch pudełek, jedno dla pola tekstowego, drugie dla pola wyboru oraz przycisku. Oba pudełka są elastyczne, lecz elastyczność lewego pudełko jest trzykrotnie większa od prawego, co sprawia, że podczas zmiany rozmiaru okna otrzymuje trzy razy więcej dodatkowego miejsca. Minimalna wielkość prawego pudełka jest wyznaczona i wynosi 150 pikseli.

    Pole tekstowe jest elastyczne, więc zmienia swoją wielkość podczas zmiany rozmiaru okna. Pole to również ma wyznaczoną minimalna szerokość, która wynosi 100 pikseli. Pole wyboru pojawi się w prawym pudełku wraz ze swoją etykietą. Poniżej pola wyboru wstawiamy pustą przestrzeń, która będzie zmieniała swój rozmiar podczas zmiany wielkości okna, jednak nie będzie ona większa niż 30 pikseli. W rezultacie pole wyboru i przycisk <tt>Znajdź</tt> będą rozdzielone od siebie pustą przestrzenią nie większą niż 30 pikseli.

    Drugie pudełko zostało utworzone z atrybutem start. Powoduje to wyrównanie elementów potomnych do lewej krawędzi. Jeśli nie zdefiniujemy wartości tego atrybutu, to domyślnym ustawieniem jest stretch, powodujące rozciąganie elementów potomnych w poziomie. Ponieważ nie chcemy, aby przycisk <tt>Znajdź</tt> zmieniał rozmiar, musimy ustawić wyrównanie.

    Następnie dowiemy się więcej o specjalnych typach pudełka - polach grupy.

    Autorzy i etykiety dokumentu

    Contributors to this page: Takenbot, teoli, Witia, Cnr roxx, Mgjbot, Ptak82, Jaki
    Ostatnia aktualizacja: teoli,