igniteui-cli 15.2.1-alpha.3 → 15.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commands/upgrade.js +22 -3
- package/package.json +4 -4
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/charts.md +39 -10
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/data-display.md +6 -6
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/feedback.md +5 -5
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/form-controls.md +8 -8
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/layout-manager.md +86 -15
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/layout.md +13 -10
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/data-operations.md +47 -20
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/editing.md +34 -27
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/features.md +70 -30
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/paging-remote.md +23 -23
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/sizing.md +22 -30
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/state.md +47 -34
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/structure.md +25 -22
- package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/types.md +27 -55
package/lib/commands/upgrade.js
CHANGED
|
@@ -10,6 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
10
10
|
};
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
const cli_core_1 = require("@igniteui/cli-core");
|
|
13
|
+
const FRAMEWORK_PROJECT_TYPE_MAP = {
|
|
14
|
+
angular: "igx-ts",
|
|
15
|
+
react: "igr-ts",
|
|
16
|
+
webcomponents: "igc-ts"
|
|
17
|
+
};
|
|
13
18
|
const command = {
|
|
14
19
|
command: "upgrade-packages",
|
|
15
20
|
aliases: ["upgrade"],
|
|
@@ -34,9 +39,23 @@ const command = {
|
|
|
34
39
|
},
|
|
35
40
|
upgrade(argv) {
|
|
36
41
|
return __awaiter(this, void 0, void 0, function* () {
|
|
42
|
+
var _a, _b, _c;
|
|
37
43
|
const config = cli_core_1.ProjectConfig.getConfig();
|
|
38
|
-
|
|
39
|
-
|
|
44
|
+
let framework = (_a = config.project) === null || _a === void 0 ? void 0 : _a.framework;
|
|
45
|
+
let projectType = (_b = config.project) === null || _b === void 0 ? void 0 : _b.projectType;
|
|
46
|
+
if (!framework) {
|
|
47
|
+
const detected = (0, cli_core_1.detectFrameworkFromPackageJson)();
|
|
48
|
+
if (!detected) {
|
|
49
|
+
cli_core_1.Util.warn("Unable to determine the project framework. " +
|
|
50
|
+
"Please ensure you are running this command in a project directory with a package.json file, " +
|
|
51
|
+
"or create an ignite-ui-cli.json configuration file.", "yellow");
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
framework = detected;
|
|
55
|
+
}
|
|
56
|
+
if (!projectType) {
|
|
57
|
+
projectType = FRAMEWORK_PROJECT_TYPE_MAP[framework.toLowerCase()] || "";
|
|
58
|
+
}
|
|
40
59
|
switch (framework.toLowerCase()) {
|
|
41
60
|
case "jquery":
|
|
42
61
|
cli_core_1.Util.log("Upgrading packages for jQuery projects is currently not supported!");
|
|
@@ -48,7 +67,7 @@ const command = {
|
|
|
48
67
|
const templateManager = cli_core_1.App.container.get(cli_core_1.TEMPLATE_MANAGER);
|
|
49
68
|
const projectLibrary = templateManager.getProjectLibrary(framework, projectType);
|
|
50
69
|
let project;
|
|
51
|
-
if (!config.project.projectTemplate || !projectLibrary.hasProject(config.project.projectTemplate)) {
|
|
70
|
+
if (!((_c = config.project) === null || _c === void 0 ? void 0 : _c.projectTemplate) || !projectLibrary.hasProject(config.project.projectTemplate)) {
|
|
52
71
|
// in case project template is missing from the config we provide backward.
|
|
53
72
|
project = projectLibrary.getProject(projectLibrary.projectIds[0]);
|
|
54
73
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-cli",
|
|
3
|
-
"version": "15.2.1
|
|
3
|
+
"version": "15.2.1",
|
|
4
4
|
"description": "CLI tool for creating Ignite UI projects",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"CLI",
|
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
"all": true
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@igniteui/angular-templates": "^21.2.1521
|
|
70
|
-
"@igniteui/cli-core": "^15.2.1
|
|
71
|
-
"@igniteui/mcp-server": "^15.2.1
|
|
69
|
+
"@igniteui/angular-templates": "^21.2.1521",
|
|
70
|
+
"@igniteui/cli-core": "^15.2.1",
|
|
71
|
+
"@igniteui/mcp-server": "^15.2.1",
|
|
72
72
|
"@inquirer/prompts": "^7.9.0",
|
|
73
73
|
"chalk": "^5.3.0",
|
|
74
74
|
"glob": "^11.0.0",
|
|
@@ -92,7 +92,8 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDataChartCoreModule), typeof(IgbDat
|
|
|
92
92
|
```
|
|
93
93
|
|
|
94
94
|
```razor
|
|
95
|
-
<
|
|
95
|
+
<IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
|
|
96
|
+
<IgbDataChart Legend="Legend" Height="500px" Width="100%" IsHorizontalZoomEnabled="true">
|
|
96
97
|
<IgbCategoryXAxis Name="xAxis" DataSource="ChartData" Label="Month" />
|
|
97
98
|
<IgbNumericYAxis Name="yAxis" />
|
|
98
99
|
<IgbLineSeries DataSource="ChartData"
|
|
@@ -105,11 +106,17 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDataChartCoreModule), typeof(IgbDat
|
|
|
105
106
|
YAxisName="yAxis"
|
|
106
107
|
ValueMemberPath="Expenses"
|
|
107
108
|
Title="Expenses" />
|
|
108
|
-
<IgbChartLegend Name="legend" />
|
|
109
109
|
</IgbDataChart>
|
|
110
110
|
|
|
111
111
|
@code {
|
|
112
112
|
public List<MonthData> ChartData { get; set; } = SampleData.GetMonthly();
|
|
113
|
+
|
|
114
|
+
private IgbLegend _legend;
|
|
115
|
+
private IgbLegend Legend
|
|
116
|
+
{
|
|
117
|
+
get { return _legend; }
|
|
118
|
+
set { _legend = value; StateHasChanged(); } // triggers re-render so Legend="Legend" receives the ref
|
|
119
|
+
}
|
|
113
120
|
}
|
|
114
121
|
```
|
|
115
122
|
|
|
@@ -143,7 +150,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbFinancialChartModule));
|
|
|
143
150
|
}
|
|
144
151
|
```
|
|
145
152
|
|
|
146
|
-
The data source must contain `Open`, `High`, `Low`, `Close`, and `Volume` numeric fields plus a `Date`/`Time` field. Key attributes: `ChartType` (`FinancialChartType.Candle` / `Bar` / `Line`), `ZoomSliderType`, `
|
|
153
|
+
The data source must contain `Open`, `High`, `Low`, `Close`, and `Volume` numeric fields plus a `Date`/`Time` field. Key attributes: `ChartType` (`FinancialChartType.Candle` / `Bar` / `Line`), `ZoomSliderType`, `VolumeType`.
|
|
147
154
|
|
|
148
155
|
---
|
|
149
156
|
|
|
@@ -152,21 +159,30 @@ The data source must contain `Open`, `High`, `Low`, `Close`, and `Volume` numeri
|
|
|
152
159
|
> **Docs:** [Pie Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/pie-chart)
|
|
153
160
|
|
|
154
161
|
```csharp
|
|
155
|
-
builder.Services.AddIgniteUIBlazor(typeof(IgbPieChartModule));
|
|
162
|
+
builder.Services.AddIgniteUIBlazor(typeof(IgbPieChartModule), typeof(IgbItemLegendModule));
|
|
156
163
|
```
|
|
157
164
|
|
|
158
165
|
```razor
|
|
166
|
+
<IgbItemLegend @ref="PieLegend" Orientation="LegendOrientation.Horizontal" />
|
|
159
167
|
<IgbPieChart DataSource="SliceData"
|
|
160
168
|
LabelMemberPath="Department"
|
|
161
169
|
ValueMemberPath="Budget"
|
|
162
170
|
Width="500px"
|
|
163
171
|
Height="400px"
|
|
164
172
|
LegendLabelMemberPath="Department"
|
|
173
|
+
Legend="PieLegend"
|
|
165
174
|
SliceClick="OnSliceClick" />
|
|
166
175
|
|
|
167
176
|
@code {
|
|
168
177
|
public List<BudgetSlice> SliceData { get; set; } = SampleData.GetBudget();
|
|
169
178
|
|
|
179
|
+
private IgbItemLegend _pieLegend;
|
|
180
|
+
private IgbItemLegend PieLegend
|
|
181
|
+
{
|
|
182
|
+
get { return _pieLegend; }
|
|
183
|
+
set { _pieLegend = value; StateHasChanged(); }
|
|
184
|
+
}
|
|
185
|
+
|
|
170
186
|
void OnSliceClick(IgbSliceClickEventArgs e) { /* handle click */ }
|
|
171
187
|
}
|
|
172
188
|
```
|
|
@@ -211,11 +227,11 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSparklineModule));
|
|
|
211
227
|
DisplayType="SparklineDisplayType.Line"
|
|
212
228
|
Width="120px"
|
|
213
229
|
Height="40px"
|
|
214
|
-
|
|
230
|
+
Brush="DodgerBlue"
|
|
215
231
|
LineThickness="2" />
|
|
216
232
|
```
|
|
217
233
|
|
|
218
|
-
Key attributes: `DataSource`, `ValueMemberPath`, `DisplayType` (`SparklineDisplayType.Line` / `Area` / `Column` / `WinLoss`), `Width`, `Height`, `
|
|
234
|
+
Key attributes: `DataSource`, `ValueMemberPath`, `DisplayType` (`SparklineDisplayType.Line` / `Area` / `Column` / `WinLoss`), `Width`, `Height`, `Brush`, `LineThickness`, `MarkerVisibility`, `FirstMarkerVisibility`, `LastMarkerVisibility`, `HighMarkerVisibility`, `LowMarkerVisibility`.
|
|
219
235
|
|
|
220
236
|
---
|
|
221
237
|
|
|
@@ -256,15 +272,27 @@ Use Dashboard Tile when the requested component should infer or render compact d
|
|
|
256
272
|
### Legends
|
|
257
273
|
|
|
258
274
|
```razor
|
|
259
|
-
<IgbLegend @ref="Legend" Orientation="
|
|
275
|
+
<IgbLegend @ref="Legend" Orientation="LegendOrientation.Horizontal" />
|
|
260
276
|
<IgbCategoryChart DataSource="Data" Legend="Legend" />
|
|
277
|
+
|
|
278
|
+
@code {
|
|
279
|
+
private IgbLegend _legend;
|
|
280
|
+
private IgbLegend Legend
|
|
281
|
+
{
|
|
282
|
+
get { return _legend; }
|
|
283
|
+
set { _legend = value; StateHasChanged(); } // triggers re-render so Legend="Legend" receives the ref
|
|
284
|
+
}
|
|
285
|
+
}
|
|
261
286
|
```
|
|
262
287
|
|
|
263
288
|
### Tooltips
|
|
264
289
|
|
|
265
290
|
```razor
|
|
266
|
-
|
|
267
|
-
|
|
291
|
+
<!-- Default tooltip is shown automatically on hover — no property needed -->
|
|
292
|
+
<IgbCategoryChart DataSource="Data" />
|
|
293
|
+
|
|
294
|
+
<!-- Custom tooltip via TooltipTemplate -->
|
|
295
|
+
<IgbCategoryChart DataSource="Data" TooltipTemplate="@TooltipFragment" />
|
|
268
296
|
```
|
|
269
297
|
|
|
270
298
|
### Animations
|
|
@@ -277,7 +305,8 @@ Use Dashboard Tile when the requested component should infer or render compact d
|
|
|
277
305
|
|
|
278
306
|
```razor
|
|
279
307
|
<IgbCategoryChart IsSeriesHighlightingEnabled="true"
|
|
280
|
-
|
|
308
|
+
HighlightingMode="SeriesHighlightingMode.FadeOthers"
|
|
309
|
+
HighlightingBehavior="SeriesHighlightingBehavior.NearestItemsAndSeries" />
|
|
281
310
|
```
|
|
282
311
|
|
|
283
312
|
### Zooming and Panning
|
|
@@ -40,7 +40,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule), typeof(IgbButtonGrou
|
|
|
40
40
|
<IgbButton Variant="@ButtonVariant.Flat">Flat</IgbButton>
|
|
41
41
|
|
|
42
42
|
<!-- Button Group (toggle buttons) -->
|
|
43
|
-
<IgbButtonGroup Selection="ButtonGroupSelection.Single">
|
|
43
|
+
<IgbButtonGroup Selection="@ButtonGroupSelection.Single">
|
|
44
44
|
<IgbToggleButton Value="left">Left</IgbToggleButton>
|
|
45
45
|
<IgbToggleButton Value="center" Selected="true">Center</IgbToggleButton>
|
|
46
46
|
<IgbToggleButton Value="right">Right</IgbToggleButton>
|
|
@@ -202,11 +202,11 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));
|
|
|
202
202
|
```
|
|
203
203
|
|
|
204
204
|
```razor
|
|
205
|
-
<IgbBadge Variant="@
|
|
206
|
-
<IgbBadge Variant="@
|
|
205
|
+
<IgbBadge Variant="@StyleVariant.Primary">5</IgbBadge>
|
|
206
|
+
<IgbBadge Variant="@StyleVariant.Danger" Shape="@BadgeShape.Square" />
|
|
207
207
|
```
|
|
208
208
|
|
|
209
|
-
Key attributes: `Variant` (`
|
|
209
|
+
Key attributes: `Variant` (`StyleVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`), `Shape` (`BadgeShape.Rounded` / `Square`), `Outlined`.
|
|
210
210
|
|
|
211
211
|
---
|
|
212
212
|
|
|
@@ -229,7 +229,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
|
|
|
229
229
|
}
|
|
230
230
|
```
|
|
231
231
|
|
|
232
|
-
Key attributes: `Selectable`, `Selected`, `Removable`, `Disabled`, `Variant` (`
|
|
232
|
+
Key attributes: `Selectable`, `Selected`, `Removable`, `Disabled`, `Variant` (`StyleVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`).
|
|
233
233
|
|
|
234
234
|
Slots: `start`, `end` (prefix/suffix icons).
|
|
235
235
|
|
|
@@ -255,7 +255,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
|
|
|
255
255
|
<IgbCircularProgress Indeterminate="true" />
|
|
256
256
|
```
|
|
257
257
|
|
|
258
|
-
Key attributes: `Value`, `Max`, `Indeterminate`, `AnimationDuration`, `Variant` (`
|
|
258
|
+
Key attributes: `Value`, `Max`, `Indeterminate`, `AnimationDuration`, `Variant` (`StyleVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`).
|
|
259
259
|
|
|
260
260
|
---
|
|
261
261
|
|
|
@@ -56,7 +56,7 @@ Slots: `footer` (action buttons). The default slot is the dialog body.
|
|
|
56
56
|
|
|
57
57
|
Methods: `ShowAsync()`, `HideAsync()`, `ToggleAsync()`.
|
|
58
58
|
|
|
59
|
-
Events: `
|
|
59
|
+
Events: `Closing` (cancellable), `Closed`.
|
|
60
60
|
|
|
61
61
|
CSS parts: `base`, `title`, `footer`, `content`.
|
|
62
62
|
|
|
@@ -144,7 +144,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));
|
|
|
144
144
|
|
|
145
145
|
```razor
|
|
146
146
|
<IgbBanner @ref="BannerRef">
|
|
147
|
-
<IgbIcon slot="
|
|
147
|
+
<IgbIcon slot="prefix" IconName="wifi_off" Collection="material" />
|
|
148
148
|
You are currently offline.
|
|
149
149
|
<IgbButton slot="actions" @onclick="RetryConnection">Retry</IgbButton>
|
|
150
150
|
</IgbBanner>
|
|
@@ -158,13 +158,13 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));
|
|
|
158
158
|
}
|
|
159
159
|
```
|
|
160
160
|
|
|
161
|
-
Slots: `
|
|
161
|
+
Slots: `prefix` (icon or image), `actions` (buttons shown at the right or bottom). Default slot = message text.
|
|
162
162
|
|
|
163
163
|
Methods: `ShowAsync()`, `HideAsync()`, `ToggleAsync()`.
|
|
164
164
|
|
|
165
|
-
Events: `
|
|
165
|
+
Events: `Closing` (cancellable), `Closed`.
|
|
166
166
|
|
|
167
|
-
CSS parts: `spacer`, `message`, `illustration`, `actions`.
|
|
167
|
+
CSS parts: `base`, `spacer`, `message`, `illustration`, `content`, `actions`.
|
|
168
168
|
|
|
169
169
|
---
|
|
170
170
|
|
|
@@ -45,13 +45,13 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
|
|
|
45
45
|
}
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
-
Key attributes: `Label`, `Placeholder`, `DisplayType` (`InputType.Text / Email / Password / Tel / Number`), `Required`, `Disabled`, `
|
|
48
|
+
Key attributes: `Label`, `Placeholder`, `DisplayType` (`InputType.Text / Email / Password / Tel / Number`), `Required`, `Disabled`, `ReadOnly`, `MinLength`, `MaxLength`.
|
|
49
49
|
|
|
50
50
|
Slots: `prefix`, `suffix`, `helper-text`.
|
|
51
51
|
|
|
52
52
|
> **AGENT INSTRUCTION - Icons in slots:** Always use `IgbIcon` in `prefix`/`suffix` slots, never `<span class="material-icons">`. Font spans are `display: inline` so `vertical-align` is ignored inside the slot's flex context - the icon floats to the top. `IgbIcon` (`igc-icon`) is `display: inline-flex; align-items: center` and self-centers automatically. Register the icon in `OnAfterRenderAsync(firstRender)` after `EnsureReady()`.
|
|
53
53
|
|
|
54
|
-
Events: `
|
|
54
|
+
Events: `InputOcurred` (fires while typing), `Change` (fires on commit/blur).
|
|
55
55
|
|
|
56
56
|
> **AGENT INSTRUCTION:** `IgbInput` has **no** `GetValueAsync()` method. Read values via the synchronous `Value` property or, preferably, use `@bind-Value` bound directly to a model property - that is the correct Blazor pattern and avoids the need to imperatively read the value at all.
|
|
57
57
|
|
|
@@ -82,7 +82,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
|
|
|
82
82
|
|
|
83
83
|
Key attributes: `Data`, `ValueKey` (required for complex objects), `DisplayKey`, `T` (type parameter - must match `ValueKey` property type or `"object"` if no `ValueKey`), `Label`, `Placeholder`, `SingleSelect` (for single-selection mode), `Disabled`, `Required`.
|
|
84
84
|
|
|
85
|
-
Events: `Opening`, `Opened`, `Closing`, `Closed`, `
|
|
85
|
+
Events: `Opening`, `Opened`, `Closing`, `Closed`, `Change` (IgbComboChangeEventArgs).
|
|
86
86
|
|
|
87
87
|
> **AGENT INSTRUCTION:** `IgbCombo` does **not** work inside a standard HTML `<form>`. Use `<EditForm>` with `@bind-Value` instead.
|
|
88
88
|
|
|
@@ -131,7 +131,7 @@ Key attributes: `Value` (DateTime), `Min`, `Max`, `InputFormat`, `DisplayFormat`
|
|
|
131
131
|
|
|
132
132
|
Slots: `calendar`, `clear`, `prefix`, `suffix`, `actions` (custom footer buttons).
|
|
133
133
|
|
|
134
|
-
Methods: `StepUp(DatePart)`, `StepDown(DatePart)`, `Clear()
|
|
134
|
+
Methods: `StepUp(DatePart)`, `StepDown(DatePart)`, `Clear()`.
|
|
135
135
|
|
|
136
136
|
---
|
|
137
137
|
|
|
@@ -189,7 +189,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
|
|
|
189
189
|
}
|
|
190
190
|
```
|
|
191
191
|
|
|
192
|
-
Key attributes: `Value` (DateTime?), `InputFormat`, `DisplayFormat`, `Min`, `Max`, `
|
|
192
|
+
Key attributes: `Value` (DateTime?), `InputFormat`, `DisplayFormat`, `Min`, `Max`, `SpinLoop`.
|
|
193
193
|
|
|
194
194
|
Methods: `StepUp()`, `StepDown()`, `Clear()`.
|
|
195
195
|
|
|
@@ -209,7 +209,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
|
|
|
209
209
|
Placeholder="(555) 123-4567" />
|
|
210
210
|
```
|
|
211
211
|
|
|
212
|
-
Key attributes: `Mask` (pattern string: `0` = digit, `L` = letter, `A` = alphanumeric), `Placeholder`, `Prompt` (fill character, default `_`), `ValueMode` (`
|
|
212
|
+
Key attributes: `Mask` (pattern string: `0` = digit, `L` = letter, `A` = alphanumeric), `Placeholder`, `Prompt` (fill character, default `_`), `ValueMode` (`MaskInputValueMode.Raw` or `MaskInputValueMode.WithFormatting`).
|
|
213
213
|
|
|
214
214
|
---
|
|
215
215
|
|
|
@@ -302,7 +302,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSlide
|
|
|
302
302
|
|
|
303
303
|
Key attributes on `IgbSlider`: `Value`, `Min`, `Max`, `Step`, `Disabled`, `HideTooltip`. On `IgbRangeSlider`: `Lower`, `Upper`, `Min`, `Max`, `Step`.
|
|
304
304
|
|
|
305
|
-
Events (both): `
|
|
305
|
+
Events (both): `Input` (fires while dragging), `Change` (fires on commit).
|
|
306
306
|
|
|
307
307
|
---
|
|
308
308
|
|
|
@@ -322,7 +322,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
|
|
|
322
322
|
}
|
|
323
323
|
```
|
|
324
324
|
|
|
325
|
-
Key attributes: `Value`, `Max`, `Step` (for half-star: `0.5`), `Disabled`, `
|
|
325
|
+
Key attributes: `Value`, `Max`, `Step` (for half-star: `0.5`), `Disabled`, `ReadOnly`, `Label`, `ValueFormat`.
|
|
326
326
|
|
|
327
327
|
Events: `Change`, `Hover`.
|
|
328
328
|
|
|
@@ -28,6 +28,32 @@ Dock Manager provides an IDE-like dockable pane layout. Users can drag panes to
|
|
|
28
28
|
builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
+
Key properties on `IgbDockManager`:
|
|
32
|
+
|
|
33
|
+
| Property | Type | Description |
|
|
34
|
+
|---|---|---|
|
|
35
|
+
| `Layout` | `IgbDockManagerLayout` | Gets/sets the layout configuration |
|
|
36
|
+
| `ActivePane` | `IgbContentPane` | Gets/sets the currently active (focused) pane |
|
|
37
|
+
| `MaximizedPane` | `IgbDockManagerPane` | Gets/sets the maximized pane |
|
|
38
|
+
| `AllowFloatingPanesResize` | `bool` | Allows resizing floating panes (default: `true`) |
|
|
39
|
+
| `AllowInnerDock` | `bool` | Allows inner-docking panes (default: `true`) |
|
|
40
|
+
| `AllowMaximize` | `bool` | Allows maximizing panes (default: `true`) |
|
|
41
|
+
| `AllowSplitterDock` | `bool` | Allows docking by dragging over a splitter (default: `false`) |
|
|
42
|
+
| `CloseBehavior` | `PaneActionBehavior` | `AllPanes` or `SelectedPane` — which pane(s) close when clicking close in a TabGroup (default: `AllPanes`) |
|
|
43
|
+
| `UnpinBehavior` | `PaneActionBehavior` | `AllPanes` or `SelectedPane` — which pane(s) unpin when clicking unpin (default: `AllPanes`) |
|
|
44
|
+
| `ContainedInBoundaries` | `bool` | Keeps floating panes inside the Dock Manager bounds (default: `false`) |
|
|
45
|
+
| `ProximityDock` | `bool` | Enables docking by proximity instead of indicators (default: `false`) |
|
|
46
|
+
| `ShowPaneHeaders` | `DockManagerShowPaneHeaders` | `Always` or `OnHoverOnly` (default: `Always`) |
|
|
47
|
+
| `ShowHeaderIconOnHover` | `DockManagerShowHeaderIconOnHover` | Which tab icons show on hover: `None`, `All`, `CloseOnly`, `MoreOptionsOnly` (default: `None`) |
|
|
48
|
+
| `DisableKeyboardNavigation` | `bool` | Disables built-in keyboard shortcuts (default: `false`) |
|
|
49
|
+
|
|
50
|
+
Key methods on `IgbDockManager`:
|
|
51
|
+
|
|
52
|
+
| Method | Returns | Description |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `FocusPane(string contentId)` | `void` | Programmatically focuses a pane by its content ID |
|
|
55
|
+
| `GetCurrentLayout()` | `IgbDockManagerLayout` | Returns the current layout object reflecting runtime state |
|
|
56
|
+
|
|
31
57
|
### Basic Setup
|
|
32
58
|
|
|
33
59
|
Dock Manager uses a C# layout object graph to define pane structure. Pane content is projected via named slots.
|
|
@@ -43,6 +69,9 @@ Dock Manager uses a C# layout object graph to define pane structure. Pane conten
|
|
|
43
69
|
@code {
|
|
44
70
|
IgbDockManager DockRef { get; set; }
|
|
45
71
|
|
|
72
|
+
// IgbDockManagerLayout has two top-level properties:
|
|
73
|
+
// RootPane (IgbSplitPane) - the main docked layout
|
|
74
|
+
// FloatingPanes (IgbSplitPaneCollection) - initially floating panes
|
|
46
75
|
IgbDockManagerLayout DockLayout { get; set; } = new IgbDockManagerLayout
|
|
47
76
|
{
|
|
48
77
|
RootPane = new IgbSplitPane
|
|
@@ -54,7 +83,7 @@ Dock Manager uses a C# layout object graph to define pane structure. Pane conten
|
|
|
54
83
|
new IgbTabGroupPane
|
|
55
84
|
{
|
|
56
85
|
PaneType = DockManagerPaneType.TabGroupPane,
|
|
57
|
-
Panes = new
|
|
86
|
+
Panes = new()
|
|
58
87
|
{
|
|
59
88
|
new IgbContentPane
|
|
60
89
|
{
|
|
@@ -90,6 +119,7 @@ Dock Manager uses a C# layout object graph to define pane structure. Pane conten
|
|
|
90
119
|
| `IgbSplitPane` | Container that splits horizontally or vertically into child panes |
|
|
91
120
|
| `IgbTabGroupPane` | Container that groups content panes into tabs |
|
|
92
121
|
| `IgbContentPane` | Leaf pane with actual content (maps to a named slot) |
|
|
122
|
+
| `IgbDocumentHost` | Special container for document-style tabbed panes (like an IDE editor area). Contains a `RootPane` (`IgbSplitPane`) |
|
|
93
123
|
|
|
94
124
|
Key properties on `IgbContentPane`:
|
|
95
125
|
|
|
@@ -97,24 +127,56 @@ Key properties on `IgbContentPane`:
|
|
|
97
127
|
|---|---|---|
|
|
98
128
|
| `ContentId` | `string` | Must match the `slot` name on the projected content element |
|
|
99
129
|
| `Header` | `string` | Pane tab header title |
|
|
100
|
-
| `
|
|
130
|
+
| `HeaderId` | `string` | Slot name for a custom header template element. Falls back to `Header` text if not set |
|
|
131
|
+
| `Size` | `double` | Size relative to sibling panes (default: `100`) |
|
|
101
132
|
| `AllowClose` | `bool` | Shows/hides the close button (default: `true`) |
|
|
102
133
|
| `AllowPinning` | `bool` | Allows pin/unpin (default: `true`) |
|
|
103
|
-
| `AllowMaximize` | `bool` | Allows maximize
|
|
134
|
+
| `AllowMaximize` | `bool` | Allows maximize |
|
|
104
135
|
| `AllowFloating` | `bool` | Allows tearing off into a floating window (default: `true`) |
|
|
136
|
+
| `AllowDocking` | `bool` | Allows the user to dock the pane (default: `true`) |
|
|
105
137
|
| `IsPinned` | `bool` | Set to `false` to start as an unpinned (collapsed to edge) pane |
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
138
|
+
| `IsMaximized` | `bool` | Whether the pane is maximized (default: `false`) |
|
|
139
|
+
| `Hidden` | `bool` | Hides the pane from the UI (default: `false`) |
|
|
140
|
+
| `Disabled` | `bool` | Disables the pane (default: `false`) |
|
|
141
|
+
| `DocumentOnly` | `bool` | Restricts the pane so it can only be docked inside a document host |
|
|
142
|
+
| `UnpinnedLocation` | `UnpinnedLocation` | Edge where the unpinned flyout appears. Auto-calculated from document host if not set |
|
|
143
|
+
| `UnpinnedSize` | `double` | Absolute size of the pane when unpinned (default: `200`) |
|
|
144
|
+
| `Id` | `string` | Pane identifier. Auto-generated if not set |
|
|
110
145
|
|
|
111
146
|
Key properties on `IgbSplitPane`:
|
|
112
147
|
|
|
113
148
|
| Property | Type | Description |
|
|
114
149
|
|---|---|---|
|
|
115
150
|
| `Orientation` | `SplitPaneOrientation` | `Horizontal` or `Vertical` |
|
|
116
|
-
| `Panes` |
|
|
117
|
-
| `Size` | `double` | Size
|
|
151
|
+
| `Panes` | `IgbDockManagerPaneCollection` | Child panes |
|
|
152
|
+
| `Size` | `double` | Size relative to sibling panes (default: `100`) |
|
|
153
|
+
| `FloatingLocation` | `IgbDockManagerPoint` | Absolute position of a floating pane |
|
|
154
|
+
| `FloatingWidth` | `double` | Absolute width of a floating pane (default: `100`) |
|
|
155
|
+
| `FloatingHeight` | `double` | Absolute height of a floating pane (default: `100`) |
|
|
156
|
+
| `FloatingResizable` | `bool` | Whether floating pane resizing is allowed |
|
|
157
|
+
| `AllowEmpty` | `bool` | Whether the pane stays in the UI when it has no children |
|
|
158
|
+
| `IsMaximized` | `bool` | Whether the split pane is maximized (default: `false`) |
|
|
159
|
+
| `UseFixedSize` | `bool` | Sizes children in pixels instead of relative; allows scrollable overflow (default: `false`) |
|
|
160
|
+
| `Id` | `string` | Pane identifier. Auto-generated if not set |
|
|
161
|
+
|
|
162
|
+
Key properties on `IgbTabGroupPane`:
|
|
163
|
+
|
|
164
|
+
| Property | Type | Description |
|
|
165
|
+
|---|---|---|
|
|
166
|
+
| `Panes` | `IgbContentPaneCollection` | Child content panes displayed as tabs |
|
|
167
|
+
| `SelectedIndex` | `double` | Index of the initially selected tab |
|
|
168
|
+
| `Size` | `double` | Size relative to sibling panes (default: `100`) |
|
|
169
|
+
| `AllowEmpty` | `bool` | Whether the tab group stays in the UI when it has no children |
|
|
170
|
+
| `IsMaximized` | `bool` | Whether the tab group is maximized (default: `false`) |
|
|
171
|
+
| `Id` | `string` | Pane identifier. Auto-generated if not set |
|
|
172
|
+
|
|
173
|
+
Key properties on `IgbDocumentHost`:
|
|
174
|
+
|
|
175
|
+
| Property | Type | Description |
|
|
176
|
+
|---|---|---|
|
|
177
|
+
| `RootPane` | `IgbSplitPane` | The root split pane inside the document host |
|
|
178
|
+
| `Size` | `double` | Size relative to sibling panes (default: `100`) |
|
|
179
|
+
| `Id` | `string` | Pane identifier. Auto-generated if not set |
|
|
118
180
|
|
|
119
181
|
### Layout Serialization
|
|
120
182
|
|
|
@@ -124,12 +186,21 @@ Persisting a Dock Manager layout is version-sensitive. The current `dock-manager
|
|
|
124
186
|
|
|
125
187
|
### Events
|
|
126
188
|
|
|
189
|
+
**Blazor EventCallbacks** (direct Blazor binding):
|
|
190
|
+
|
|
191
|
+
| Event | Type | Description |
|
|
192
|
+
|---|---|---|
|
|
193
|
+
| `LayoutChange` | `EventCallback<IgbLayoutChangeEventArgs>` | Fires when the layout is modified by user interaction (drag, close, resize) |
|
|
194
|
+
| `LayoutChanged` | `EventCallback<IgbDockManagerLayout>` | Fires after the layout has changed; provides the updated layout object |
|
|
195
|
+
|
|
196
|
+
**Web-component-level events** (accessible via JavaScript interop, not as Blazor EventCallbacks):
|
|
197
|
+
|
|
127
198
|
| Event | Description |
|
|
128
199
|
|---|---|
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
200
|
+
| `paneClose` | Fires when a pane is closed; detail contains the closed pane(s) |
|
|
201
|
+
| `activePaneChanged` | Fires when the active (focused) pane changes |
|
|
202
|
+
| `splitterResizeStart` | Fires when a splitter drag begins |
|
|
203
|
+
| `splitterResizeEnd` | Fires when a splitter drag ends |
|
|
133
204
|
|
|
134
205
|
---
|
|
135
206
|
|
|
@@ -162,11 +233,11 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule));
|
|
|
162
233
|
|
|
163
234
|
Key attributes on `IgbTileManager`: `ColumnCount`, `Gap` (CSS length string such as `"8px"`), `MinColumnWidth`, `MinRowHeight`, `ResizeMode` (`TileManagerResizeMode.*`), `DragMode` (`TileManagerDragMode.*`).
|
|
164
235
|
|
|
165
|
-
Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`.
|
|
236
|
+
Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `Maximized`, `Position`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`.
|
|
166
237
|
|
|
167
238
|
Slots on `IgbTile`: `title` (header), `actions` (header action buttons), `fullscreen-action`, `maximize-action`, `side-adorner`, `corner-adorner`, `bottom-adorner`. Default slot = tile body content.
|
|
168
239
|
|
|
169
|
-
Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. Tile content is not serialized.
|
|
240
|
+
Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. `GetTiles()` returns the current `IgbTile[]` array. Tile content is not serialized.
|
|
170
241
|
|
|
171
242
|
---
|
|
172
243
|
|
|
@@ -53,7 +53,9 @@ For icon tabs, use the `label` slot inside `IgbTab`:
|
|
|
53
53
|
|
|
54
54
|
Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Label`, `Disabled`, `Selected`.
|
|
55
55
|
|
|
56
|
-
Events on `IgbTabs`: `Change` - fires when the selected tab changes.
|
|
56
|
+
Events on `IgbTabs`: `Change` (`EventCallback<IgbTabComponentEventArgs>`) - fires when the selected tab changes.
|
|
57
|
+
|
|
58
|
+
Methods on `IgbTabs`: `Select(string id)` — selects a tab by id; `GetSelected()` — returns the id of the currently selected tab.
|
|
57
59
|
|
|
58
60
|
CSS parts: `headers`, `headers-content`, `headers-wrapper`, `header`, `selected-indicator`, `content`.
|
|
59
61
|
|
|
@@ -92,7 +94,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule));
|
|
|
92
94
|
}
|
|
93
95
|
```
|
|
94
96
|
|
|
95
|
-
Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Bottom` / `Top` / `End` / `Start`), `HorizontalAnimation
|
|
97
|
+
Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Auto` / `Bottom` / `Top` / `End` / `Start`), `ContentTop` (renders step content above the header), `HorizontalAnimation` (`HorizontalTransitionAnimation.Slide` / `Fade` / `None`), `VerticalAnimation` (`StepperVerticalAnimation.Grow` / `Fade` / `None`), `AnimationDuration`.
|
|
96
98
|
|
|
97
99
|
Key attributes on `IgbStep`: `Complete`, `Optional`, `Disabled`, `Invalid`, `Active`.
|
|
98
100
|
|
|
@@ -139,13 +141,13 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
|
|
|
139
141
|
}
|
|
140
142
|
```
|
|
141
143
|
|
|
142
|
-
Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled
|
|
144
|
+
Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled`, `IndicatorPosition` (`ExpansionPanelIndicatorPosition.Start` / `End` / `None`).
|
|
143
145
|
|
|
144
146
|
Slots on `IgbExpansionPanel`: `title`, `subtitle`, `indicator` (custom expand icon).
|
|
145
147
|
|
|
146
|
-
Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`.
|
|
148
|
+
Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. These same events also fire on `IgbAccordion` at the accordion level.
|
|
147
149
|
|
|
148
|
-
Methods
|
|
150
|
+
Methods on `IgbExpansionPanel`: `Show()`, `Hide()`, `Toggle()`. Methods on `IgbAccordion`: `ShowAll()`, `HideAll()`.
|
|
149
151
|
|
|
150
152
|
---
|
|
151
153
|
|
|
@@ -187,7 +189,6 @@ Required theme CSS:
|
|
|
187
189
|
```csharp
|
|
188
190
|
builder.Services.AddIgniteUIBlazor(
|
|
189
191
|
typeof(IgbNavDrawerModule),
|
|
190
|
-
typeof(IgbNavDrawerItemModule),
|
|
191
192
|
typeof(IgbNavDrawerHeaderItemModule)
|
|
192
193
|
);
|
|
193
194
|
```
|
|
@@ -267,7 +268,7 @@ Mini variant:
|
|
|
267
268
|
</IgbNavDrawer>
|
|
268
269
|
```
|
|
269
270
|
|
|
270
|
-
Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom`). Use the `mini` slot to provide collapsed icon-only content.
|
|
271
|
+
Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom` / `Relative`). On `IgbNavDrawerItem`: `Active`, `Disabled`. Use the `mini` slot to provide collapsed icon-only content.
|
|
271
272
|
|
|
272
273
|
Methods: `Show()`, `Hide()`, `Toggle()`.
|
|
273
274
|
|
|
@@ -291,7 +292,7 @@ CSS parts: `base`, `main`, `mini`.
|
|
|
291
292
|
> **Docs:** [Tree](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree)
|
|
292
293
|
|
|
293
294
|
```csharp
|
|
294
|
-
builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule));
|
|
295
|
+
builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule), typeof(IgbTreeItemModule));
|
|
295
296
|
```
|
|
296
297
|
|
|
297
298
|
```razor
|
|
@@ -306,11 +307,13 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule));
|
|
|
306
307
|
</IgbTree>
|
|
307
308
|
```
|
|
308
309
|
|
|
309
|
-
Key attributes on `IgbTree`: `Selection` (`TreeSelection.None` / `Multiple` / `Cascade`). On `IgbTreeItem`: `Label`, `Expanded`, `Selected`, `Disabled`, `Active`.
|
|
310
|
+
Key attributes on `IgbTree`: `Selection` (`TreeSelection.None` / `Multiple` / `Cascade`), `SingleBranchExpand` (only one branch expanded at a time), `ToggleNodeOnClick` (toggle expand on click). On `IgbTreeItem`: `Label`, `Value`, `Expanded`, `Selected`, `Disabled`, `Active`, `Loading`.
|
|
310
311
|
|
|
311
312
|
Slots on `IgbTreeItem`: `label` (custom label content), `indicator` (expand/collapse icon override). Nest `IgbTreeItem` children directly inside a parent `IgbTreeItem`.
|
|
312
313
|
|
|
313
|
-
|
|
314
|
+
Methods on `IgbTree`: `ExpandToItem(IgbTreeItem)`. Methods on `IgbTreeItem`: `Expand()`, `Collapse()`, `Toggle()`, `GetPath()` (returns ancestor chain).
|
|
315
|
+
|
|
316
|
+
Events on `IgbTree`: `SelectionChanged` (`EventCallback<IgbTreeSelectionEventArgs>`), `ItemExpanding` (cancellable), `ItemExpanded`, `ItemCollapsing` (cancellable), `ItemCollapsed`, `ActiveItem`.
|
|
314
317
|
|
|
315
318
|
---
|
|
316
319
|
|