skills.rest
unoplatform
unoplatformOFFICIAL
Explore all skills by this author →
Website𝕏@unoplatformGitHub

uno-toolkit-chip

Generate Chip and ChipGroup XAML patterns for Uno Platform selection and filtering.

9|1|Updated Dec 10, 2024
Search Tags:#ux#filter#selection#xaml#chip#uno-toolkit#chipgroup
One-click install
npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-chip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uno-toolkit-chip
Source: https://github.com/unoplatform/studio/tree/main/plugins/uno-platform-studio/skills/uno-toolkit-chip
Command: npx skills add https://github.com/unoplatform/studio --skill uno-toolkit-chip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers implement and configure Chip and ChipGroup patterns to enable selection, filtering, and action triggers in Uno Platform UI, streamlining user interactions with compact, accessible chips.

Core Features & Use Cases

  • Chip types: AssistChip, InputChip, FilterChip, and SuggestionChip styles with optional leading icons and removable chips.
  • Grouping and selection: ChipGroup supports single or multiple selection modes and can enforce removal behavior.
  • Use Case: Build tag filters, search facets, or compact action triggers in lists and toolbars.

Quick Start

Define a ChipGroup bound to a collection and render chips with an optional remove button to enable selection and filtering.

Frequently Asked Questions about uno-toolkit-chip

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement chip-based selection and filtering in Uno Platform XAML?▼

To implement chip-based selection and filtering in Uno Platform, define a ChipGroup bound to a collection and render individual chips with optional remove buttons to capture user interactions.

What are the different chip style variants available for Uno Platform apps?▼

Uno Platform supports four chip style variants: AssistChip, InputChip, FilterChip, and SuggestionChip, each designed for specific compact UI interactions like tag filters or search facets.

Can I use ChipGroup for both single and multiple selection modes in cross-platform apps?▼

Yes, ChipGroup supports both single and multiple selection modes across web, desktop, and mobile targets, allowing you to enforce specific selection and removal behaviors for compact UI elements.

How do I add leading icons and remove buttons to filter chips in XAML?▼

You can enhance filter chips by configuring optional leading icons and removable chip behaviors within your XAML definition, ensuring correct namespace usage for rendering compact, accessible tag filters.

When should I use chips instead of other UI components for tag filters and multi-select pills?▼

Use chips for tag filters, multi-select pills, or compact action triggers in lists and toolbars when you need accessible, space-efficient elements that handle selection and action triggers seamlessly across platforms.

Related Skills

Explore More Software Engineering Skills→
unoplatformunoplatform
10.0k

add-sample

Generate XAML and C# code-behind files for new Uno Platform sample pages.

Official
Intermediate
foscomputerservicesfoscomputerservices
3

fosmvvm-react-view-generator

Generate React ViewModel views with test files and FOSMVVM bindings.

Community
Intermediate
unoplatformunoplatform
9

uno-toolkit-tabbar

Implement Uno Platform TabBar navigation with icons, labels, badges, and selection indicators for cross-platform apps.

Official
Intermediate
jiaiyanjiaiyan
21

el-select-v2

Virtualize long option lists in Element Plus Select components for Vue projects.

Community
Intermediate