Skip to content

Cherry-pick Blazor snippet updates and Razor highlighting fix to master #1062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dkamburov wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Cherry-pick Blazor snippet updates and Razor highlighting fix to master #1062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
994d3e9
Merge pull request #1019 from IgniteUI/dpetev/blazor-samples-lite-docs
damyanpetev Nov 5, 2026
f1e0b7c
fix(highlighting): color Razor component tags as components (#1014)
damyanpetev Nov 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,8 +644,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [filters]="caseSensitiveFilteringOperand"></igx-column>
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filters]="booleanFilteringOperand">
<ng-template igxCell let-cell="cell" let-val>
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
<img*ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
@if (val) {
<img src="assets/images/grid/active.png" title="Continued" alt="Continued" />
} @else {
<img src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
}
</ng-template>
</igx-column>
</{ComponentSelector}>
Expand Down Expand Up @@ -683,8 +686,11 @@ constructor() {
<igx-column field="Artist" [filterable]='true' [dataType]="'string'" [filters]="caseSensitiveFilteringOperand"></igx-column>
<igx-column field="HasGrammyAward" [filterable]='true' [dataType]="'boolean'" [filters]="booleanFilteringOperand">
<ng-template igxCell let-cell="cell" let-val>
<img *ngIf="val" src="https://www.infragistics.com/angular-demos/assets/images/grid/active.png" title="True" alt="True" />
<img*ngIf="!val" src="https://www.infragistics.com/angular-demos/assets/images/grid/expired.png" title="False" alt="False" />
@if (val) {
<img src="https://www.infragistics.com/angular-demos/assets/images/grid/active.png" title="True" alt="True" />
} @else {
<img src="https://www.infragistics.com/angular-demos/assets/images/grid/expired.png" title="False" alt="False" />
}
</ng-template>
</igx-column>
</igx-hierarchical-grid>
Expand Down
6 changes: 3 additions & 3 deletions docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -639,7 +639,7 @@ The sorting indicator icon in the column header can be customized using a templa
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortDefaultTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="unfold_more" Collection="material"></IgbIcon>;
return @<IgbIcon IconName="unfold_more" Collection="material"></IgbIcon>;
};
}

Expand Down Expand Up @@ -700,7 +700,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortAscendingTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_less" Collection="material"></IgbIcon>;
return @<IgbIcon IconName="expand_less" Collection="material"></IgbIcon>;
};
}

Expand Down Expand Up @@ -761,7 +761,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortDescendingTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_more" Collection="material"></IgbIcon>;
return @<IgbIcon IconName="expand_more" Collection="material"></IgbIcon>;
};
}

Expand Down
49 changes: 20 additions & 29 deletions docs/xplat/src/content/en/components/grids/list.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,39 +407,30 @@ this.radioGroup.addEventListener('click', (radio: any) => {
<PlatformBlock for="Blazor">

```razor
<IgbRadioGroup Alignment="@ContentOrientation.Horizontal">
<IgbRadio Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
<IgbRadio Value="Medium" label-position="after" Change="OnRadioOptionClick">Medium</IgbRadio>
<IgbRadio Value="Large" label-position="after" Checked="true" Change="OnRadioOptionClick">Large</IgbRadio>
<IgbRadioGroup Alignment="@ContentOrientation.Horizontal" @bind-Value="ListSize">
<IgbRadio name="size" Value="@("size-small")">Small</IgbRadio>
<IgbRadio name="size" Value="@("size-medium")">Medium</IgbRadio>
<IgbRadio name="size" Value="@("size-large")">Large</IgbRadio>
</IgbRadioGroup>

<IgbList style="margin-top: 10px;" Size="@ListSize" />
<IgbList style="margin-top: 10px;" class="@ListSize" />

@code {
public SizableComponentSize ListSize { get; set; }

public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs e)
{
IgbRadio radio = e.Parent as IgbRadio;
switch (radio.Value)
{
case "Small":
{
this.ListSize = SizableComponentSize.Small;
break;
}
case "Medium":
{
this.ListSize = SizableComponentSize.Medium;
break;
}
case "Large":
{
this.ListSize = SizableComponentSize.Large;
break;
}
}
}
public string ListSize { get; set; } = "size-medium";
}
```

```css
.size-small {
--ig-size: var(--ig-size-small);
}

.size-medium {
--ig-size: var(--ig-size-medium);
}

.size-large {
--ig-size: var(--ig-size-large);
}
```

Expand Down
15 changes: 6 additions & 9 deletions docs/xplat/src/content/en/components/inputs/chip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,18 +652,15 @@ const [tags, setTags] = useState(['Angular', 'React', 'Blazor']);

<PlatformBlock for="Blazor">

Assign a JavaScript handler through `RemoveScript`, and register it with `igRegisterScript` in a script file that your host page loads.

```razor
<IgbChip Removable="true" RemoveScript="handleChipRemove">Angular</IgbChip>
```

```js
function handleChipRemove(event) {
event.target.remove();
@foreach (var tag in Tags)
{
<IgbChip @key="tag" Removable="true" Remove="@(() => Tags.Remove(tag))">@tag</IgbChip>
}

igRegisterScript("handleChipRemove", handleChipRemove, false);
@code {
private readonly List<string> Tags = new() { "Angular", "React", "Blazor" };
}
```

</PlatformBlock>
Expand Down
22 changes: 10 additions & 12 deletions docs/xplat/src/content/en/components/inputs/combo/features.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ switchDisable.addEventListener("igcChange", () => {
Data="Data"
ValueKey="Id"
DisplayKey="Name"
@bind-Value="SelectedCities"
DisableFiltering="@DisableFiltering"
CaseSensitiveIcon="@CaseSensitiveIcon"
GroupKey="@Group"
Expand All @@ -169,23 +170,21 @@ switchDisable.addEventListener("igcChange", () => {
<IgbSwitch Change="@OnDisableClick">Disable Combo</IgbSwitch>

@code {
private string[] SelectedCities = [];
private bool DisableFiltering = false;
private bool CaseSensitiveIcon = false;
private bool Disabled = false;

public void OnDisableFilteringClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.DisableFiltering = sw.Checked;
public void OnDisableFilteringClick(IgbCheckboxChangeEventArgs e) {
this.DisableFiltering = e.Detail.Checked;
}

public void OnCaseSensitiveClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.CaseSensitiveIcon = sw.Checked;
public void OnCaseSensitiveClick(IgbCheckboxChangeEventArgs e) {
this.CaseSensitiveIcon = e.Detail.Checked;
}

public void OnDisableClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.Disabled = sw.Checked;
public void OnDisableClick(IgbCheckboxChangeEventArgs e) {
this.Disabled = e.Detail.Checked;
}
}
```
Expand All @@ -212,9 +211,8 @@ switchGroup.addEventListener("igcChange", () => {
@code {
private string Group = "";

public void OnGroupClick(IgbComponentBoolValueChangedEventArgs e) {
IgbSwitch sw = e.Parent as IgbSwitch;
this.Group = sw.Checked ? "Country" : "";
public void OnGroupClick(IgbCheckboxChangeEventArgs e) {
this.Group = e.Detail.Checked ? "Country" : "";
}
}
```
Expand Down
6 changes: 3 additions & 3 deletions docs/xplat/src/content/en/components/inputs/icon-button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,15 +169,15 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable
```

</PlatformBlock>
<PlatformBlock for="React">
<PlatformBlock for="React, Blazor">
```css
.size-medium {
--ig-size: var(--ig-size-medium);
}
```
</PlatformBlock>

<PlatformBlock for="WebComponents, Blazor">
<PlatformBlock for="WebComponents">
```css
igc-icon-button {
--ig-size: var(--ig-size-medium);
Expand All @@ -188,7 +188,7 @@ igc-icon-button {
<PlatformBlock for="Blazor">

```razor
<IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />
<IgbIconButton class="size-medium" IconName="thumb-up" Collection="material" />
```

</PlatformBlock>
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/interactivity/chat.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ const ChatExample = () => {
<PlatformBlock for="Blazor">

```razor
<IgbChat @ref="Chat" Options="Options" Messages="Messages" MessageCreated="OnMessageCreated" Height="100%"></IgbChat>
<IgbChat @ref="Chat" Options="Options" Messages="Messages" MessageCreated="OnMessageCreated"></IgbChat>
```

```cs
Expand Down
46 changes: 9 additions & 37 deletions docs/xplat/src/content/en/components/menus/navigation-drawer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ To enhance our component a bit, we can use it in conjunction with the <ApiLink p
<h2>Home</h2>
</IgbNavbar>

<IgbNavDrawer @ref="NavDrawerRef">
<IgbNavDrawer @ref="NavDrawerRef" Position="@Position">
<IgbNavDrawerHeaderItem>
Sample Drawer
</IgbNavDrawerHeaderItem>
Expand Down Expand Up @@ -306,48 +306,20 @@ this.radioGroup.addEventListener('click', (radio: any) => {
<PlatformBlock for="Blazor">

```razor
<IgbRadioGroup id="radio-group" Alignment="ContentOrientation.Horizontal">
<IgbRadio Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
<IgbRadio Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
<IgbRadio Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
<IgbRadio Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
<IgbRadioGroup id="radio-group" Alignment="ContentOrientation.Horizontal" @bind-Value="position">
<IgbRadio name="position" Value="@("Start")">Start</IgbRadio>
<IgbRadio name="position" Value="@("End")">End</IgbRadio>
<IgbRadio name="position" Value="@("Top")">Top</IgbRadio>
<IgbRadio name="position" Value="@("Bottom")">Bottom</IgbRadio>
</IgbRadioGroup>

@code {

public IgbNavDrawer NavDrawerRef { get; set; }

public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args)
{
IgbRadio radio = args.Parent as IgbRadio;

if (this.NavDrawerRef != null)
{
switch (radio.Value)
{
case "Start":
{
this.NavDrawerRef.Position = NavDrawerPosition.Start;
break;
}
case "End":
{
this.NavDrawerRef.Position = NavDrawerPosition.End;
break;
}
case "Top":
{
this.NavDrawerRef.Position = NavDrawerPosition.Top;
break;
}
case "Bottom":
{
this.NavDrawerRef.Position = NavDrawerPosition.Bottom;
break;
}
}
}
}
private string position = "Start";

public NavDrawerPosition Position => Enum.Parse<NavDrawerPosition>(position);
}
```

Expand Down
5 changes: 2 additions & 3 deletions docs/xplat/src/content/en/components/scheduling/date-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,13 +152,12 @@ const date = new Date();

<PlatformBlock for="Blazor">
```Razor
<IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
<IgbDatePicker Value="@SelectedDate">
</IgbDatePicker>

@code {

public DateTime SelectedDate { get; set; }
public IgbDatePicker DatePicker { get; set; }

protected override void OnInitialized()
{
Expand Down Expand Up @@ -439,7 +438,7 @@ In forms, we can handle the `change` event of the component and update the value

<PlatformBlock for="Blazor">

In forms, we can handle the `Change` event of the component and update the value of the label.
In forms, bind the component's value with `@bind-Value`. In the sample the picker is required, and the form's `@onsubmit` handler shows the submitted date instead of reloading the page. A native reset button returns the picker to its initial value without raising a change event, so the `@onreset` handler clears the bound field.

</PlatformBlock>

Expand Down
12 changes: 7 additions & 5 deletions docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,11 +180,9 @@ return (
<PlatformBlock for="Blazor">

```razor
<IgbDateRangePicker @ref="DateRangePicker" Value="@Range" Label="Date Range"/>
<IgbDateRangePicker Value="@Range" Label="Date Range"/>

@code {
public IgbDateRangePicker DateRangePicker { get; set; }

public IgbDateRangeValue Range = new IgbDateRangeValue()
{
Start = DateTime.Today,
Expand Down Expand Up @@ -870,9 +868,13 @@ return (
<PlatformBlock for="Blazor">

```razor
<IgbDateRangePicker Mode="PickerMode.Dialog" @ref="ActionsDateRange">
<IgbButton slot="actions" @onclick="() => ActionsDateRange.ShowWeekNumbers = !ActionsDateRange.ShowWeekNumbers">Toggle week numbers</IgbButton>
<IgbDateRangePicker Mode="PickerMode.Dialog" ShowWeekNumbers="@ShowWeekNumbers">
<IgbButton slot="actions" @onclick="() => ShowWeekNumbers = !ShowWeekNumbers">Toggle week numbers</IgbButton>
</IgbDateRangePicker>

@code {
private bool ShowWeekNumbers;
}
```

</PlatformBlock>
Expand Down
14 changes: 10 additions & 4 deletions docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,8 +620,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [filters]="caseSensitiveFilteringOperand"></igx-column>
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filters]="booleanFilteringOperand">
<ng-template igxCell let-cell="cell" let-val>
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
<img*ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
@if (val) {
<img src="assets/images/grid/active.png" title="Continued" alt="Continued" />
} @else {
<img src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
}
</ng-template>
</igx-column>
</{ComponentSelector}>
Expand Down Expand Up @@ -659,8 +662,11 @@ constructor() {
<igx-column field="Artist" [filterable]='true' [dataType]="'string'" [filters]="caseSensitiveFilteringOperand"></igx-column>
<igx-column field="HasGrammyAward" [filterable]='true' [dataType]="'boolean'" [filters]="booleanFilteringOperand">
<ng-template igxCell let-cell="cell" let-val>
<img *ngIf="val" src="https://www.infragistics.com/angular-demos/assets/images/grid/active.png" title="True" alt="True" />
<img*ngIf="!val" src="https://www.infragistics.com/angular-demos/assets/images/grid/expired.png" title="False" alt="False" />
@if (val) {
<img src="https://www.infragistics.com/angular-demos/assets/images/grid/active.png" title="True" alt="True" />
} @else {
<img src="https://www.infragistics.com/angular-demos/assets/images/grid/expired.png" title="False" alt="False" />
}
</ng-template>
</igx-column>
</igx-hierarchical-grid>
Expand Down
Loading
Loading