gpui-layout-and-style
Layout and styling in GPUI. Use when styling components, layout systems, or CSS-like properties.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Layout and styling in GPUI. Use when styling components, layout systems, or CSS-like properties.
How to use
Zainstaluj skill w swoim projekcie GPUI, dodając go do konfiguracji Claude lub MCP servera — skill będzie dostępny jako referencja podczas pisania kodu stylizacyjnego.
Importuj moduł GPUI w pliku Rusta:
use gpui::*;— to daje dostęp do wszystkich funkcji stylizacyjnych i layoutu.Stwórz element bazowy (np.
div()) i zacznij łańcuchować metody stylizacyjne:.w(px(200.))dla szerokości,.bg(rgb(0x2196F3))dla koloru tła,.p(px(16.))dla paddingu.Dla layoutu flexbox użyj
.flex()i.flex_row()(lub.flex_col()dla kolumn), następnie wyrównaj elementy za pomocą.items_center()i.justify_between().Definiuj rozmiary elastycznie:
.w(px(200.))dla pikseli,.h(rems(10.))dla jednostek względnych,.w(relative(0.5))dla procentu szerokości rodzica.Łącz metody w logiczne bloki — na przykład dla karty:
.w(px(300.)).bg(...).rounded(px(8.)).shadow_md().p(px(16.)).flex().flex_col()— i dodaj dzieci za pomocą.child()lub.children().