Patterns
Os patterns no Nimbus são combinações pré-definidas de componentes atômicos e compostos que resolvem problemas comuns de design e interação. Esses padrões são implementações testadas e validadas pela nossa equipe para ajudar os usuários a implementar soluções de design eficientes e consistentes.
App Shell
The AppShell component is the main outer frame of an application. It provides the basic architecture to build an application inside of our admin.
Leia a documentaçãoCalendar
The Calendar component allows the user to select a date or range of dates in a simple, straitforward and flexible UI thats based off of ReactDayPicker. It extends the properties of the ReactDayPicker component. Refer to the documentation site for a complete reference of the component's API.
Leia a documentaçãoCallout Card
This component is used to provide the user with useful information, tips, tutorials or shortcuts to other parts of the product. It is a visual component specially designed to be used in contexts such as integration, tutorials or dashboards, where we need to show different relevant information in the same space.
Leia a documentaçãoData List
DataList is a flexible list-style component that enables the organization of customizable row elements in a vertical manner, with visual separators between rows.
Leia a documentaçãoData Table
DataTable is a highly versatile component used to organize large quantities of tabular data. It supports pagination to help navigate through the data easily and efficiently, and also allows the user to sort and filter the data by columns. Additionally, it offers the ability to select one or multiple rows using checkboxes, which can be useful for performing batch actions or manipulating the data in other ways.
Leia a documentaçãoEditor
The Editor component was built using the Lexical API and was developed to be used in rich text fields.
Leia a documentaçãoEmpty Message
The Empty Message component can be used in multiple scenarios. To communicate whenever a search returns no results, if a page has no content, or if there is an error loading data. It can include an icon or illustration to support the written content, as well as a title and additional content text, and an optional node with actions that can be provided to the user so as to engage in next steps if there is an error on the page.
Leia a documentaçãoForm Field
The FormField component allows the user to enter or edit information in text format. Additionally, it provides a label, and a conditional help text that can be used to provide additional context on a validation scenario.
Leia a documentaçãoHelp Link
Help Link component is intended for adding helpful links with tutorials or educational content on the UI.
Leia a documentaçãoInteractive List
Interactive List allows users to build lists with multiple options that have some kind of interaction. It can be, and is not limited to, checkboxes, radios, toggles and buttons. This component is built on top of the DataList component that allows the creation of scrollable lists with multiple entries of different kinds of data.
Leia a documentaçãoLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leia a documentaçãoMenu Button
The Menu Button component allows the user to create in-app menu-buttons that navigate through different sections of an application.
Leia a documentaçãoMenu
The Menu component allows the user to create in-app menus that navigate through different sections of an application.
Leia a documentaçãoNav Tabs
The NavTabs component represents the main navigation dock for an application on a mobile device, including up to 5 tabs or buttons for different sections. The component has a fixed position on the bottom of the screen.
Leia a documentaçãoPage
Page component allows the user to build application pages with all the necessary attributes for constructing a variety of layouts.
Leia a documentaçãoProduct Updates
ProductUpdates component allows the user to showcase new features or updates in a non-distractive way by displaying the information in a floating popover with a high-contrast setting that catches the eye of the user.
Leia a documentaçãoSide Modal
Sidemodal navigation provides access to the parts within its application. The side sections have the supplementary content that is linked on the left or right side of the screen.
Leia a documentaçãoThumbnail With Action
The Thumbnail With Action pattern allows you to add interactive elements to image thumbnails. By overlaying custom content onto a thumbnail component in one of the four corners, you can embed atomic components such as buttons, icons, or links that enable users to perform specific actions related to the image.
Leia a documentação