HuskarUI Documentation

The HusInput component is a wrapper for basic form fields, allowing users to input content via mouse or keyboard. It is part of the HuskarUI.Basic module and inherits from TextField. It also serves as the base for HusDateTimePicker and HusAutoComplete.

Key features include support for icons, clear buttons, and various visual styles (outlined, dashed, borderless, underlined, or filled).

import QtQuick
import HuskarUI.Basic

HusInput {
    width: 150
    placeholderText: 'Basic Usage'
}

HuskarUI provides several components for managing navigation and user orientation within a QML application. The available components in the Navigation category are:

• HusBreadcrumb: Breadcrumb navigation for showing hierarchy.
• HusContextMenu: Context menus that appear on user interaction.
• HusMenu: Standard menu components.
• HusPagination: Pagination controls for navigating through large datasets.
• HusScrollBar: Scroll bar components for navigating content overflow.

The HusTextArea component is a wrapper for multi-line text input via mouse or keyboard. It inherits from Control and provides advanced features like auto-resizing, character limits, and manual resizing.

To access native TextArea properties that are not explicitly exposed by HusTextArea, use the textArea property.

import HuskarUI.Basic

HusTextArea {
    text: "Hello World"
    placeholderText: "Enter text here..."
}

The HusTableView component (from the HuskarUI.Basic module) is used to display data in a grid format with rows and columns. It inherits from HusRectangle and supports features like column/row resizing, sorting, filtering, and row selection.

To use it, you typically provide an initModel (an array of data objects) and a columns array (defining the structure and delegates for each column).

import { HusTableView } from 'HuskarUI/Basic'

HusTableView {
    initModel: [{ key: '1', name: 'Item 1' }, { key: '2', name: 'Item 2' }],
    columns: [
        { title: 'ID', dataIndex: 'key', delegate: MyDelegate },
        { title: 'Name', dataIndex: 'name', delegate: MyDelegate }
    ]
}

The General category in HuskarUI contains fundamental building blocks for constructing user interfaces in QML. These components cover basic layout, typography, interaction, and window management.

Available components include:

• Buttons: HusButton, HusButtonBlock (a variant of HusIconButton), and HusIconButton.
• Text & Labels: HusText, HusLabel, HusIconText, and HusCopyableText.
• Containers & Layout: HusFrame, HusPage, HusRectangle (rounded rectangle), and HusRadius (corner radius control).
• Windows & Overlays: HusWindow (borderless window), HusPopup (popups), and HusCaptionBar.
• Interaction Areas: HusMoveMouseArea (for moving elements), HusResizeMouseArea (for resizing elements), and HusCaptionButton.

Refer to the specific documentation for each component to learn about its properties and usage.

The Effect category in HuskarUI provides visual enhancement components to improve the UI's aesthetic quality. It includes the following specialized components:

• HusAcrylic: Provides an acrylic-style translucency effect.
• HusLiquidGlass: Implements a liquid glass visual effect.
• HusShadow: Manages shadow and depth effects.
• HusSwitchEffect: Handles transition and switching visual effects.

The main repository provides the QML component library. If you are using different environments, consider these alternatives:

• Python (PySide6): Use HuskarUI for PySide6.
• Qt5: Use HuskarUI for Qt5.

HuskarUI provides a suite of feedback components designed to communicate status, confirm actions, and provide information to users in QML applications. The available components include:

• HusDrawer: A drawer component for sliding content in/out.
• HusMessage: Message prompts for brief user feedback.
• HusModal: Dialog boxes for critical interactions or information.
• HusNotification: Notification boxes for non-intrusive alerts.
• HusPopconfirm: Popconfirm bubbles for confirming user actions.
• HusPopover: Popover bubbles for displaying contextual information.
• HusProgress: Progress bars to indicate task completion.
• HusSpin: Loading indicators (spinners).
• HusWatermark: Watermark components for security or branding.

The DataDisplay category in HuskarUI provides a variety of components for presenting information, media, and structured data. Use these components to enhance your QML user interfaces with pre-built UI elements like cards, carousels, tables, and timelines.

Available components include:
- HusAnimatedImage: Animated images
- HusAvatar: Avatars
- HusBadge: Badges/Counters
- HusCard: Cards
- HusCarousel: Carousels
- HusCheckerBoard: Checkerboards
- HusCollapse: Collapse panels
- HusEmpty: Empty states
- HusImage: Images
- HusImagePreview: Image previews
- HusQrCode: QR codes
- HusSegmented: Segmented controls
- HusTableView: Tables
- HusTabView: Tabs
- HusTag: Tags
- HusTimeline: Timelines
- HusToolTip: Tooltips
- HusTourFocus: Tour focus elements
- HusTourStep: Guided tours
- HusTreeView: Tree views

HuskarUI provides several components for organizing and spacing UI elements within a QML application. The Layout category includes:

• HusDivider: A divider line used to separate content.
• HusGroupBox: A group box for visually grouping related components.
• HusSpace: A spacing component to manage gaps between elements.
• HusSplitView: A split view component for creating resizable panes.

The HusWindow component provides a cross-platform implementation of frameless windows, built upon QWindowKit. It is part of the HuskarUI.Basic module and inherits from Window.

Important Usage Constraint

Do not nest HusWindow components directly (e.g., placing a HusWindow inside another HusWindow) due to underlying Qt bugs. Instead, use a Loader to create the window dynamically.

// INCORRECT: Do not nest HusWindow
HusWindow {
    HusWindow { }
}

// CORRECT: Use a Loader for dynamic creation
HusWindow {
   Loader {
       id: loader
       visible: false
       sourceComponent: HusWindow {
           visible: loader.visible
       }
   }
}