Joana Mendes

Joana Mendes

Administrator

Home
Reports

RDS - Overlays Component's

The Overlays Components page in our design system features a collection of crucial UI elements designed to create layered interfaces and enhance user interaction. These Vue.js components, including modals, tooltips, and popovers, provide effective solutions for displaying additional content and information. Each component is meticulously documented using Storybook, offering detailed guidance for implementation and customization to meet the specific needs of your applications.

Explore the different components as well and their configurations to find the best fit for your data visualization needs. Each component is accompanied by comprehensive documentation and examples to help you get started quickly and efficiently.

1. BottomSheet

BottomSheets are components that display additional content in an overlay layer at the bottom of the current page, providing quick access to additional information or actions without interrupting the main flow of the interface.

2. Modal

Modals are like custom dialogs, windows that display additional content on a layer above the current page, with an overlay covering the page and making it temporarily inaccessible.

1. size="sm"
2. size="md"
3. size="lg"
4. size="xl"

3. Popover

The Popover component is a floating element used to display information and actions related to the content on the screen upon interaction. It is useful for providing contextual information and options without cluttering the main interface.

1. width="250" height="200"
Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk. Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk.
2. fitContentWidth="true"
Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk. Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk.
3. rightAligned="true"
Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk. Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk.
4. verticalFluid="true"
Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk. Mussum Ipsum, cacilds vidis liter abertis. The order of the tractors does not change the hard bread. It's depressed, I know a cachacis that can brighten your life.Paisis, filhis, espiritis santis.Leite de capivaris, headless manquis mule milk.

5. RichTooltip

The RichTooltip component, like standard tooltips, provides floating labels to explain elements of the interface. However, RichTooltip offers greater freedom for describing structured and/or longer texts, making it ideal for more detailed explanations or instructions.

1. fitContentWidth="true"
Tooltip trigger

In attendance: 280

Pending: 60

In monitoring: 600

2. fitContentWidth="false" width="250"
Tooltip trigger

In attendance: 280

Pending: 60

In monitoring: 600

3. fitContentWidth="false" width="500"
Tooltip trigger

In attendance: 280

Pending: 60

In monitoring: 600

6. SideSheet

SideSheets are panels that appear on the right side of the screen. Similar to Modals, they are useful when users need to complete actions without losing the context of the current page.

1. size="sm"
2. size="md"
3. size="lg"
4. size="xl"