acronis / ui-component-library

The Acronis UI Component Library is a UI component library for Web applications based on Vue.js v3
https://acronis.github.io/ui-component-library/
MIT License
20 stars 11 forks source link

Aside component #117

Open leonid opened 2 months ago

leonid commented 2 months ago

An Aside component is a UI element typically used to display supplementary content that is related to the main content of a webpage. Here are the key features an Aside component should have:

  1. Positioning: Ability to position the aside element relative to the main content (e.g., left, right, top, bottom).
  2. Responsive Design: Adaptable to different screen sizes and orientations, often collapsing or hiding on smaller screens.
  3. Custom Styling: Ability to customize the appearance through CSS classes or styles.
  4. Content Slotting: Support for slotting content, allowing developers to insert various types of content within the aside.
  5. Collapsible: Option to collapse or expand the aside component to save space.
  6. Fixed or Sticky Positioning: Support for fixed or sticky positioning to keep the aside visible while scrolling.
  7. Accessibility: Ensure the component is accessible with proper ARIA attributes.
  8. Theming: Support for different themes to match the application's design system.
  9. Animations: Support for animations when the aside is shown or hidden.
  10. Interactive Elements: Ability to include interactive elements such as links, buttons, or forms.
  11. Shadow and Elevation: Option to add shadow or elevation effects to distinguish the aside from the main content.
  12. Width Control: Customizable width to fit various layouts and designs.
  13. Header and Footer: Option to include a header and footer within the aside for additional structure.
  14. Events: Emit events for user interactions such as open, close, and toggle.

These features ensure that the Aside component is versatile, user-friendly, and accessible.