W tym poście pokażę Wam, jak działają kształty danych – na żywo prześledzimy, jak krok po kroku tworzyć własny kształt oraz jak zaprojektować komponent prezentujący ten kształt, czyli FuturePresentation. Ta instrukcja pomoże Ci zrozumieć, jak definiować strukturę danych pod wyświetlanie różnorodnych informacji na stronie.
Na początku tworzymy nowy kształt danych, który jest bazą dla naszego komponentu. Warto od razu zadbać o przemyślaną strukturę pól. Podstawą będzie pole main – pole obiektowe, które zawiera inne kluczowe informacje, takie jak:
Po dodaniu takich pól zapisujemy nasz kształt.
Po zapisaniu, system może automatycznie wygenerować przykładowy content, który od razu wyświetli się z prawej strony, prezentując wygląd naszego kształtu.
Następnie możemy personalizować ten widok – dodawać klasy CSS/Tailwind, by uzyskać pożądany wygląd. Przykładowo, można od razu wdrożyć tryb dark mode z efektami gradientu na tekście i polach.
Możemy zdefiniować, jak nasz komponent ma się prezentować — na przykład dodać opis "Feature umożliwiający automatyczne tłumaczenia". Warto przy tym korzystać ze stylistyki nawiązującej do innych komponentów, np. pricing.
Generowanie przykładowej prezentacji pokazuje, jak nasz kształt wygląda – z zastosowaniem stylów i gradientów zaprogramowanych w strukturze.
Na tym etapie łatwo można modyfikować takie cechy jak grubość tekstu (np. ustawiać wartość semibold) czy inne detale prezentacyjne.
Wszystkie zmiany można natychmiast zapisywać i oglądać ich efekt na żywo.
Czas przejść do prezentacji naszej pracy – zbudujmy widok, w którym prezentowane są różne cechy systemu. Każdy feature może być osobnym kształtem danych tego samego typu (np. FuturePresentation), co daje dużą elastyczność i prostotę dodawania kolejnych sekcji:
Gotowe kształty danych łatwo zaimportować na stronie lub w aplikacji frontendowej. Prezentacja różnych sekcji feature'ów uzyskuje spójny, efektowny wygląd, a całość jest łatwa do rozbudowywania – np. przez dopisywanie nowych cech czy modyfikowanie treści.
Tworzenie kształtów danych i komponowanie z nich stron / sekcji pozwala dynamicznie rozwijać prezentację produktu czy systemu. Dzięki temu rozwiązaniu możesz:
To świetne narzędzie dla developera, marketera i projektanta!