diff --git a/docs/angular/src/content/en/components/tabs.mdx b/docs/angular/src/content/en/components/tabs.mdx
index 2a4593027b..0c7f4d90af 100644
--- a/docs/angular/src/content/en/components/tabs.mdx
+++ b/docs/angular/src/content/en/components/tabs.mdx
@@ -361,7 +361,7 @@ Now that we have all navigation routes set up, we need to declare the `igx-tabs`
```
-The above code creates an `igx-tabs` component with three tab items. Each tab item's header has the `RouterLink` directive applied, which is used to specify the routing link used for the navigation. If any of the links becomes active, the corresponding tab item will have its `selected` property set because of the binding to the `RouterLinkActive` directive's `isActive` property. This way the selected tab item will always be synchronized with the current url path.
+The above code creates an `igx-tabs` component with three tab items. Each tab item's header has the `RouterLink` directive applied, which is used to specify the routing link used for the navigation. If any of the links becomes active, the corresponding tab item will have its
property set because of the binding to the `RouterLinkActive` directive's `isActive` property. This way the selected tab item will always be synchronized with the current url path.
diff --git a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
index fae2bd04eb..27282e7fd7 100644
--- a/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
+++ b/docs/angular/src/content/en/components/themes/misc/bootstrap-theming.mdx
@@ -89,19 +89,18 @@ Follow our [`Getting Started`](/general/getting-started) topic for a complete in
Let's see how our demo sample is done. It is a mixture of Ignite UI and NG Bootstrap components, styled to fit nicely in one application. The navigation in our example is created using the bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) together with
and
. The [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) under the Campaigns button is also taken from the bootstrap library. Below the nav, we are using the
component to display some statistics. Within the cards, we have placed multiple items -
and
as well as bootstrap [`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) and [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples).
-
+
Clicking on the `More` buttons, you will see the
:
-
+
Next, we have added an [`ngb-accordion`](https://ng-bootstrap.github.io/#/components/accordion/examples) showing information about credit cards. Inside its content, there is an
and `igx-button`.
-
-
+
Finally, we inserted an Ignite UI for Angular `icon button` in the top right corner, that changes the theme of the whole app:
-
+
## Styling
@@ -264,12 +263,13 @@ All components in Ignite UI for Angular use colors from the passed palette, ther
// Overriding ngb-accordion colors with colors from the custom dark palette
.accordion {
- .card-header {
+ .accordion-header,
+ .accordion-button {
background-color: color($custom-dark-palette, 'gray', 200);
color: color($custom-dark-palette, 'gray', 900);
}
- .card {
+ .accordion-item {
background-color: color($custom-dark-palette, 'surface');
border-color: color($custom-dark-palette, 'gray', 300);
}
@@ -354,14 +354,16 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w
```
## API References
-
+
-
-
-
-
-
-
-Related topics:
+
+## Related topics
+
- [Palettes](/themes/sass/palettes)
- [Component Themes](/themes/sass/component-themes)
- [Typography](/themes/sass/typography)
@@ -370,6 +372,7 @@ Related topics:
- [Dialog Component](/dialog)
- [Icon Component](/icon)
- [List Component](/list)
+
## Additional Resources
diff --git a/docs/angular/src/content/en/components/time-picker.mdx b/docs/angular/src/content/en/components/time-picker.mdx
index 536af827b4..8757d00a47 100644
--- a/docs/angular/src/content/en/components/time-picker.mdx
+++ b/docs/angular/src/content/en/components/time-picker.mdx
@@ -238,7 +238,7 @@ The
can be configured with
input to
:
+The default time picker mode is editable dropdown mode. To change the time picker mode to read-only dialog mode, set the
input to
:
```typescript
// timePickerDropdown.component.ts
diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx
index a3383961de..30091524d8 100644
--- a/docs/angular/src/content/jp/components/accordion.mdx
+++ b/docs/angular/src/content/jp/components/accordion.mdx
@@ -135,7 +135,7 @@ this.accordion.panels;
Angular Accordion は、パネルの展開と縮小の両方のアニメーションをサポートします。アニメーションの動作をカスタマイズできます。通常、アニメーションは各展開パネルに個別に設定できます。ただし、
レベルで一度にすべてのパネルに適用することもできます。これにより、ユーザーは
の animations プロパティですべてのセクションのアニメーションを一度に無効にできます。
-アニメーションに関して、2 つのオプションがあります。最初に、Accordion コンポーネントの `animationSettings` プロパティを設定します。
+アニメーションに関して、2 つのオプションがあります。最初に、Accordion コンポーネントの
プロパティを設定します。
```typescript
import { useAnimation, slideInLeft, slideOutRight } from '@angular/animations';
@@ -174,7 +174,7 @@ export class AccordionComponent {
```
- のアニメーションを無効にするには、`animationSettings` を `null` に設定します。
+ のアニメーションを無効にするには、 を `null` に設定します。
または、各
の
入力を設定することもできます。
diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx
index 3e094a2610..d34c3457a7 100644
--- a/docs/angular/src/content/jp/components/avatar.mdx
+++ b/docs/angular/src/content/jp/components/avatar.mdx
@@ -79,7 +79,7 @@ Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正
### Avatar の形状
-`shape` 属性の値を `square`、`rounded`、または `circle` に設定することで、アバターの形状を変更できます。デフォルトでは、アバターの形状は `square` です。
+
属性の値を `square`、`rounded`、または `circle` に設定することで、アバターの形状を変更できます。デフォルトでは、アバターの形状は `square` です。
```html
@@ -112,7 +112,7 @@ igx-avatar {
```
-`igx-avatar` コンポーネントの `roundShape` プロパティは廃止されました。代わりに `shape` 属性を使用する必要があります。
+`igx-avatar` コンポーネントの `roundShape` プロパティは廃止されました。代わりに 属性を使用する必要があります。
以下は結果です。
@@ -121,7 +121,7 @@ igx-avatar {
### 画像を表示するアバター
-画像を表示するアバターを作成するには、`src` プロパティで画像ソースを設定します。
+画像を表示するアバターを作成するには、
プロパティで画像ソースを設定します。
```html
を拡張し、`$background` および `$border-radius` パラメーターを指定して新しいテーマを作成します。`$color` (または `$icon-color`) は、指定された背景に対してよりコントラストの高い色 (黒または白) が自動的に設定されます。なお、`$border-radius` プロパティはアバターの `shape` が `rounded` に設定されている場合のみ適用されます。
+最もシンプルな方法として、
を拡張し、`$background` および `$border-radius` パラメーターを指定して新しいテーマを作成します。`$color` (または `$icon-color`) は、指定された背景に対してよりコントラストの高い色 (黒または白) が自動的に設定されます。なお、`$border-radius` プロパティはアバターの
が `rounded` に設定されている場合のみ適用されます。
次のマークアップを前提として:
diff --git a/docs/angular/src/content/jp/components/badge.mdx b/docs/angular/src/content/jp/components/badge.mdx
index 059d5c1c45..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,14 +44,14 @@ import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
- ...
- imports: [..., IgxBadgeModule],
- ...
+ ...
+ imports: [..., IgxBadgeModule],
+ ...
})
export class AppModule {}
```
-あるいは、`16.0.0` 以降、`IgxBadgeComponent` をスタンドアロンの依存関係としてインポートできます。
+あるいは、`16.0.0` 以降、
をスタンドアロンの依存関係としてインポートできます。
```typescript
// home.component.ts
@@ -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 {}
```
@@ -96,14 +96,14 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
export class AppModule {}
```
-_あるいは、`16.0.0` 以降、`IgxBadgeComponent` と `IgxAvatarComponent` をスタンドアロンの依存関係としてインポートできます。_
+_あるいは、`16.0.0` 以降、
と
をスタンドアロンの依存関係としてインポートできます。_
次に、これらのコンポーネントをテンプレートに追加します。
```html
-
-
+
+
```
@@ -124,7 +124,7 @@ igx-badge {
### バッジの形状
-`shape` 属性の値を `square` に設定することで、バッジの形状を変更できます。デフォルトでは、バッジの形状は `rounded` です。
+
属性の値を `square` に設定することで、バッジの形状を変更できます。デフォルトでは、バッジの形状は `rounded` です。
```html
@@ -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` ファイルをインポートする必要があります。
@@ -355,7 +370,7 @@ Badge のスタイル設定は、すべてのテーマ関数とコンポーネ
// @import '~igniteui-angular/lib/core/styles/themes/index';
```
-最も簡単な方法は、