46 lines
3.1 KiB
Markdown
46 lines
3.1 KiB
Markdown
# PivotKeysComponent
|
|
|
|
The `PivotKeysComponent` is a Blazor component designed to manage and display a list of selectable keys. It provides a drag-and-drop interface for reordering items and allows users to toggle the selection state of each key.
|
|
|
|
## Features
|
|
- **Drag-and-Drop Support**: Enables reordering of items in the list.
|
|
- **Two-Way Binding**: Supports two-way binding for the selected keys.
|
|
- **Dynamic Key Management**: Automatically synchronizes the displayed items with the provided key list.
|
|
- **Selection Toggle**: Allows users to toggle the selection state of individual keys.
|
|
|
|
## Parameters
|
|
|
|
| Parameter | Type | Default Value | Description |
|
|
|----------------|-------------------------------|---------------|-----------------------------------------------------------------------------|
|
|
| `AllKeys` | `IReadOnlyCollection<string>` | `null!` | The complete list of available keys. |
|
|
| `Value` | `string[]` | `[]` | The currently selected keys. |
|
|
| `ValueChanged` | `EventCallback<string[]>` | `null` | Callback invoked when the selected keys are updated. |
|
|
| `Class` | `string` | `""` | CSS class to apply to the root container of the component. |
|
|
| `LabelClass` | `string` | `""` | CSS class to apply to the labels of the items. |
|
|
|
|
## Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------------|-------------------------------|-----------------------------------------------------------------------------|
|
|
| `Items` | `List<ItemWithSelection>` | The list of items displayed in the component, including their selection state. |
|
|
|
|
## Behavior
|
|
|
|
- **Dynamic Item Synchronization**: The component synchronizes its internal list of items (`Items`) with the `AllKeys` and `Value` parameters.
|
|
- **Selection State Management**: The `IsSelected` property of each item is bound to a checkbox, allowing users to toggle the selection state.
|
|
- **Change Notification**: Changes to the selection state or item order trigger the `ValueChanged` callback.
|
|
- **Drag-and-Drop**: Items can be reordered using drag-and-drop functionality provided by the `DragDropList` component.
|
|
|
|
## Methods
|
|
|
|
| Method | Description |
|
|
|------------------|-----------------------------------------------------------------------------|
|
|
| `OnChanged` | Handles changes to the selection state of an item and updates the `Value`. |
|
|
| `SyncToItems` | Synchronizes the internal list of items with the `Value` and `AllKeys`. |
|
|
| `SyncToValue` | Generates the `Value` array based on the selected items. |
|
|
| `Same` | Compares two lists or arrays for equality. |
|
|
|
|
## Usage
|
|
|
|
### Example: Basic Usage
|