Skip to content

[jp-sync] Sync JP badge docs: add outlined section, update dot badge #407

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

Merged
jsakamotoIGJP merged 3 commits into from
Jul 8, 2026
Merged

[jp-sync] Sync JP badge docs: add outlined section, update dot badge #407

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e69226
docs(badge/jp): sync outlined and dot badge sections from EN
github-actions[bot] Jul 7, 2026
2ffc1ce
fix(badge/jp): clarify color precedence wording in badge type note
jsakamotoIGJP Jul 8, 2026
98d7a02
fix(badge/jp): translate remaining English text and remove duplicate …
jsakamotoIGJP Jul 8, 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
136 changes: 74 additions & 62 deletions docs/angular/src/content/jp/components/badge.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular Badge (バッジ) コンポーネントの概要

<div class="highlight">
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 は、視覚的な通知が必要な場合に、アバター、ナビゲーション メニュー、またはアプリケーション内の他のコンポーネントと組み合わせて使用されるコンポーネントです。バッジは通常、情報、成功、警告、またはエラーを伝達するために、事前定義されたスタイルのアイコンとしてデザインされています。
</div>

## Angular Badge の例
Expand Down Expand Up @@ -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 {}
```
Expand All @@ -61,11 +61,11 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
selector: 'app-home',
template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxBadgeComponent]
selector: 'app-home',
template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxBadgeComponent]
})
export class HomeComponent {}
```
Expand Down Expand Up @@ -102,8 +102,8 @@ _あるいは、`16.0.0` 以降、<ApiLink type="Badge" label="IgxBadgeComponent

```html
<div class="wrapper">
<igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
<igx-badge icon="check" type="success"></igx-badge>
<igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
<igx-badge icon="check" type="success"></igx-badge>
</div>
```

Expand Down Expand Up @@ -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');
}
}
```

Expand All @@ -203,9 +203,25 @@ export class BadgeIconComponent implements OnInit {

<Sample src="/data-display/badge-icon" height={100} alt="" />

### アウトライン バッジ

`igx-badge` コンポーネントは、<ApiLink type="Badge" member="outlined" label="outlined" /> 属性を設定することで、バッジの周囲に微妙な境界線を表示することもできます。

```html
<igx-badge outlined></igx-badge>
```

<Sample src="/data-display/badge-outlined-sample" height={100} alt="" />

境界線の色は、<ApiLink kind="sass" module="themes" type="function-badge-theme" label="badge-theme" code={true} /> の `$border-color` プロパティでカスタマイズすることもできます。

### ドット バッジ

`igx-badge` コンポーネントは、`dot` プロパティを有効にすることで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。
`igx-badge` コンポーネントは、<ApiLink type="Badge" member="dot" label="dot" /> プロパティを有効にすることで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。

```html
<igx-badge dot></igx-badge>
```

<Sample src="/data-display/badge-dot-sample" height={100} alt="" />

Expand All @@ -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 {}
```

<DocsAside type="info" title="情報">
<ApiLink type="Badge" label="igx-badge" /> には、バッジの外観を構成するための <ApiLink type="Badge" member="icon" label="icon" /> および <ApiLink type="Badge" member="type" label="type" /> 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、`Default`、`Info`、`Success`、`Warning`、または `Error` のいずれかに設定できます。その型により、特定の背景の色が適用されます。
<ApiLink type="Badge" label="igx-badge" /> には、バッジの外観を構成するための <ApiLink type="Badge" member="icon" label="icon" /> および <ApiLink type="Badge" member="type" label="type" /> 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、`Default`、`Info`、`Success`、`Warning`、または `Error` のいずれかに設定できます。各タイプは特定の背景色を適用し、この背景色はカスタムの背景色よりも優先されます。
</DocsAside>

サンプルでは、<ApiLink type="Badge" member="icon" label="icon" /> と <ApiLink type="Badge" member="type" label="type" /> が icon と type という名前のモデルプロパティにバインドされています。
Expand All @@ -250,12 +266,12 @@ export class AppModule {}
<div class="wrapper">
<div>
<igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
<igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
<igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
</div>
<div class="contact-container">
<span class="contact-name">{{ member.name }}</span>
</div>
</div>
</div>
</div>
</igx-list-item>
</igx-list>
```
Expand All @@ -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;
}
}
}
```

Expand All @@ -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 {
Expand All @@ -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` ファイルをインポートする必要があります。

Expand Down Expand Up @@ -412,10 +427,10 @@ class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]">

<Sample src="/data-display/badge-tailwind-styling-sample" height={340} iframeOnly />

## API リファレンス

<hr/>

## API リファレンス

- <ApiLink type="Avatar" />
- <ApiLink type="Badge" />
- <ApiLink kind="sass" module="themes" type="function-badge-theme" label="IgxBadgeComponent スタイル" />
Expand All @@ -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)
Loading