DOCSEARCHbyAlgolia
Submit Docs

BalmUI

repository·main·Indexed 19 days ago

https://github.com/balmjs/balm-ui

A modular and customizable Material Design UI library based on Vue 3, providing enterprise-class components, plugins, and directives. It supports integration with Balm CLI, Vue CLI, Vite, and CDN usage, and allows for deep visual customization of components like Buttons, Badges, and Bottom Sheets via SCSS variables.

Tokens
173.2K
Snippets
671
Records
817
Agent score
64%

What's inside balm-ui

  1. What is BalmUI

    main

    BalmUI is a modular and customizable Material Design UI library built specifically for Vue 3. It provides enterprise-class components, plugins, directives, and utilities designed for web applications.

    Key capabilities include:

    • High-quality Vue components and utilities out of the box.
    • Deep theme customization for every detail of the UI.
    • Integrated support for the latest Material Icons.
    • Modular architecture allowing components and plugins to be used individually.

  8. Use the `<ui-drawer>` component

    main

    The <ui-drawer> component provides a side navigation drawer. It supports three distinct modes defined by the type prop:

    1. permanent (type 0): A persistent drawer that is always visible. It does not support props or events.
    2. dismissible (type 1): A drawer that can be toggled open or closed.
    3. modal (type 2): A drawer that overlays the content, typically used for mobile navigation.

    Important Requirements:

    • For dismissible and modal types, you must include a <ui-nav> component inside the drawer. The first <ui-nav-item> within that navigation should have its activated state applied to indicate the current location.
    • The drawer typically contains <ui-drawer-header> and <ui-drawer-content> as child components via the default slot.
    <ui-drawer type="modal">
  <ui-nav>
    <ui-nav-item activated>
      <!-- Navigation items -->
    </ui-nav-item>
  </ui-nav>
</ui-drawer>

  11. Add a material ink ripple effect with Ripple

    main
    The Ripple utility provides the JavaScript and CSS necessary to implement the Material Design "ink ripple" interaction effect on components or any arbitrary DOM element. It is designed to be efficient and uninvasive, meaning it does not require adding extra DOM elements to your target components to function.

  12. Understand Elevation and Z-space in BalmUI

    main
    In BalmUI, elevation is used to provide visual cues about an object's depth and separation from other surfaces using shadows. Elevation values are mapped to a "z-space" and range from 0 to 24. Higher values represent greater elevation and typically result in larger, more diffused shadows, indicating more separation between surfaces.