diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index e7f3d35bc..364b22e51 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -11,6 +11,84 @@ _language: ja {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-24-1-SEP}** + +### 一般 + +- 新しい [Banner](notifications/banner.md) コンポーネント。 +- 新しい [DatePicker](scheduling/date-picker.md) コンポーネント。 +- 新しい `Divider` コンポーネント。 +- `Icon` + - `SetIconRef` メソッドが追加されました。これにより、アイコンを SVG ファイルで登録および置き換えることができます。 + - すべてのコンポーネントが内部的な参照によるアイコンを使用するようになり、カスタム テンプレートを明示的に提供しなくても簡単に置き換えられるようになりました。 +- `Combo`、`DatePicker`、`Dialog`、`Dropdown`、`ExpansionPanel`、`NavDrawer`、`Toast`、`Snackbar`、**IgbSelectComponent** + - トグル メソッドの `Show`、`Hide`、`Toggle` メソッドは、成功した場合に **true** を返すようになりました。そうでない場合は **false**。 +- `RadioGroup` + - `Name` および `Value` プロパティを追加しました。`Value` は双方向バインディングもサポートします。 + +**重大な変更**: + +- 古い **IgbDatePicker** の名前を **IgbXDatePicker** に変更しました。 +- `Form` コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。 +- 以下のコンポーネントの `size` プロパティが削除され、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 + - `Avatar`、`Button`、`IconButton`、`Calendar`、`Chip`、`Dropdown`、`Icon`、`Input`、`List`、`Rating`、`Snackbar`、`Tabs`、`Tree` +- `Badge`、`Chip`、`LinearProgress`、`CircularProgress` + - `Variant` プロパティ タイプの名前を `StyleVariant` に変更しました。 +- `Calendar` + - `WeekStart` プロパティ タイプの名前を `WeekDays` に変更しました。 +- `Checkbox`、`Switch` + - `Change` イベント引数タイプを `ComponentBoolValueChangedEventArgs` から `CheckboxChangeEventArgs` に変更しました。 +- `Combo` + - `IgbCombo` はジェネリック タイプになり、`Value` タイプは `T[]` タイプになりました。つまり、`T` を指定するか、割り当てられた `Value` タイプによって推論される必要があります。 + - `PositionStrategy`、`Flip`、`SameWidth` プロパティが削除されました。 +- **IgbSelectComponent** + - `PositionStrategy`、`Flip`、`SameWidth` プロパティが削除されました。 +- `DateTimeInput` + - `MaxValue` および `MinValue` プロパティが削除されました。代わりに `Max` および `Min` を使用してください。 +- `Dropdown` + - `PositionStrategy` プロパティが削除されました。 +- `Input` + - 古い名前の `Maxlength` および `Minlength` プロパティが削除されました。`MaxLength` および `MinLength` を使用してください。 + - 古い名前の `Readonly` および `Inputmode` プロパティが削除されました。`ReadOnly` および `InputMode` を使用してください。 + - `InputMode` タイプも `string` (文字列) に変更されました。 +- `Radio` + - `Change` イベント引数タイプを `ComponentBoolValueChangedEventArgs` から `RadioChangeEventArgs` に変更しました。 +- `RangeSlider` + - `AriaThumbLower` および `AriaThumbUpper` プロパティが削除されました。代わりに `ThumbLabelLower` および `ThumbLabelUpper` を使用してください。 +- `Rating` + - `Readonly` プロパティの名前を `ReadOnly` に変更しました。 + +### {PackageGrids} + +- `すべてのグリッド` + - グリッド列コレクションを返す `GetColumns` / `GetColumnsAsync` メソッドが追加されました。 + - 新しい `RowClick` イベントが追加されました。 +- `PivotGrid` + - `PivotDimension` に `Sortable` プロパティが追加されました。 + - 水平レイアウトが追加されました。新しい `PivotUI` プロパティ内で `RowLayout` `Horizontal` として有効にできます。 + - 水平レイアウトのみの行ディメンション サマリーが追加されました。`HorizontalSummary` を **true** に設定することで、各 `PivotDimension` に対して有効にできます。 + - 水平集計の位置を設定するための `HorizontalSummariesPosition` プロパティを `PivotUI` に追加しました。 + - 行ディメンションの行ヘッダーが追加されました。新しい `PivotUI` プロパティ内で `ShowHeaders` **true** として有効にできます。 + - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 + - キーボード操作で行ディメンションの縮小 (Alt + 矢印キー) および行ヘッダーのソート (Ctrl + 矢印上/下) ができるようになりました。 + +**重大な変更**: +- `すべてのグリッド`、`RowIsland` + - `DisplayDensity` の非推奨のプロパティが削除されました。 + - `Columns`、`ActualColumns`、`ContentColumns` プロパティの名前が `ColumnList`、`ActualColumnList`、`ContentColumnList` に変更されました。代わりに新しい `GetColumns` メソッドを使用することをお勧めします。 + - `RowDelete` および `RowAdd` イベント引数タイプの名前を `RowDataCancelableEventArgs` に変更しました。 + - `ContextMenu` イベント引数タイプの名前を `GridContextMenuEventArgs` に変更しました。 + - `GridEditEventArgs`、`GridEditDoneEventArgs`、`PinRowEventArgs` イベントの `RowID` および `PrimaryKey` プロパティが削除されました。代わりに `RowKey` を使用してください。 +- `PivotGrid` + - `ShowPivotConfigurationUI` プロパティが削除されました。`PivotUI` を使用して、その中に新しい `ShowConfiguration` オプションを設定してください。 +- `Column` + - `Movable` プロパティが削除されました。グリッドの `Moving` プロパティを使用してください。 + - `ColumnChildren` プロパティが削除されました。代わりに `ChildColumns` を使用してください。 +- `ColumnGroup` + - `Children` プロパティが削除されました。代わりに `ChildColumns` を使用してください。 +- `Paginator` + - `IsFirstPageDisabled` および `IsLastPageDisabled` プロパティが削除されました。代わりに、`IsFirstPage` および `IsLastPage` を使用してください。 + ## **{PackageVerChanges-24-1-JUN}** ### 一般 diff --git a/doc/jp/components/general-changelog-dv-react.md b/doc/jp/components/general-changelog-dv-react.md index 2d88ff3df..b58e11cf5 100644 --- a/doc/jp/components/general-changelog-dv-react.md +++ b/doc/jp/components/general-changelog-dv-react.md @@ -10,6 +10,84 @@ _language: ja {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-24-1-SEP}** + +### {PackageCommon} + +- 新しい [Banner](notifications/banner.md) コンポーネント。 +- 新しい [DatePicker](scheduling/date-picker.md) コンポーネント。 +- 新しい `Divider` コンポーネント。 +- すべてのコンポーネントにネイティブ イベントのサポートが追加されました。 +- `Icon` + - `setIconRef` メソッドが追加されました。これにより、アイコンを SVG ファイルで登録および置き換えることができます。 + - すべてのコンポーネントが内部的な参照によるアイコンを使用するようになり、カスタム テンプレートを明示的に提供しなくても簡単に置き換えられるようになりました。 +- `Combo`、`DatePicker`、`Dialog`、`Dropdown`、 `ExpansionPanel`、`NavDrawer`、`Toast`、`Snackbar`、**IgrSelectComponent** + - トグル メソッドの `show`、`hide`、`toggle` メソッドは、成功した場合に **true** を返すようになりました。そうでない場合は **false**。 +- **IgrButtonComponent**、`IconButton`、`Checkbox`、`Switch`、`Combo`、`DateTimeInput`、`Input`、`MaskInput`、`Radio`、**IgrSelectComponent**、`Textarea` + - カスタムの `focus` および `blur` イベントは非推奨になりました。代わりにネイティブの `onFocus` および `onBlur` イベントを使用してください。 +- `RadioGroup` + - `Name` および `Value` プロパティを追加しました。 + +**重大な変更**: + +- 古い **IgrDatePicker** の名前を **IgrXDatePicker** に変更しました。 +- `Form` コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。 +- 以下のコンポーネントの `size` プロパティが削除され、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 + - `Avatar`、 **IgrButtonComponent**、`IconButton`、`Calendar`、`Chip`、`Dropdown`、`Icon`、`Input`、`List`、`Rating`、`Snackbar`、`Tabs`、`Tree` +- `Badge`、`Chip`、`LinearProgress`、`CircularProgress` + - `Variant` プロパティ タイプの名前を `StyleVariant` に変更しました。 +- `Calendar` + - `WeekStart` プロパティ タイプの名前を `WeekDays` に変更しました。 +- `Checkbox`、`Switch` + - `change` イベント引数タイプを `ComponentBoolValueChangedEventArgs` から `CheckboxChangeEventArgs` に変更しました。 +- `Combo`、**IgrSelectComponent** + - `positionStrategy`、`flip`、`sameWidth` プロパティが削除されました。 +- `DateTimeInput` + - `maxValue` および `minValue` プロパティが削除されました。代わりに `max` および `min` を使用してください。 +- `Dropdown` + - `positionStrategy` プロパティが削除されました。 +- `Input` + - 古い名前の `maxlength` および `minlength` プロパティが削除されました。`maxLength` および `minLength` を使用してください。 + - 古い名前の `readonly` および `inputmode` プロパティが削除されました。`readOnly` および `inputMode` を使用してください。 + - `inputMode` タイプも `string` (文字列) に変更されました。 +- `Radio` + - `change` イベント引数タイプを `ComponentBoolValueChangedEventArgs` から `RadioChangeEventArgs` に変更しました。 +- `RangeSlider` + - `ariaThumbLower` および `ariaThumbUpper` プロパティが削除されました。代わりに `thumbLabelLower` および `thumbLabelUpper` を使用してください。 +- `Rating` + - `readonly` プロパティの名前を `readOnly` に変更しました。 + +### {PackageGrids} + +- `すべてのグリッド` + - 新しい `RowClick` イベントが追加されました。 +- `PivotGrid` + - `PivotDimension` に `sortable` プロパティが追加されました。 + - 水平レイアウトが追加されました。新しい `pivotUI` プロパティ内で `rowLayout` `horizontal` として有効にできます。 + - 水平レイアウトのみの行ディメンション サマリーが追加されました。`horizontalSummary` を **true** に設定することで、各 `PivotDimension` に対して有効にできます。 + - 水平集計の位置を設定するための `horizontalSummariesPosition` プロパティを `pivotUI` に追加しました。 + - 行ディメンションの行ヘッダーが追加されました。新しい `pivotUI` プロパティ内で `showHeaders` **true** として有効にできます。 + - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 + - キーボード操作で行ディメンションの縮小 (Alt + 矢印キー) および行ヘッダーのソート (Ctrl + 矢印上/下) ができるようになりました。 + +**重大な変更**: + +- `すべてのグリッド`、`RowIsland` + - `displayDensity` の非推奨のプロパティが削除されました。 + - `actualColumns`、`contentColumns` プロパティの名前を、`actualColumnList` および `contentColumnList` に変更しました。すべての列を取得するには、`columns` または `columnList` プロパティを使用してください。 + - `rowDelete` および `rowAdd` イベント引数タイプの名前を `RowDataCancelableEventArgs` に変更しました。 + - `contextMenu` イベント引数タイプの名前を `GridContextMenuEventArgs` に変更しました。 + - `GridEditEventArgs`、`GridEditDoneEventArgs`、`PinRowEventArgs` イベントの `rowID` および `primaryKey` プロパティが削除されました。代わりに `rowKey` を使用してください。 +- `PivotGrid` + - `showPivotConfigurationUI` プロパティが削除されました。`pivotUI` を使用して、その中に新しい `showConfiguration` オプションを設定してください。 +- `Column` + - `movable` プロパティが削除されました。グリッドの `moving` プロパティを使用してください。 + - `columnChildren` プロパティが削除されました。代わりに `childColumns` を使用してください。 +- `ColumnGroup` + - `children` プロパティが削除されました。代わりに `childColumns` を使用してください。 +- `Paginator` + - `isFirstPageDisabled` および `isLastPageDisabled` プロパティが削除されました。代わりに、`isFirstPage` および `isLastPage` を使用してください。 + ## **{PackageVerChanges-24-1-JUN}** ### {PackageCommon} diff --git a/doc/jp/components/general-changelog-dv-wc.md b/doc/jp/components/general-changelog-dv-wc.md index 8601bf847..4aa550ebf 100644 --- a/doc/jp/components/general-changelog-dv-wc.md +++ b/doc/jp/components/general-changelog-dv-wc.md @@ -6,10 +6,42 @@ mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "XamDataChart", "Tool namespace: Infragistics.Controls _language: ja --- + # {ProductName} 変更ログ {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +### **{PackageVerChanges-24-1-SEP}** + +- `すべてのグリッド` + - 新しい `RowClick` イベントが追加されました。 +- `PivotGrid` + - `PivotDimension` に `sortable` プロパティが追加されました。 + - 水平レイアウトが追加されました。新しい `pivotUI` プロパティ内で `rowLayout` `horizontal` として有効にできます。 + - 水平レイアウトのみの行ディメンション サマリーが追加されました。`horizontalSummary` を **true** に設定することで、各 `PivotDimension` に対して有効にできます。 + - 水平集計の位置を設定するための `horizontalSummariesPosition` プロパティを `pivotUI` に追加しました。 + - 行ディメンションの行ヘッダーが追加されました。新しい `pivotUI` プロパティ内で `showHeaders` **true** として有効にできます。 + - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 + - キーボード操作で行ディメンションの縮小 (Alt + 矢印キー) および行ヘッダーのソート (Ctrl + 矢印上/下) ができるようになりました。 + +**重大な変更**: +- `すべてのグリッド`、`RowIsland` + - `displayDensity` の非推奨のプロパティが削除されました。 + - `actualColumns`、`contentColumns` プロパティの名前を、`actualColumnList` および `contentColumnList` に変更しました。すべての列を取得するには、`column` または `columnList` プロパティを使用してください。 + - `rowDelete` および `rowAdd` イベント引数タイプの名前を `RowDataCancelableEventArgs` に変更しました。 + - `contextMenu` イベント引数タイプの名前を `GridContextMenuEventArgs` に変更しました。 + - `GridEditEventArgs`、`GridEditDoneEventArgs`、`PinRowEventArgs` イベントの `rowID` および `primaryKey` プロパティが削除されました。代わりに `rowKey` を使用してください。 +- `PivotGrid` + - `showPivotConfigurationUI` プロパティが削除されました。`pivotUI` を使用して、その中に新しい `showConfiguration` オプションを設定してください。 +- `Column` + - `movable` プロパティが削除されました。グリッドの `moving` プロパティを使用してください。 + - `columnChildren` プロパティが削除されました。代わりに `childColumns` を使用してください。 +- `ColumnGroup` + - `children` プロパティが削除されました。代わりに `childColumns` を使用してください。 +- `Paginator` + - `isFirstPageDisabled` および `isLastPageDisabled` プロパティが削除されました。代わりに、`isFirstPage` および `isLastPage` を使用してください。 + + ### **{PackageVerChanges-24-1-JUN}** #### {PackageCommon} @@ -165,6 +197,37 @@ Data Grid コンポーネントには 「inputs」 パッケージが必要で ## {PackageCommon} +### **{PackageCommonVerChanges-5.0.0}** + +- `Icon` + - `setIconRef` メソッドが追加されました。これにより、アイコンを SVG ファイルで登録および置き換えることができます。 + - すべてのコンポーネントが内部的な参照によるアイコンを使用するようになり、カスタム テンプレートを明示的に提供しなくても簡単に置き換えられるようになりました。 +- `RadioGroup` + - `name` および `value` プロパティを追加しました。 + +**重大な変更**: + +- `Form` コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。 +- 以下のコンポーネントの `size` プロパティが削除され、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 + - `Avatar`、`Button`,`IconButton`、`Calendar`、`Chip`、`Dropdown`、`Icon`、`Input`、`List`、`Rating`、`Snackbar`、`Tabs`、`Tree` +- カスタム `igcFocus` および `igcBlur` イベントが削除されました。次のコンポーネントには、代わりにネイティブの `focus` イベントと `blur` イベントを使用してください。 + - `Button`、`IconButton`、`Checkbox`、`Switch`、`Combo`、`DateTimeInput`、`Input`、`MaskInput`、`Radio`、**IgcSelectComponent**、`Textarea` +- `Checkbox`、`Switch`、`Radio` + - `igcChange` イベント引数を `CustomEvent` から `CustomEvent<{ checked: boolean; value: string | undefined }>` に変更しました。 +- `Combo`、**IgcSelectComponent** + - `positionStrategy`、`flip`、`sameWidth` プロパティが削除されました。 +- `Dialog` + - `closeOnEscape` プロパティの名前を `keepOpenOnEscape` に変更しました。 +- `Dropdown` + - `positionStrategy` プロパティが削除されました。 +- `Input` + - `maxlength` および `minlength` プロパティが削除されました。代わりに、ネイティブの `maxLength` および `minLength` プロパティ、または `max` および `min` を使用してください。 + - `readonly` および `inputmode` プロパティの名前を `readOnly` および `inputMode` に変更しました。 +- `RangeSlider` + - `ariaThumbLower`/`ariaThumbUpper` プロパティの名前を、`thumbLabelLower`/`thumbLabelUpper` に変更しました。 +- `Rating` + - `readonly` プロパティの名前を `readOnly` に変更しました。 + ### **{PackageCommonVerChanges-4.11.1}** #### 変更 diff --git a/doc/jp/components/notifications/banner.md b/doc/jp/components/notifications/banner.md index 9fe6b1d4c..dcf3153dd 100644 --- a/doc/jp/components/notifications/banner.md +++ b/doc/jp/components/notifications/banner.md @@ -33,6 +33,39 @@ defineComponents(IgcBannerComponent); ``` + +まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります: + +```cmd +npm install igniteui-react +``` + +次に、以下のように、`Banner` とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります: + +```tsx +import { IgrBannerModule, IgrBanner } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrBannerModule.register(); +``` + + + +`Banner` を使用する前に、次のように登録する必要があります: + +```razor +// in Program.cs file + +builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); +``` + +スタイルを `Banner` コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります: + +```razor + +``` + + {ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。 ### Banner の表示 @@ -47,6 +80,33 @@ Banner コンポーネントを表示するには、ボタン クリックで `S ``` +```tsx + bannerRef.current.show()}> + Show Banner + + + + You are currently offline. + +``` + +```razor +Show Banner + + + You are currently offline. + + +@code { + private IgbBanner bannerRef; + + private void ShowBanner() + { + this.bannerRef.ShowAsync(); + } +} +``` + > [!NOTE] > `Banner` には、バナーを閉じるデフォルトの `OK` アクション ボタンが含まれています。 @@ -57,7 +117,7 @@ Banner コンポーネントを表示するには、ボタン クリックで `S ### バナー メッセージの変更 -`igc-banner` タグに渡されるコンテンツを変更することによりバナーに表示されるメッセージを設定できます。指定したバナー領域にテキストが表示され、表示時にバナーはデフォルト テンプレートを使用します。以下は、サンプル バナーのコンテンツを変更してより多くの情報を提供します。 +`{BannerSelector}` タグに渡されるコンテンツを変更することによりバナーに表示されるメッセージを設定できます。指定したバナー領域にテキストが表示され、表示時にバナーはデフォルト テンプレートを使用します。以下は、サンプル バナーのコンテンツを変更してより多くの情報を提供します。 ```html ``` +```tsx + + You have lost connection to the internet. This app is offline. + +``` + +```razor + + You have lost connection to the internet. This app is offline. + +``` + ### アイコンの追加 -バナーの `prefix` スロットを使用して、[`igc-icon`](../layouts/icon.md) をバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。 +バナーの `prefix` スロットを使用して、`Icon` をバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。 > [!NOTE] -> 複数の `igc-icon` 要素が挿入される場合、バナーはそれらすべてを最初に配置しようとします。`igc-icon` は 1 つのみ、直接渡すことに注意してください。 +> 複数の `Icon` 要素が挿入される場合、バナーはそれらすべてを最初に配置しようとします。`Icon` は 1 つのみ、直接渡すことに注意してください。 -`igc-icon` をバナーに渡すには、`prefix` スロットを使用します。 +`Icon` をバナーに渡すには、`prefix` スロットを使用します。 ```html ``` -バナー メッセージで `igc-icon` を使用する場合は、バナーのコンテンツに挿入するだけです。 +```tsx + + + You have lost connection to the internet. This app is offline. + +``` + +```razor + + + You have lost connection to the internet. This app is offline. + +``` + +バナー メッセージで `Icon` を使用したい場合は、バナーのコンテンツに挿入するだけです。 ```html ``` +```tsx + + You have lost connection to the internet. This app is offline. + + +``` + +```razor + + You have lost connection to the internet. This app is offline. + + +``` + ### バナー ボタンの変更 `Banner` は、バナー ボタンをテンプレート化するための `actions` スロットを公開します。これにより、デフォルトのバナー ボタン (`OK`) をオーバーライドし、ユーザー定義のカスタム操作を追加します。 @@ -107,6 +207,41 @@ Banner コンポーネントを表示するには、ボタン クリックで `S ``` +```tsx + + + You have lost connection to the internet. This app is offline. +
+ bannerRef.current.toggle()}> + + Toggle Banner + +
+ +``` + +```razor + + + You have lost connection to the internet. This app is offline. +
+ + Toggle Banner + + +
+ + +@code { + private IgbBanner bannerRef; + + private void OnButtonClick() + { + this.bannerRef.ToggleAsync(); + } +} +``` + `sample="/notifications/banner/banner-sample-2", height="530", alt="{Platform} Banner の例"` ### イベントにバインド @@ -128,6 +263,46 @@ banner.addEventListener('igcClosing', (event) => { }); ``` +```tsx + + ... + + +const bannerRef = useRef(null); + +useEffect(() => { + bannerRef.current.nativeElement.addEventListener('igcClosing', (event) => { + event.preventDefault(); + }); +}, []) +``` + +```razor + + +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JS.InvokeVoidAsync("handleClosing"); + } + } +} +``` +```razor +//In JavaScript: +function handleClosing() { + const banner = document.getElementById('banner'); + + banner.addEventListener('igcClosing', (event) => { + event.preventDefault(); + }); +} +``` + > [!NOTE] > 上記が適用されると、終了イベントが常にキャンセルされるため、バナーが閉じることはありません。 @@ -152,7 +327,48 @@ banner.addEventListener('igcClosing', (event) => { ``` +```tsx + + + You have lost connection to the internet. This app is offline. +
+ bannerRef.current.hide()}> + + Continue Offline + + refreshBanner()}> + + Turn On Wifi + +
+ +``` +```razor + + + You have lost connection to the internet. This app is offline. +
+ + Continue Offline + + + + Turn On Wifi + + +
+ + +@code { + private IgbBanner bannerRef; + + private void HideBanner() + { + this.bannerRef.HideAsync(); + } +} +``` > Google の[マテリアル デザイン ガイドライン](https://material.io/design/components/banners.html#anatomy)では、バナーはに表示するボタンは 2 つまでです。`Banner` は、`actions` スロットの要素数を明示的に制限しませんが、マテリアル デザイン ガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。 @@ -207,6 +423,79 @@ public refreshBanner() { } ``` +```tsx + +

Gallery

+ refreshBanner()}> + + + + ... +
+ ... + refreshBanner()}> + + Turn On Wifi + +
+ + +const bannerRef = useRef(null); +const iconRef = useRef(null); + +const [wifiState, setWifiState] = useState(false); + +function refreshBanner() { + if (!wifiState) { + iconRef.current.name = 'signal_wifi_4_bar'; + bannerRef.current.hide(); + } else { + iconRef.current.name = 'signal_wifi_off'; + bannerRef.current.show(); + } + setWifiState(current => !current); +} +``` + +```razor + +

Gallery

+ + + + + ... +
+ ... + + Turn On Wifi + + +
+ + +@code { + private IgbBanner bannerRef; + private string iconName = "signal_wifi_off"; + private bool wifiState = false; + + private void RefreshBanner() + { + if (!this.wifiState) + { + this.iconName = "signal_wifi_4_bar"; + this.bannerRef.HideAsync(); + } + else + { + this.iconName = "signal_wifi_off"; + this.bannerRef.ShowAsync(); + } + this.wifiState = !this.wifiState; + } +} +``` + 最後に、WiFi の状態に関するメッセージを表示する `Toast` を追加します。以下はテンプレート化したバナーのデモです。 `sample="/notifications/banner/banner-advanced-sample", height="530", alt="{Platform} Banner の例"` diff --git a/docfx/jp/components/toc.json b/docfx/jp/components/toc.json index 93d364a6b..fb9630966 100644 --- a/docfx/jp/components/toc.json +++ b/docfx/jp/components/toc.json @@ -115,8 +115,7 @@ { "exclude": ["Angular", "Blazor", "WebComponents"], "name": "Ignite UI for React と Next.js の統合", - "href": "nextjs-usage.md", - "status": "UPDATED" + "href": "nextjs-usage.md" }, { "exclude": ["Angular"], @@ -601,43 +600,36 @@ "exclude": ["Angular"], "name": "ツリー グリッド", "href": "grids/tree-grid/overview.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "クリップボードの操作", - "href": "grids/tree-grid/clipboard-interactions.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/clipboard-interactions.md" }, { "exclude": ["Angular"], "name": "縮小可能な列グループ", - "href": "grids/tree-grid/collapsible-column-groups.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/collapsible-column-groups.md" }, { "exclude": ["Angular"], "name": "列のタイプ", - "href": "grids/tree-grid/column-types.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-types.md" }, { "exclude": ["Angular"], "name": "条件付きスタイル設定", - "href": "grids/tree-grid/conditional-cell-styling.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/conditional-cell-styling.md" }, { "exclude": ["Angular"], "name": "列の非表示", - "href": "grids/tree-grid/column-hiding.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-hiding.md" }, { "exclude": ["Angular", "React"], "name": "列の移動", - "href": "grids/tree-grid/column-moving.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-moving.md" }, { "exclude": ["Angular", "React"], @@ -648,58 +640,49 @@ { "exclude": ["Angular"], "name": "列のサイズ変更", - "href": "grids/tree-grid/column-resizing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-resizing.md" }, { "exclude": ["Angular"], "name": "編集", "href": "grids/tree-grid/editing.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "セルの編集", - "href": "grids/tree-grid/cell-editing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/cell-editing.md" }, { "exclude": ["Angular"], "name": "行の追加", - "href": "grids/tree-grid/row-adding.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-adding.md" }, { "exclude": ["Angular"], "name": "行の編集", - "href": "grids/tree-grid/row-editing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-editing.md" } ] }, { "exclude": ["Angular"], "name": "Excel へのエクスポート", - "href": "grids/tree-grid/export-excel.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/export-excel.md" }, { "exclude": ["Angular"], "name": "フィルタリング", "href": "grids/tree-grid/filtering.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "高度なフィルタリング", - "href": "grids/tree-grid/advanced-filtering.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/advanced-filtering.md" }, { "exclude": ["Angular", "React"], "name": "Excel スタイル フィルタリング", - "href": "grids/tree-grid/excel-style-filtering.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/excel-style-filtering.md" } ] }, @@ -712,8 +695,7 @@ { "exclude": ["Angular"], "name": "複数列ヘッダー", - "href": "grids/tree-grid/multi-column-headers.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/multi-column-headers.md" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], @@ -724,8 +706,7 @@ { "exclude": ["Angular"], "name": "ページング", - "href": "grids/tree-grid/paging.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/paging.md" }, { "exclude": ["Angular", "React", "WebComponents", "Blazor"], @@ -736,50 +717,42 @@ { "exclude": ["Angular"], "name": "行の操作", - "href": "grids/tree-grid/row-actions.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-actions.md" }, { "exclude": ["Angular"], "name": "行のドラッグ", - "href": "grids/tree-grid/row-drag.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-drag.md" }, { "exclude": ["Angular"], "name": "行のピン固定", - "href": "grids/tree-grid/row-pinning.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-pinning.md" }, { "exclude": ["Angular"], "name": "検索", - "href": "grids/tree-grid/search.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/search.md" }, { "exclude": ["Angular"], "name": "選択", "href": "grids/tree-grid/selection.md", - "status": ["NEW_REACT"], "items": [ { "exclude": ["Angular"], "name": "セルの選択", - "href": "grids/tree-grid/cell-selection.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/cell-selection.md" }, { "exclude": ["Angular"], "name": "列の選択", - "href": "grids/tree-grid/column-selection.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/column-selection.md" }, { "exclude": ["Angular"], "name": "行の選択", - "href": "grids/tree-grid/row-selection.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/row-selection.md" } ] }, @@ -788,18 +761,17 @@ "name": "サイズ", "href": "grids/tree-grid/size.md", "status": "NEW" + }, { "exclude": ["Angular"], "name": "サイズ設定", - "href": "grids/tree-grid/sizing.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/sizing.md" }, { "exclude": ["Angular"], "name": "ソート", - "href": "grids/tree-grid/sorting.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/sorting.md" }, { "exclude": ["Angular"], @@ -810,20 +782,17 @@ { "exclude": ["Angular"], "name": "集計", - "href": "grids/tree-grid/summaries.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/summaries.md" }, { "exclude": ["Angular"], "name": "ツールバー", - "href": "grids/tree-grid/toolbar.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/toolbar.md" }, { "exclude": ["Angular"], "name": "仮想化とパフォーマンス", - "href": "grids/tree-grid/virtualization.md", - "status": ["NEW_REACT"] + "href": "grids/tree-grid/virtualization.md" }, { "exclude": ["Angular", "React", "Blazor"], @@ -847,8 +816,7 @@ { "exclude": ["Angular"], "name": "ツリー", - "href": "grids/tree.md", - "status": "UPDATED" + "href": "grids/tree.md" }, { "exclude": ["Angular", "Blazor", "WebComponents", "React"], @@ -1516,8 +1484,7 @@ { "exclude": ["Angular", "React", "Blazor"], "name": "カスタマイズ", - "href": "layouts/dock-manager-customization.md", - "status": "NEW" + "href": "layouts/dock-manager-customization.md" } ] }, @@ -1539,11 +1506,10 @@ "href": "layouts/tabs.md", "status": "" }, - { + { "exclude": ["Angular", "React", "Blazor"], "name": "デバイダー", - "href": "layouts/divider.md", - "status": "NEW" + "href": "layouts/divider.md" }, { "name": "メニュー", @@ -1551,8 +1517,7 @@ }, { "name": "ツールバー", - "href": "menus/toolbar.md", - "status": "PREVIEW" + "href": "menus/toolbar.md" }, { "exclude": ["Angular"], @@ -1648,8 +1613,7 @@ { "exclude": ["Angular"], "name": "ボタン グループ", - "href": "inputs/button-group.md", - "status": "NEW" + "href": "inputs/button-group.md" }, { "exclude": ["Angular"], @@ -1743,8 +1707,7 @@ { "exclude": ["Angular"], "name": "テキスト エリア", - "href": "inputs/text-area.md", - "status": "NEW" + "href": "inputs/text-area.md" }, { "name": "インタラクション", @@ -1772,7 +1735,7 @@ "header": true }, { - "exclude": ["Angular", "Blazor", "React"], + "exclude": ["Angular"], "name": "バナー", "href": "notifications/banner.md", "status": "NEW"