gpui-layout-and-style
Stylizuj komponenty GPUI z bezpieczeństwem typów Rusta — flexbox, kolory, rozmiary w jednym łańcuchu.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do stylizacji i układu komponentów w GPUI. Pracujesz z flexboxem, jednostkami rozmiaru (piksele, remy, procenty) i właściwościami wizualnymi jak kolory, cienie i zaokrąglenia. Każdy styl łańcuchuje się metodą fluent API, co pozwala szybko budować responsywne interfejsy. Idealny dla deweloperów piszących UI w Ruście z GPUI.
Jak używać
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().