Joana Mendes
Administrator
RDS - Utils Component's
The Utils Components page in our design system highlights a range of versatile UI elements designed to support and enhance the functionality of your applications. These Vue.js components offer various utilities to streamline development and improve efficiency. Each component is thoroughly documented using Storybook, providing detailed guidance for implementation and customization to suit your unique needs.
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. Clickable
The Clickable Component in our design system provides a wrapper for components lacking native click interaction, enabling them to be clickable. This Vue.js component enhances usability by adding essential click functionality to various UI elements. Detailed Storybook documentation ensures straightforward integration and customization for seamless implementation across your application.
1. clickable="true" - (default)
2. clickable="false"
2. ImageComponent
The Image utility component in our design system simplifies the rendering of images with fallback options. This Vue.js component ensures robust image handling for various scenarios, including fallbacks when the primary image fails to load.
1. width="400" blackAndWhite="false" dimmed="false" roundedCorners="false" opacity="1"
2. width="400" blackAndWhite="true" dimmed="true" roundedCorners="true" opacity="0.5"
3. Spacer
The Spacer utility component in our design system provides standardized padding and margin values based on the RDS token system. This Vue.js component ensures consistent spacing throughout your application, enhancing layout consistency and design coherence.
1. paddingTop="10" marginRight="15" marginLeft="50"
4. Truncate
The Truncate utility component in our design system provides a straightforward way to truncate text by adding ellipsis when the content exceeds a specified length. This Vue.js component helps maintain clean and compact UI layouts, especially useful for displaying long strings of text in limited space.