Elemek hozzáadása és szerkesztése

Az elemek felépítése

A Bricks elrendezése elemfa. Minden elemnek van:

• típusa (például Szakasz, Címsor, Kép, Gomb, Űrlap),
• egyedi Bricks-azonosítója,
• gyermekeleme, ha tartalmazhat másik elemet,
• szülője, kivéve a gyökérelemeket,
• beállítása: ebben tárolódik a tartalom, a stílus, az osztályok, a feltételek, az interakciók és az egyéni attribútumok.

A gyökérelemek az oldaltartalom tetején ülnek, a beágyazottak egy másik elemen belül. A vászon a vizuális eredményt mutatja, a Szerkezet panel a tényleges hierarchiát.

Elem hozzáadása

Nyisd meg az elempanelt, és húzz egy elemet a vászonra vagy a Szerkezet panelre. A hely a célponttól függ:

• beágyazható elemre ejtve az új elem belekerül,
• testvérek közé ejtve ott foglal helyet,
• gyökérszintre ejtve legfelső szintű elem lesz.

Elrendezéselemet a helyi menüből is hozzáadhatsz, ha egy meglévő beágyazható elem ki van jelölve. A parancspalettával pedig egyszerre több elemet is beszúrhatsz.

Elrendezéselemek

Az elrendezéselemek: Szakasz, Tároló, Blokk és Div.

• Szakasz: a szokásos legfelső szintű oldalszakasz.
• Tároló: a szokásos, tartalomszélességű burkoló.
• Blokk: általános blokkszintű burkoló.
• Div: általános burkoló, kevesebb elrendezési feltevéssel.

Nem minden elem tartalmazhat gyermeket. Azokat, amelyek igen, beágyazhatónak nevezzük. A nem beágyazható elemek, például a legtöbb tartalomelem, mozgathatók, stílusozhatók, másolhatók és törölhetők, de nem lehetnek szülők.

Elem kijelölése és szerkesztése

Kattints egy elemre a vásznon vagy a Szerkezet panelen. A panel átvált a kijelölt elemre, és megmutatja a vezérlőit. A panel fejléce az elem címkéjét mutatja. A címkét átnevezheted, hogy a Szerkezet panel áttekinthetőbb legyen. A címke csak a szerkesztő rendezettségét szolgálja, a HTML-címkét és az előlapi szöveget nem változtatja.

A fejlécben az elemtől és a jogosultságaidtól függően gyorsműveletek is megjelenhetnek: elrejtés, feltételek, interakciók, komponensek és az örökölt globális elemek.

Tartalom fül

A Tartalom vezérlők az elem jelölését, adatait és viselkedését érintik. Ilyen például a Kép elem képforrása, a Gomb hivatkozása, a Címsor szövege vagy egy űrlap mezői és műveletei. A tartalomvezérlők nemcsak látható szöveget állíthatnak: szabályozhatnak szemantikus címkéket, attribútumokat, lekérdezési beállításokat, űrlapviselkedést, médiaforrásokat, hivatkozásokat és dinamikus adatot is.

Stílus fül

A Stílus vezérlők azt a CSS-t érintik, amit a Bricks a kijelölt elemhez, az aktív osztályhoz, az aktív választóhoz, az aktív pszeudóállapothoz és az aktív töréspontra generál. A vezérlők csoportjai általában:

• Elrendezés
• Tipográfia
• Háttér
• Szegély / Dobozárnyék
• Színátmenet / Átfedés
• Alakelválasztók
• Átalakítás
• CSS

Módosítás előtt nézd meg, mi az aktív cél a panel tetején:

• ha az elemazonosító aktív, a stílus csak erre az elemre vonatkozik,
• ha egy globális osztály aktív, a stílus mindenhol érvényes, ahol az osztály szerepel,
• ha pszeudóválasztó aktív, a stílus annak az állapotnak szól,
• ha egy töréspont aktív, a reszponzív érték arra a töréspontra kerül.

A legfontosabb szokás: előbb válaszd ki a célt, aztán módosítsd a vezérlőt.

Osztályok, választók és reszponzív szerkesztés

A Tartalom és Stílus fül fölötti választóterületen dől el, hogy az elemazonosítót, egy globális osztályt vagy egy választót/pszeudóállapotot stílusozol. Az újrahasznosítható stílushoz használj globális osztályt, az egyedihez az elemazonosítót, az állapotokhoz és a gyermekválasztókhoz pedig választót vagy pszeudóosztályt.

A reszponzív szerkesztést az eszköztárban aktív töréspont vezérli. A vezérlők mellett jelző mutathatja, hogy az adott vezérlőnek van értéke az aktív vagy egy másik töréspontra. Hogy mikor jelenik meg, az a szerkesztő beállításaitól függ (lásd a reszponzív szerkesztést).

Tömeges szerkesztés

Több elemet jelölhetsz ki a Cmd/Ctrl vagy a Shift billentyűvel. A tömeges szerkesztés közös stílusmódosításhoz, osztályhozzárendeléshez, mozgatáshoz, elrejtéshez, törléshez és néhány helyi menüs művelethez hasznos.

Korlátai:

• a Bricks a kijelölt elemek közös beállításait számolja ki,
• ha a kijelölt elemek értéke eltér, a közös vezérlő üresnek látszhat,
• egy közös beállítás módosítása a kijelölt elemek mindegyikére érvényes,
• ha különböző típusú elemeket jelölsz ki, csak a Stílus fül jelenik meg,
• néhány művelet tömeges módban le van tiltva, például a mentés komponensként vagy sablonként,
• a tömeges becsomagolás csak akkor működik, ha a kijelölt elemeknek közös a szülője.

Tömeges szerkesztést széles, kiszámítható műveletekhez használj. Tartalmas szerkesztéshez egyszerre egy elemtípuson dolgozz.

Elrejtés, feltételek és interakciók

Az elem szintű elrejtés, feltételek és interakciók az elempanel fejlécéből nyithatók, ha elérhetők.

• Elem elrejtése: elrejtheti az elemet a szerkesztőben, az előlapon, vagy mindkettőben.
• Feltételek: azt szabályozzák, hogy az elem megjelenjen-e az aktuális kérésnél.
• Interakciók: előlapi viselkedést kapcsolnak eseményindítókhoz és műveletekhez.

Ezek jogosultsághoz kötöttek. Ha nem látod őket, nézd meg a szerkesztői hozzáférést.

Komponensek és zárolt szerkesztési állapotok

Komponenspéldány kijelölésekor a Bricks a példányvezérlőket és a kitett tulajdonságokat mutatja, nem kezeli minden beágyazott elemet helyi oldaltartalomként. A komponens definíciójának szerkesztéséhez lépj a komponensszerkesztő módba.

Néhány elem az Elemkezelőn keresztül le lehet tiltva, vagy nem érhető el, mert az elemtípus már nem létezik. Ilyenkor a Bricks a szokásos vezérlők helyett értesítést mutat.

Az örökölt globális elemek régi oldalakon még megjelenhetnek. A Bricks elavultnak jelöli őket, és új újrahasznosítható tartalomhoz komponenseket javasol.

Vezérlők visszaállítása

Az olyan vezérlők, amelyeknek tárolt értéke van, a címke vagy a csoportcímke mellett kis jelzőt mutatnak. Vidd rá az egeret, és előjön a visszaállítás művelete. Visszaállíthatsz:

• egy vezérlőt,
• egy vezérlőcsoportot, például a Tipográfiát,
• az elemazonosító stílusait,
• az aktív osztály stílusait, ha osztályt stílusozol és nincs zárolva.

A stílusvezérlők visszaállítása a tárolt stílusértékeket törli az aktuális célról. A tartalmat, például a szöveget, hivatkozást, űrlapmezőt vagy képválasztást nem érinti. Globális osztály stílusozásakor a visszaállítás magára az osztályra hat, nem csak a kijelölt elemre.

Stílusok másolása és beillesztése

Kattints jobb gombbal egy elemre a vásznon vagy a Szerkezet panelen, hogy megnyíljon a helyi menü. Válaszd a stílusok másolását, jelöld ki a célelemet, és illeszd be a stílusokat. A beillesztés a másolt stílusadatot és az aktuális célt veszi figyelembe:

• elemstílus beillesztése a másolt stílusbeállításokat a célelemre alkalmazza,
• globális osztály stílusának beillesztése akkor alkalmazza a másolt osztálystílust, ha egy osztály az aktív cél,
• az alakelválasztókat, az egyéni CSS-t és más összetett stíluskezelőket stíluseadatként kezeli, ahol ez támogatott.

Az osztályok, feltételek, interakciók és attribútumok másolásáról a helyi menü fejezetében olvasol.

Gyakorlati ellenőrzőlista

Változtatás előtt győződj meg róla, hogy:

• a megfelelő elem van kijelölve,
• a megfelelő választó aktív: elemazonosító, osztály vagy pszeudóválasztó,
• a megfelelő töréspont aktív,
• jelölést vagy adatot a Tartalom, CSS-t a Stílus fülön módosítasz,
• nem komponensdefiníciót szerkesztesz, amikor a példányt akartad,
• mentettél, mielőtt az előlapi viselkedést kipróbálod.