Pozycjonowanie elementów

W tym artykule dowiemy się jak sterować pozycją i rozmiarem elementu.

Pozycjonowanie elementu pola

Dowiedzieliśmy się już jak pozycjonować elementy - albo poziomo, albo pionowo - wewnątrz pola. Często jednak będziemy musieli sterować pozycją i rozmiarem elementu wewnątrz pola. Dlatego najpierw musimy przyjrzeć się, jak działa pole.

Pozycja elementu jest określona przez styl rozmieszczenia jego kontenera. Na przykład, przycisk w polu poziomym będzie umieszczony na prawo od poprzedniego przycisku. Rozmiar elementu jest określony przez dwa czynniki: zawartość elementu i rozmiar, jaki określisz. Rozmiar, jaki posiada element jest określony przez to, co dany element zawiera. Na przykład, szerokość przycisku jest określona przez ilość tekstu wewnątrz przycisku.

Generalnie element będzie tak duży, jak to konieczne do przechowania jego zawartości i nie większy. Pewne elementy, takie jak pola tekstowe mają rozmiar domyślny, jakiego będziemy używać. Pole będzie wystarczająco duże dla przechowania elementów wewnątrz pola. Pole poziome zawierające trzy przyciski będzie tak szerokie, jak trzy przyciski plus niewielka ilość wypełnienia.

Na poniższym rysunku pierwsze dwa przyciski mają zadany odpowiedni rozmiar dla przechowania swojego tekstu. Trzeci przycisk jest większy, ponieważ ma więcej zawartości. Szerokość pola zawierającego przyciski jest to całkowita szerokość przycisków plus wypełnienie między nimi. Wysokość przycisków ma odpowiedni rozmiar do przechowywanego tekstu.

Atrybuty width i height

Niekiedy konieczna jest większa kontrola nad rozmiarem elementu w oknie. Jest kilka cech, które pozwolą ci sterować rozmiarem elementu. Szybkim sposobem na to jest po prostu nadanie elementowi atrybutów width i height, podobnych do tych, jakie można dodać do znacznika img w HTML-u. Poniżej mamy pokazany przykład:

Przykład 1 : Źródła Podgląd

<button label="OK" width="100" height="40"/>

Jednakże takie rozwiązanie nie jest zalecane. Nie jest to zbyt przenośne i może nie mieścić się w pewnych motywach. Lepszym sposobem jest zastosowanie właściwości stylu, który działa podobnie do arkuszy stylu w HTML. Można zastosować poniższe własności CSS.

width 

Określa szerokość elementu.

height 

Określa wysokość elementu.

Poprzez ustawienie jednej z tych dwóch własności, element będzie stworzony z taką szerokością lub wysokością. Jeśli określisz tylko jedną właściwość rozmiaru, druga jest wyliczana, jeśli to jest konieczne. Rozmiar tych właściwości stylu powinien być określony jak liczba następująca po module.

Elastyczne elementy

Rozmiary są dosyć łatwe do obliczenia dla elementów nieelastycznych. Korzystają one po prostu ze swoich określonych szerokości i wysokości, a jeśli rozmiar nie został określony, domyślny rozmiar elementu jest wystarczająco duży, aby dopasować zawartość. Dla elementów elastycznych obliczenie jest odrobinę oszukańcze.

Elementy elastyczne są tymi które mają atrybut flex ustawioną na wartość większą niż 0. Przypomnij sobie, że elementy elastyczne rosną i kurczą się wypełniając dostępną przestrzeń. Ich domyślny rozmiar jest jeszcze obliczany tak samo jak elementów nieelastycznych. Demonstruje to poniższy przykład:

Przykład 2 : Źródła Podgląd

<window orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<hbox>
  <button label="Tak" flex="1"/>
  <button label="Nie"/>
  <button label="Nie znam jednego rozwiązania lub jakiegokolwiek innego"/>
</hbox>

</window>

Początkowo okno pojawi się takie jak to na wcześniejszym obrazku. Pierwsze dwa przyciski będą ułatwione na odpowiedni domyślny rozmiar szerokości a przycisk trzeci będzie większy ponieważ ma dłuższą etykietę. Pierwszy przycisk jest elastyczny a wszystkie trzy elementy umieszczono wewnątrz pola. Szerokość pola będzie ustawiona na początkową całkowitą szerokość wszystkich trzech przycisków (około 430 pikseli na rysunku).

Jeśli zwiększysz szerokość okna, elementy są sprawdzane pod kątem elastyczności aby wypełnić pustą przestrzeń jaka się pojawi. Przycisk jest jedynym elastycznym elementem, ale nie urośnie szerszy. jest tak ponieważ pole wewnątrz którego mieści się przycisk nie jest elastyczne. Element nieelastyczny nigdy nie zmienia rozmiaru nawet jeśli jest dostępna przestrzeń, więc również i przycisk nie może się zwiększyć. A zatem przycisk się nie poszerzy.

Rozwiązaniem jest uczynienie również pola elastycznym. Zatem kiedy poszerzasz okno, będzie dostępna dodatkowa przestrzeń, więc pole będzie wzrastało wypełniając tą dodatkową przestrzeń. Ponieważ pole jest duże, będzie stworzone wewnątrz niego więcej dodatkowej przestrzeni, a elastyczny przycisk wewnątrz niego wzrośnie wypełniając dostępną przestrzeń. Ten proces powtarza się, jeśli to konieczne, dla wielu zagnieżdżonych pól.

Ustawienie minimalnego i maksymalnego rozmiaru

Możemy pozwolić elementowi, aby był elastyczny ale ograniczyć rozmiar, aby nie mógł być większy niż pewien rozmiar lub możemy ustawić minimalny rozmiar. Możemy to zrobić poprzez zastosowanie czterech atrybutów:

minwidth 

Określa minimalną długość jaką może posiadać element.

minheight 

Określa minimalną wysokość jaką może posiadać element.

maxwidth 

Określa maksymalną długość jaką może posiadać element.

maxheight 

Określa maksymalną wysokość jaką może posiadać element.

Wartości te są zawsze mierzone w pikselach. Możemy również zastosować odpowiednią własność CSS, min-width, min-height, max-width i max-height.

Własności te są tylko użyteczne w przypadku elementów elastycznych. Poprzez ustawienie maksymalnej wysokości, na przykład: obszar przycisku będzie rósł tylko do pewnej maksymalnej wysokości. Będziemy mogli jeszcze zmienić rozmiar okna poza ten punkt, ale przycisk przestanie zwiększać swój rozmiar. Pudełko, w którego wnętrzu jest przycisk, również będzie rosło, chyba, że ustawimy mu również wysokość pudełka.

Jeśli dwa przyciski są również elastyczne, normalnie oba będą dzieliły ilość dodatkowej przestrzeni. Jeśli jeden przycisk ma maksymalną szerokość, drugi będzie jeszcze kontynuował wzrost i zabierał całą pozostałą przestrzeń.

Jeśli pudełko ma maksymalną szerokość lub wysokość, dzieci nie będą mogły wzrastać bardziej, niż do maksymalnego rozmiaru. Tu mamy kilka przykładów ustawienia szerokości i wysokości:

Przykłady ustawienia szerokości i wysokości

<button label="1" style="width: 100px;"/>
<button label="2" style="width: 100em; height: 10px;"/>
<button label="3" flex="1" style="min-width: 50px;"/>
<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/>
<textbox flex="1" style="max-width: 10em;"/>
<description style="max-width: 50px">To jest nudny, lecz w prosty sposób 
zawinięty do nowej linii tekst.</description>

Przykład 1 

Pierwszy przycisk będzie wyświetlony z szerokością 100 pikseli (px oznacza piksele). Musisz dodać moduł lub szerokość będzie ignorowana.

Przykład 2 

Drugi przycisk będzie wyświetlony z wysokością 10 pikseli i szerokości 100em (em jest to rozmiar znaku bieżącej czcionki).

Przykład 3 

Trzeci przycisk jest elastyczny więc będzie rósł w oparciu o rozmiar pola w którym jest przycisk. Jednakże, przycisk nigdy nie będzie dzielony na mniej niż 50 pikseli. Często elastyczne komponenty takie jak ochraniacz zaabsorbują pozostałą przestrzeń, przełamując współczynnik flex.

Przykład 4 

Czwarty przycisk jest elastyczny i nigdy nie będzie miał wysokości mniejszej niż 2ex (x jest zazwyczaj wysokością litery x w bieżącej czcionce) lub nie będzie szerszy niż 100 pikseli.

Przykład 5 

Tekst wejściowy jest elastyczny, ale nigdy nie wzrośnie aby być większym niż 100em. Często będziesz chciał stosować em kiedy określasz rozmiary tekstu. Ten moduł jest użyteczny dla pól tekstowych, aby byłyby one zawsze odpowiedniego rozmiaru, nawet jeśli czcionka jest bardzo duża.

Przykład 6 

Element description jest wymuszony po to aby mieć maksymalną szerokość 50 pikseli. Tekst wewnątrz będzie zawijany do kolejnej linii po pięćdziesiątym pikselu.

Nasz przykład: <tt>Znajdź pliki</tt>

Dodajmy, więc niektóre style do naszego okienka dialogowego <tt>Znajdź pliki</tt>. Tworzymy pole tekstowe o zmiennych wymiarach, tak, aby pasowało do całego okna.

<textbox id="find-text" flex="1" style="min-width: 15em;"/>

W tym przykładzie tekst wejściowy jest elastyczny. W ten sposób, będzie się zwiększał, jeśli użytkownik zmieni rozmiar okienka dialogowego. Jest to użyteczne, jeśli użytkownik chce wpisać długi ciąg znaków tekst. Także, minimalna szerokość, jaką możemy ustawić to 15 em, więc pole tekstowe będzie musiała zawsze posiadać, co najmniej 15 znaków. Jeśli użytkownik zmieni rozmiar okna dialogowego do bardzo małego, to wprowadzany tekst nie będzie się kurczył poza obszar 15 em. Zostanie narysowany wtedy, gdy rozszerzymy nasz obszar poza brzeg okna. Zwróć uwagę, że na obrazku z boku, wprowadzony tekst zwiększył swój rozmiar, gdy rozszerzymy okno do pełnego rozmiaru.

Pola upakowane

Powiedzmy, że mamy pole z dwoma elementami potomnymi, żaden nie jest elastyczny, ale pole jest elastyczne. Na przykład:

Przykład 3 : Źródła Podgląd

<box flex="1">
  <button label="Happy"/>
  <button label="Sad"/>
</box>

Jeśli zmienisz rozmiar okna, pole wystarczy do dopasowania rozmiaru okna. Przyciski nie są elastyczne więc nie będą zmieniać swojej szerokości. Wynikiem jest dodatkowa przestrzeń, która pojawi się po prawej stronie okna, wewnątrz pola. Możesz sobie jednak życzyć aby dodatkowa przestrzeń pojawiła się po lewej stronie, aby przyciski pozostały poprawnie ustawione w oknie.

Możesz dokonać tego przez umieszczenie separatora wewnątrz pola, ale może wyglądać to niechlujnie, kiedy musisz to robić wiele razy. Lepszym sposobem jest zastawanie dodatkowego atrybutu pack w polu. Atrybut ten wskazuje jak pack (spakować... ale zobacz czcionkę) elementy potomne wewnątrz pola. Dla orientacji poziomej pól steruje poziomym pozycjonowaniem potomków, zaś dla orientacji pionowej pól steruje pionowym pozycjonowaniem potomków. Możesz zastosować następujące wartości:

You could accomplish this by placing a spacer inside the box, but that gets messy when you have to do it numerous times. A better way is to use an additional attribute pack on the box. This attribute indicates how to pack the child elements inside the box. For horizontally oriented boxes, it controls the horizonal positioning of the children. For vertically oriented boxes, it controls the vertical positioning of the children. You can use the following values:

start 

Pozycjonuje elementy od lewego brzegu dla pól poziomych i od górnego brzegu dla pól pionowych. Jest to wartość domyślna.

center 

Centruje elementy potomne w polu.

end 

Pozycjonuje elementy od prawego brzegu dla pól poziomych i od dolnego brzegu dla pól pionowych.

Atrybut pack jest stosowany dla pola zawierającego elementy będące pakowanymi, a nie same elementy.

Możemy zmienić wcześniejszy przykład do centrowania elementów jak pokazano:

Przykład 4 : Źródła Podgląd

<box flex="1" pack="center">
  <button label="Happy"/>
  <button label="Sad"/>
</box>

Teraz, kiedy okno zmieniło rozmiar, przyciski są umieszczone centralnie. Porównaj to zachowanie z tym z poprzedniego przykładu.

Pole regulowane

Jeśli zmienisz rozmiar okna poziomo w powyższym przykładzie Happy-Sad, pole zwiększy szerokość. Jeśli zmienisz rozmiar okna pionowo, zauważysz, że przyciski zwiększyły wysokość. Jest tak ponieważ elastyczność jest zakładana domyślnie w tym drugim kierunku.

Możesz sterować tym zachowaniem atrybutem align. Dla pól poziomych steruje pozycjonowaniem potomków pionowo. Dla pól pionowych steruje pozycjonowaniem poziomym potomków. Możliwie wartości są podobne do tych dla pack.

start 

Ustawia elementy wzdłuż górnego brzegu dla pól poziomych i wzdłuż lewego brzegu dla pól pionowych.

center 

Centruje elementy potomne w polu.

end 

Ustawia elementy wzdłuż dolnego brzegu dla pól poziomych i wzdłuż prawego brzegu pól pionowych.

baseline 

Ustawia elementy tak, aby tekst był ustawiony w rzędzie. Jest to użyteczne dla pól poziomych.

stretch 

Ta wartość, domyślna, powoduje, że elementy rosną do odpowiedniego rozmiaru pola, podobnie do elementów elastycznych, ale w przeciwnym kierunku.

Jak przy atrybucie pack, atrybut align stosuje się dla zawartości pola dla elementów będących ustawianymi, a nie dla samych elementów.

Na przykład, pierwsze pole poniżej, będzie miało swój obszar potomny, ponieważ jest domyślny. Drugie pole ma atrybut align, więc jego potomkowie będą umieszczeni centralnie.

Przykład 5 : Źródła Podgląd

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="yesno" title="Pytanie" orient="horizontal"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <hbox>
    <button label="Tak"/>
    <button label="Nie"/>
  </hbox>
  <hbox align="center">
    <button label="Może"/>
    <button label="Być może"/>
  </hbox>

</window>

Możemy także użyć własności stylów -moz-box-pack i -moz-box-align zamiast określonych atrybutów.

Przycinanie/Skracanie tekstu i przycisków

Możemy potencjalnie stworzyć element przycisku, który zawiera etykietę, która jest większa niż maksymalna szerokość przycisku. Oczywiście, rozwiązaniem byłoby zwiększenie rozmiaru przycisku. Jednak, przyciski (i inne elementy z etykietami) mają specjalny atrybut nazwany crop, który pozwala ci określić jak tekst może być przycięty jeśli jest zbyt długi

Jeśli tekst jest przycięty pojawi się wielokropek (...) na przycisku, gdzie tekst został skrócony. Poprawne są cztery możliwie wartości:

left 

Tekst przycięty z lewej strony.

right 

Tekst przycięty z prawej strony.

center 

Tekst jest przycięty w środku.

none 

Tekst nie został przycięty. Jest to wartość domyślna.

Ten atrybut jest rzeczywiście użyteczny tylko kiedy okienko dialogowe zostało stworzone aby być użytecznym w danym rozmiarze. Atrybut crop może również być użyty z innymi elementami, które stosują atrybut label dla etykiet. Poniżej pokazano ten atrybut w działaniu.

Przykład 6 : Źródła Podgląd

<button label="Proszę, Naciśnij mnie!" crop="right" flex="1"/>

Odnotuj jak tekst na przycisku został przycięty z prawej strony po uczynieniu okienka mniejszym.

W następnym artykule podsumujemy i opiszemy szczegóły modelu pudełkowego.