跳到主要内容

UI

The components themselves, grouped by what they do on a page: controls, overlays, data display, navigation, feedback and layout.

Overview​

The groups are:

GroupDescription
Form controlsInputs, pickers and the containers that label them.
Interactive elementsButtons in their variants -- plain, icon, floating, main-menu -- and the drag-and-drop surfaces: components whose job is to be clicked or dragged.
Status componentsLoaders and progress: spinners, the full-screen application loader, the infinite-scroll loader and the progress bar.
LayoutThe page's plumbing: portals, scroll areas, the selection rectangle and the theme wrapper.
Layout componentsScreens for the moments a view has nothing to show: an empty folder, a search with no results, an error.
OverlaysEverything drawn above the page: modal dialogs and side panels, drop-downs and context menus, tooltips and the selector.
Data displayComponents that show a value rather than take one: text and headings, avatars, badges and tags, room icons and logos, and cards.
SkeletonsPlaceholder shapes shown while content loads, so the layout does not jump when it arrives.
FeedbackComponents that tell the user what happened or what is happening: toasts and snack bars, status messages, info bars and progress for long operations.
NavigationLinks, tabs, paging and the side menu that moves the user between views.
RowsThe row-based list the portal shows files and rooms in, with its container and content layout.
TableThe data table with resizable columns, its header, rows and group menu.
TilesThe tile grid: a container, the base tile and the file, folder, room and template tiles built on it.