Patterns
Los patterns en Nimbus son combinaciones predefinidas de componentes atómicos y compuestos que resuelven problemas comunes de diseño e interacción. Estos patterns son implementaciones probadas y validadas por nuestro equipo para ayudar a los usuarios a implementar soluciones de diseño eficientes y 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.
Leer documentaciónCalendar
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.
Leer documentaciónCallout 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.
Leer documentaciónData 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.
Leer documentaciónData 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.
Leer documentaciónEditor
The Editor component was built using the Lexical API and was developed to be used in rich text fields.
Leer documentaciónEmpty 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.
Leer documentaciónForm 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.
Leer documentaciónHelp Link
Help Link component is intended for adding helpful links with tutorials or educational content on the UI.
Leer documentaciónInteractive 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.
Leer documentaciónLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leer documentaciónMenu Button
The Menu Button component allows the user to create in-app menu-buttons that navigate through different sections of an application.
Leer documentaciónMenu
The Menu component allows the user to create in-app menus that navigate through different sections of an application.
Leer documentaciónNav 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.
Leer documentaciónPage
Page component allows the user to build application pages with all the necessary attributes for constructing a variety of layouts.
Leer documentaciónProduct 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.
Leer documentaciónSide 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.
Leer documentaciónThumbnail 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.
Leer documentación