GitLab User Interface Components
This outline describes the GitLab User Interface Components, used in the GitLab application.
Navigation
The navigation bar, a core component of GitLab, offers users a consistent and familiar way to navigate through the application. The navigation bar is built upon the gl-nav component, which provides a flexible framework for different navigation types.
Example:
- The main navigation bar at the top of the page is defined within the
gl-navcomponent. - Different sections are defined using the
gl-nav-itemcomponent. - Each section can contain nested sub-navigation elements using the
gl-nav-dropdowncomponent.
Source:
Modals
Modals provide a way to display additional content in a focused, overlayed manner. They are typically used for actions like confirmation, editing, or providing more information.
Example:
- When a user clicks “Edit” on a project setting, a modal opens with the relevant fields for editing.
- Confirmation modals are used for actions that might have irreversible consequences.
Source:
Forms
Forms allow users to input and submit data. They are used extensively throughout the application for actions like creating new projects, adding collaborators, or updating settings.
Example:
- The project creation form utilizes several input fields, such as project name, description, and visibility settings.
- The user registration form requires fields for username, email, and password.
Source:
Tables
Tables are used to display structured data in a clear and organized manner.
Example:
- The issue list displays a table of issues, showing details like title, status, assignee, and last updated.
- The merge request list uses a table to display information about each merge request.
Source:
Additional Information
- The GitLab UI Components are based on Vue.js, a progressive framework.
- The UI components are designed to be modular, reusable, and accessible.
Source:
- Documentation: -/doc/development/frontend/ui-components.md
