diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx index 4d4f94c2dc..a74e3263b1 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx @@ -644,8 +644,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand { - Continued - + @if (val) { + Continued + } @else { + Discontinued + } @@ -683,8 +686,11 @@ constructor() { - True - + @if (val) { + True + } @else { + False + } diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx index b95cb7ad76..237573f5df 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx @@ -639,7 +639,7 @@ The sorting indicator icon in the column header can be customized using a templa @code { public RenderFragment SortDefaultTemplate = (ctx) => { - return @; + return @; }; } @@ -700,7 +700,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortAscendingTemplate = (ctx) => { - return @; + return @; }; } @@ -761,7 +761,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortDescendingTemplate = (ctx) => { - return @; + return @; }; } diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx index 57d0e021f8..562685d79c 100644 --- a/docs/xplat/src/content/en/components/grids/list.mdx +++ b/docs/xplat/src/content/en/components/grids/list.mdx @@ -407,39 +407,30 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Small - Medium - Large + + Small + Medium + Large - + @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); } ``` diff --git a/docs/xplat/src/content/en/components/inputs/chip.mdx b/docs/xplat/src/content/en/components/inputs/chip.mdx index c873945aa0..b60d81ce17 100644 --- a/docs/xplat/src/content/en/components/inputs/chip.mdx +++ b/docs/xplat/src/content/en/components/inputs/chip.mdx @@ -652,18 +652,15 @@ const [tags, setTags] = useState(['Angular', 'React', 'Blazor']); -Assign a JavaScript handler through `RemoveScript`, and register it with `igRegisterScript` in a script file that your host page loads. - ```razor -Angular -``` - -```js -function handleChipRemove(event) { - event.target.remove(); +@foreach (var tag in Tags) +{ + @tag } -igRegisterScript("handleChipRemove", handleChipRemove, false); +@code { + private readonly List Tags = new() { "Angular", "React", "Blazor" }; +} ``` diff --git a/docs/xplat/src/content/en/components/inputs/combo/features.mdx b/docs/xplat/src/content/en/components/inputs/combo/features.mdx index e61c2e6753..c58e3f2348 100644 --- a/docs/xplat/src/content/en/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/en/components/inputs/combo/features.mdx @@ -157,6 +157,7 @@ switchDisable.addEventListener("igcChange", () => { Data="Data" ValueKey="Id" DisplayKey="Name" + @bind-Value="SelectedCities" DisableFiltering="@DisableFiltering" CaseSensitiveIcon="@CaseSensitiveIcon" GroupKey="@Group" @@ -169,23 +170,21 @@ switchDisable.addEventListener("igcChange", () => { Disable Combo @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; } } ``` @@ -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" : ""; } } ``` diff --git a/docs/xplat/src/content/en/components/inputs/icon-button.mdx b/docs/xplat/src/content/en/components/inputs/icon-button.mdx index 638db55402..daf158471e 100644 --- a/docs/xplat/src/content/en/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/en/components/inputs/icon-button.mdx @@ -169,7 +169,7 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable ``` - + ```css .size-medium { --ig-size: var(--ig-size-medium); @@ -177,7 +177,7 @@ The size of the button can be changed by utilizing the `--ig-size` CSS variable ``` - + ```css igc-icon-button { --ig-size: var(--ig-size-medium); @@ -188,7 +188,7 @@ igc-icon-button { ```razor - + ``` diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx index 3e8b7c53c2..abcbfaaad1 100644 --- a/docs/xplat/src/content/en/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx @@ -222,7 +222,7 @@ const ChatExample = () => { ```razor - + ``` ```cs diff --git a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx index 7ff7254501..a4e5028803 100644 --- a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx @@ -224,7 +224,7 @@ To enhance our component a bit, we can use it in conjunction with the Home - + Sample Drawer @@ -306,48 +306,20 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Start - End - Top - Bottom + + Start + End + Top + Bottom @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(position); } ``` diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index 9d34485b8c..f3f73268ad 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -152,13 +152,12 @@ const date = new Date(); ```Razor - + @code { public DateTime SelectedDate { get; set; } - public IgbDatePicker DatePicker { get; set; } protected override void OnInitialized() { @@ -439,7 +438,7 @@ In forms, we can handle the `change` event of the component and update the value -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. diff --git a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx index dfbebf6928..5c0a44dc51 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx @@ -180,11 +180,9 @@ return ( ```razor - + @code { - public IgbDateRangePicker DateRangePicker { get; set; } - public IgbDateRangeValue Range = new IgbDateRangeValue() { Start = DateTime.Today, @@ -870,9 +868,13 @@ return ( ```razor - - Toggle week numbers + + Toggle week numbers + +@code { + private bool ShowWeekNumbers; +} ``` diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx index 6753294094..da8e6b53c1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -620,8 +620,11 @@ export class BooleanFilteringOperand extends IgcBooleanFilteringOperand { - Continued - + @if (val) { + Continued + } @else { + Discontinued + } @@ -659,8 +662,11 @@ constructor() { - True - + @if (val) { + True + } @else { + False + } diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx index 1e0612ab7e..40dbf5ab35 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -641,7 +641,7 @@ The supports remote sorting, which is demonst @code { public RenderFragment SortDefaultTemplate = (ctx) => { - return @; + return @; }; } @@ -702,7 +702,7 @@ const sortHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortAscendingTemplate = (ctx) => { - return @; + return @; }; } @@ -763,7 +763,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { @code { public RenderFragment SortDescendingTemplate = (ctx) => { - return @; + return @; }; } @@ -822,7 +822,7 @@ const sortDescendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => @code { public RenderFragment SortDefaultTemplate = (ctx) => { - return @; + return @; }; } ``` @@ -878,7 +878,7 @@ $custom-theme: grid-theme( @code { public RenderFragment SortAscendingTemplate = (ctx) => { - return @; + return @; }; } ``` diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx index 751ee17c09..ea72568f22 100644 --- a/docs/xplat/src/content/jp/components/grids/list.mdx +++ b/docs/xplat/src/content/jp/components/grids/list.mdx @@ -449,39 +449,30 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Small - Medium - Large + + Small + Medium + Large - + @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); } ``` diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx index 19bda0aa1b..d482696c25 100644 --- a/docs/xplat/src/content/jp/components/inputs/chip.mdx +++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx @@ -653,18 +653,15 @@ const [tags, setTags] = useState(['Angular', 'React', 'Blazor']); -`RemoveScript` を通じて JavaScript ハンドラーを割り当て、ホスト ページが読み込むスクリプト ファイルで `igRegisterScript` を使用して登録します。 - ```razor -Angular -``` - -```js -function handleChipRemove(event) { - event.target.remove(); +@foreach (var tag in Tags) +{ + @tag } -igRegisterScript("handleChipRemove", handleChipRemove, false); +@code { + private readonly List Tags = new() { "Angular", "React", "Blazor" }; +} ``` diff --git a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx index e6d7c4cc7c..b24e4e5955 100644 --- a/docs/xplat/src/content/jp/components/inputs/combo/features.mdx +++ b/docs/xplat/src/content/jp/components/inputs/combo/features.mdx @@ -159,6 +159,7 @@ switchDisable.addEventListener("igcChange", () => { Data="Data" ValueKey="Id" DisplayKey="Name" + @bind-Value="SelectedCities" DisableFiltering="@DisableFiltering" CaseSensitiveIcon="@CaseSensitiveIcon" GroupKey="@Group" @@ -171,23 +172,21 @@ switchDisable.addEventListener("igcChange", () => { Disable Combo @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; } } ``` @@ -214,9 +213,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" : ""; } } ``` diff --git a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx index 0ecb362df9..565f074ff1 100644 --- a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx +++ b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx @@ -171,7 +171,7 @@ builder.Services.AddIgniteUIBlazor(); ``` - + ```css .size-medium { --ig-size: var(--ig-size-medium); @@ -179,7 +179,7 @@ builder.Services.AddIgniteUIBlazor(); ``` - + ```css igc-icon-button { --ig-size: var(--ig-size-medium); @@ -190,7 +190,7 @@ igc-icon-button { ```razor - + ``` diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx index e189d162e3..7bea179b17 100644 --- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx @@ -215,7 +215,7 @@ const ChatExample = () => { ```razor - + ``` ```cs diff --git a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx index 593b891bf4..767f4437d0 100644 --- a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx +++ b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx @@ -226,7 +226,7 @@ defineComponents(IgcNavDrawerComponent);

Home

- + Sample Drawer @@ -308,48 +308,20 @@ this.radioGroup.addEventListener('click', (radio: any) => { ```razor - - Start - End - Top - Bottom + + Start + End + Top + Bottom @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(position); } ``` diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 59e245f886..b767dfa806 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -153,13 +153,12 @@ const date = new Date(); ```Razor - + @code { public DateTime SelectedDate { get; set; } - public IgbDatePicker DatePicker { get; set; } protected override void OnInitialized() { @@ -440,7 +439,7 @@ prefix スロットと suffix スロットを使用すると、Input のメイ -フォームでは、コンポーネントの `Change` イベントを処理し、ラベルの値を更新できます。 +フォームでは、`@bind-Value` でコンポーネントの値をバインドします。このサンプルでは Date Picker を必須にしており、フォームの `@onsubmit` ハンドラーはページを再読み込みせずに送信された日付を表示します。ネイティブのリセット ボタンは change イベントを発生させずにピッカーを初期値に戻すため、`@onreset` ハンドラーでバインドしたフィールドをクリアします。 diff --git a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx index 54e2596b7e..4508df648a 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx @@ -198,11 +198,9 @@ return ( ```razor - + @code { - public IgbDateRangePicker DateRangePicker { get; set; } - public IgbDateRangeValue Range = new IgbDateRangeValue() { Start = DateTime.Today, @@ -902,9 +900,13 @@ return ( ```razor - - Toggle week numbers + + Toggle week numbers + +@code { + private bool ShowWeekNumbers; +} ``` diff --git a/src/integration.ts b/src/integration.ts index 33b9521f71..f301b57821 100644 --- a/src/integration.ts +++ b/src/integration.ts @@ -73,6 +73,38 @@ import { igChrome } from 'igniteui-astro-components/chrome'; import { rehypeStripEmptyParagraphs } from './plugins/rehype-strip-empty-paragraphs'; import { rehypeApiReferencesGrid } from './plugins/rehype-api-references-grid'; +/** + * Scopes Razor component tags (``, ``) the way VS Code's C# extension does. + * + * The razor grammar leaves those tags to the HTML grammar, which scopes any tag outside the + * HTML spec as `invalid.illegal.unrecognized-tag.html`, and themes style that as an error. + * VS Code recolors them from the language server; without one, the grammar has to. + */ +const razorComponentTags = { + name: 'razor-component-tags', + scopeName: 'razor.component-tags', + injectTo: ['text.aspnetcorerazor'], + // Only markup handled by the HTML grammar: not code (`List` in `@code`), comments, + // attribute values, Razor expressions (`@(a ])', + beginCaptures: { + 1: { name: 'punctuation.definition.tag.begin.html' }, + 2: { name: 'entity.name.class.element.component' }, + }, + end: '/?>', + endCaptures: { 0: { name: 'punctuation.definition.tag.end.html' } }, + name: 'meta.tag.component.razor', + patterns: [{ include: 'text.html.basic#attribute' }], + }, + ], +}; + /** * The Infragistics header/footer, a snapshot of the marketing site's own * export (/assets/chrome/fragment.html), kept current by sync PRs from the @@ -881,6 +913,7 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs markdown: { shikiConfig: { theme: 'dark-plus', + langs: [razorComponentTags], wrap: true, }, ...(astroExtra as any).markdown,