6 listopada 2024 r.

Zagnieżdżanie grup w bloku zerowym

Zero Block obsługuje teraz zagnieżdżanie, umożliwiając umieszczanie jednej grupy elementów wewnątrz innej. Przyjrzyjmy się, kiedy zagnieżdżanie może być przydatne i jak z niego korzystać.

Kiedy używać zagnieżdżania

Zagnieżdżanie może być szczególnie przydatne podczas projektowania z Auto Layout (elastyczne kontenery), tworzenia kart, galerii i nie tylko. Na przykład, utworzyłeś kartę dla swojego bloga z tytułem, opisem i obrazem. Następnie zgrupowałeś te elementy (wybierz wiele elementów → Grupuj), ustawiłeś je jako grupę obiektów (Grupa → Obiekt) i włączyłeś Auto Layout (Auto Layout → Flex → Auto), aby wysokość karty automatycznie dostosowywała się do jej zawartości. Dodałeś również adres URL i ustawiłeś kolor tła.

Aby bardziej elastycznie dostosować odstępy między tytułem a opisem, zgrupowałeś te dwa elementy tekstowe razem i włączyłeś Auto Layout dla tej nowej grupy. Teraz masz zagnieżdżoną grupę z elastycznymi właściwościami.

Obejrzyj samouczek dotyczący projektowania przy użyciu Auto Layout

Jak zagnieździć jedną grupę wewnątrz drugiej

Za pomocą panelu Warstwy.
Korzystanie z funkcji przeciągnij i upuść (tylko z włączoną funkcją Auto Layout).
Za pomocą skrótu klawiaturowego Cmd/Ctrl+G.
Za pośrednictwem panelu Ustawienia.
Z menu kontekstowego.

Grupy można zagnieżdżać wewnątrz innych grup do pięciu poziomów głębokości. Jednak elementy zgrupowane jako grupa logiczna nie mogą być zagnieżdżane wewnątrz grupy obiektów. Jeśli spróbujesz je zagnieździć, grupa logiczna zostanie automatycznie przekonwertowana na grupę obiektów.

Przypadki użycia dla grup zagnieżdżonych

Oto kilka przykładów, kiedy grupy zagnieżdżone są szczególnie przydatne i jak można je wykorzystać w swoich projektach.

Rozstaw i pozycjonowanie bez wysiłku

Poniższy przykład przedstawia ekran główny sklepu meblowego, ze wszystkimi elementami zgrupowanymi jako grupa obiektów i włączonym układem automatycznym. Istnieje jedna grupa, która zawiera wiele zagnieżdżonych grup, takich jak obraz okładki, logo, menu nawigacyjne i galeria kart, gdzie każda karta jest również grupą. Układ automatyczny i grupy zagnieżdżone umożliwiają automatyczne dostosowanie całego układu do wszelkich zmian zawartości, ułatwiając przenoszenie elementów i zmniejszając potrzebę ręcznych poprawek.

Elastyczna konfiguracja animacji

Zagnieżdżanie grup jest również przydatne do stosowania różnych efektów animacji dla różnych grup. Można na przykład ustawić animację wyglądu dla całej karty i oddzielną animację najechania kursorem dla zagnieżdżonej grupy z pojedynczym elementem, takim jak strzałka.

Szybkie i łatwe responsywne układy

Auto Layout, w połączeniu z zagnieżdżaniem, pozwala szybko dostosować układ witryny do różnych rozdzielczości ekranu. Oszczędza to również powtarzalnej pracy ręcznej - raz ustawione ustawienia automatycznie kontrolują sposób, w jaki wszystkie elementy reagują na zmiany treści lub rozmiaru i odpowiednio się wyrównują.

Zobacz także

Twórz skuteczne quizy marketingowe dzięki nowemu blokowi QZ101 "Quiz Form"

Nowy blok umożliwia elastyczne dostosowywanie wyglądu quizu, dodawanie wiadomości powitalnej i podpowiedzi pomocy wirtualnego konsultanta oraz konfigurowanie wyników na podstawie odpowiedzi użytkowników.

Grupy obiektów w bloku zerowym Tildy

Zgrupowane elementy można przekształcić w osobny element i skonfigurować jego ustawienia.