diff --git a/docs/angular/src/content/jp/components/badge.mdx b/docs/angular/src/content/jp/components/badge.mdx index bacacef550..034377b2b0 100644 --- a/docs/angular/src/content/jp/components/badge.mdx +++ b/docs/angular/src/content/jp/components/badge.mdx @@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Badge (バッジ) コンポーネントの概要
-Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors. +Angular Badge は、視覚的な通知が必要な場合に、アバター、ナビゲーション メニュー、またはアプリケーション内の他のコンポーネントと組み合わせて使用されるコンポーネントです。バッジは通常、情報、成功、警告、またはエラーを伝達するために、事前定義されたスタイルのアイコンとしてデザインされています。
## Angular Badge の例 @@ -44,9 +44,9 @@ import { IgxBadgeModule } from 'igniteui-angular/badge'; // import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ - ... - imports: [..., IgxBadgeModule], - ... + ... + imports: [..., IgxBadgeModule], + ... }) export class AppModule {} ``` @@ -61,11 +61,11 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; // import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package @Component({ - selector: 'app-home', - template: '', - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IgxBadgeComponent] + selector: 'app-home', + template: '', + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IgxBadgeComponent] }) export class HomeComponent {} ``` @@ -102,8 +102,8 @@ _あるいは、`16.0.0` 以降、 - - + + ``` @@ -187,11 +187,11 @@ igx-badge { ```ts export class BadgeIconComponent implements OnInit { - constructor (protected _iconService: IgxIconService) {} + constructor (protected _iconService: IgxIconService) {} - public ngOnInit() { - this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); - } + public ngOnInit() { + this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); + } } ``` @@ -203,9 +203,25 @@ export class BadgeIconComponent implements OnInit { +### アウトライン バッジ + +`igx-badge` コンポーネントは、 属性を設定することで、バッジの周囲に微妙な境界線を表示することもできます。 + +```html + +``` + + + +境界線の色は、 の `$border-color` プロパティでカスタマイズすることもできます。 + ### ドット バッジ -`igx-badge` コンポーネントは、`dot` プロパティを有効にすることで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。 +`igx-badge` コンポーネントは、 プロパティを有効にすることで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。 + +```html + +``` @@ -225,14 +241,14 @@ import { IgxBadgeModule } from 'igniteui-angular/badge'; // import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ - ... - imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule], + ... + imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule], }) export class AppModule {} ``` - には、バッジの外観を構成するための および 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、`Default`、`Info`、`Success`、`Warning`、または `Error` のいずれかに設定できます。その型により、特定の背景の色が適用されます。 + には、バッジの外観を構成するための および 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、`Default`、`Info`、`Success`、`Warning`、または `Error` のいずれかに設定できます。各タイプは特定の背景色を適用し、この背景色はカスタムの背景色よりも優先されます。 サンプルでは、 と が icon と type という名前のモデルプロパティにバインドされています。 @@ -250,12 +266,12 @@ export class AppModule {}
- +
{{ member.name }} -
-
+ + ``` @@ -266,42 +282,41 @@ export class AppModule {} // contacts.component.ts ... - public members: Member[] = [ - new Member('Terrance Orta', 'online'), - new Member('Donna Price', 'online'), - new Member('Lisa Landers', 'away'), - new Member('Dorothy H. Spencer', 'offline'), - ]; +public members: Member[] = [ + new Member('Terrance Orta', 'online'), + new Member('Donna Price', 'online'), + new Member('Lisa Landers', 'away'), + new Member('Dorothy H. Spencer', 'offline'), +]; ``` ```typescript - ... class Member { - public name: string; - public status: string; - public type: string; - public icon: string; - - constructor(name: string, status: string) { - this.name = name; - this.status = status; - switch (status) { - case 'online': - this.type = 'success'; - this.icon = 'check'; - break; - case 'away': - this.type = 'warning'; - this.icon = 'schedule'; - break; - case 'offline': - this.type = 'error'; - this.icon = 'remove'; - break; - } + public name: string; + public status: string; + public type: string; + public icon: string; + + constructor(name: string, status: string) { + this.name = name; + this.status = status; + switch (status) { + case 'online': + this.type = 'success'; + this.icon = 'check'; + break; + case 'away': + this.type = 'warning'; + this.icon = 'schedule'; + break; + case 'offline': + this.type = 'error'; + this.icon = 'remove'; + break; } + } } ``` @@ -311,16 +326,16 @@ class Member { /* contacts.component.css */ .wrapper { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .contact-name { - font-weight: 600; + font-weight: 600; } .contact-container { - margin-left: 20px; + margin-left: 20px; } .badge-style { @@ -343,8 +358,8 @@ class Member { | Primary Property | Dependent Property | Description | | --- | --- | --- | -| **$background-color** | $icon-color | The color used for icons in the badge. | -| | $text-color | The color used for text in the badge. | +| **$background-color** | $icon-color | バッジ内のアイコンに使用される色 | +| | $text-color | バッジ内のテキストに使用される色 | Badge のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 @@ -412,10 +427,10 @@ class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]"> -## API リファレンス -
+## API リファレンス + - - - @@ -434,6 +449,3 @@ class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]"> コミュニティに参加して新しいアイデアをご提案ください。 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) - -- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)