DOCSEARCHbyAlgolia
Submit Docs

Inkline Vue.js 3 Design System

website·Indexed 33 days ago

https://www.inkline.io/docs

A comprehensive design system for Vue.js 3 featuring a 12-column flexbox grid, a wide array of UI components like navbars, sidebars, and tabs, and robust form components with validation. It includes a system of design tokens for customization via inkline.config.ts and an optional UnoCSS preset for on-demand atomic CSS utility classes.

Tokens
35.4K
Snippets
183
Records
342
Agent score
70%

What's inside Inkline

  1. Overview of Inkline UI Library

    Inkline is a UI component library designed for building high-quality, accessible, and customizable design systems using Vue.js 3. It focuses on providing a consistent and expressive API to ensure a strong User Interface (UI), User Experience (UX), and Developer Experience (DX).

  2. Overview of Inkline UI Library

    Inkline is a UI components library for Vue.js designed to provide a foundation for building high-quality, accessible, and customizable design systems. It is written entirely in TypeScript and utilizes the Vue.js Composition API. Key features include a minimal design for easy customization, full responsiveness across devices, and support for tree-shaking to optimize final bundle performance.

  3. Overview of Inkline UI Library

    Inkline is an MIT-licensed, open-source UI library for Vue.js designed with a focus on User Interface (UI), User Experience (UX), and Developer Experience (DX). It features a mobile-first design, micro-interactions, and a consistent codebase. Key technical capabilities include configurable WAI-ARIA for accessibility and a system of thousands of customizable CSS variables and a dedicated configuration file for styling and behavior.

  4. Implement site navigation with the Inkline Breadcrumb component

    The Breadcrumb component displays the hierarchical structure of pages to help users backtrack or navigate related content. Separators are automatically added via the CSS ::before pseudo-element. To customize the separator character or style, update the --breadcrumb--separator CSS variable.

  5. Implement multiple selection with ICheckboxButtons

    The ICheckboxButtons component allows users to select multiple options from a set using a group of buttons, controlled by a single binding. The modelValue for this component is an array containing the id values of the selected options.

  6. Use the ICheckboxGroup component for multiple selection

    The ICheckboxGroup component allows you to control multiple selected values using a single binding. It accepts an array of objects via the options prop. The modelValue of the component will be an array containing the id values of the selected options.

  7. Implement a responsive navigation sidebar with ISidebar

    The <ISidebar> component provides a responsive navigation sidebar that supports branding, navigation, and forms. It automatically collapses based on screen size breakpoints.

  8. Implement a basic Hamburger Menu with IHamburgerMenu

    The <IHamburgerMenu> component is used to control the opening and closing of UI elements. It is commonly paired with the Navbar and Sidebar components to manage their collapsed or expanded states.

  10. Implement a loading state with the Loader component

    The Loader component provides a customizable loading spinner to indicate that an action is in progress and the user must wait for completion. It is designed to be versatile and can adapt to various container sizes.

  11. Inkline 4 Component Architecture

    Inkline 4 components are rewritten using the Vue Composition API. They utilize the defineComponent + setup() approach (instead of <script setup>) to expose component fields directly, ensuring better compatibility with different frameworks. A new IToastContainer component is included for managing toast notifications without third-party plugins.

  12. Use the Alert component for contextual feedback

    The Alert component is used to display contextual feedback messages. It supports flexible content, optional icons, and can be configured for different visual contexts using the color property.