Skip to content

Commit

Permalink
Merge branch 'vnext' into thristodorova/update-query-builder-topic
Browse files Browse the repository at this point in the history
  • Loading branch information
@teodosiah
teodosiah authored Feb 10, 2025
2 parents 4b90062 + e088ab2 commit 38efbfc
Show file tree
Hide file tree
Showing 96 changed files with 2,908 additions and 5,327 deletions.
39 changes: 19 additions & 20 deletions jp/components/accordion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Angular Accordion は、単一のコンテナーに表示されるクリック

<code-view style="height:460px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1" alt="Angular Avatar の例">
iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1" alt="Angular Accordion の例">
</code-view>

<div class="divider--half"></div>
Expand Down Expand Up @@ -55,9 +55,11 @@ export class AppModule {}

```typescript
// home.component.ts

...
import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
// import { IGX_ACCORDION_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
selector: 'app-home',
template: `
Expand Down Expand Up @@ -238,7 +240,7 @@ Angular [Accordion コンポーネント]({environment:angularApiUrl}/classes/ig

<code-view style="height:550px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2" alt="Angular Avatar の例">
iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2" alt="Angular Accordion の例">
</code-view>

<div class="divider--half"></div>
Expand All @@ -259,8 +261,9 @@ Ignite UI for Angular Accordion のキーボード ナビゲーションは、
- <kbd>Home</kbd> - Accordion の最初の有効なパネルに移動します
- <kbd>END</kbd> - Accordion の最後の有効なパネルに移動します

## Angular Accordion のスタイル設定
[Accordion]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) は、基になる[パネル]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)のコンテナーとしてのみ機能します。スタイルは、[IgxExpansionPanel トピックのスタイル設定セクション](expansion-panel.md#スタイル設定)で説明されているように、パネルのテーマから直接適用できます。
## スタイル設定

[`Accordion`]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) は、基になる[`パネル`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)のコンテナーとしてのみ機能します。スタイルは、[`IgxExpansionPanel トピックのスタイル設定セクション`](expansion-panel.md#スタイル設定)で説明されているように、パネルのテーマから直接適用できます。

設計上、`igx-accordion` 内に配置される場合、展開されたパネルにマージンが設定されます。変更するために、igx-expansion-panel テーマ内で公開されるプロパティがあります。
テーマ エンジンによって公開される関数を利用するには、スタイル ファイルに `index` ファイルをインポートする必要があります。
Expand All @@ -272,33 +275,29 @@ Ignite UI for Angular Accordion のキーボード ナビゲーションは、
// @import '~igniteui-angular/lib/core/styles/themes/index';
```

[expansion-panel-theme]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) を拡張する新しいテーマを作成し、`$expanded-margin` パラメーターを受け取ります。
最も簡単な方法は、[`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) を拡張し、`$expanded-margin`、`$body-color`、および `$header-focus-background` パラメーターを受け入れる新しいテーマを作成する方法です。

```scss
$custom-panel-theme: expansion-panel-theme(
$expanded-margin: 0px
$expanded-margin: 10px,
$body-color: #282885,
$header-focus-background: #efefef
);
```
### CSS 変数の使用

最後にコンポーネントのテーマを含めます。

```scss
:host {
@include css-vars($custom-panel-theme);
}
@include css-vars($custom-panel-theme);
```

### テーマ オーバーライドの使用
### デモ

Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。
<code-view style="height:350px"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/layouts/accordion-style" alt="Angular Accordion スタイルの例">
</code-view>

コンポーネントが [Emulated](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、`::ng-deep` を `:host` セレクターでラップしてください。
```scss
:host {
::ng-deep {
@include expansion-panel($custom-panel-theme);
}
}
```
## API リファレンス
* [IgxAccordion API]({environment:angularApiUrl}/classes/igxaccordioncomponent.html)
* [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)
Expand Down
85 changes: 35 additions & 50 deletions jp/components/action-strip.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,18 @@ _language: ja
---

# Angular Action Strip (アクション ストリップ) ディレクティブの概要

<p class="highlight">
Ignite UI for Angular Action Strip コンポーネントは、ホバーなどのユーザー操作の際に特定のターゲット コンテナーの上に追加の UI および機能を表示できる 1 つ以上のアクションを含むオーバーレイ領域を提供します。アクション ストリップはコンテナーをオーバーレイしようとして絶対的に配置されるため、コンテナーは相対的に配置する必要があります。主な操作とターゲットコ ンテナーへのユーザー アクセスはアクション ストリップでオーバーラップされますが、使用できます。
</p>

<div class="divider--half"></div>

## Angular Action Strip の例


<code-view style="height: 400px;"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph" alt="Angular Action Strip の例">
</code-view>


<div class="divider--half"></div>

## Ignite UI for Angular Action Strip を使用した作業の開始
Expand Down Expand Up @@ -81,46 +78,46 @@ export class HomeComponent {}
Ignite UI for Angular Action Strip モジュールまたはディレクティブをインポートしたので、`igx-action-strip` コンポーネントの基本構成を開始できます。

## Angular Action Strip コンポーネントの使用

アクション ストリップを初期化して正しく配置するには、相対的に配置されたコンテナー内に配置する必要があります。

```html
<div style="position:relative; width:100px; height:100px;">
<igx-action-strip>
<button igxButton (click)="makeTextBold()">
<igx-icon>format_bold</igx-icon>
</button>
</igx-action-strip>
<div>
<igx-action-strip>
<button igxButton (click)="makeTextBold()">
<igx-icon>format_bold</igx-icon>
</button>
</igx-action-strip>
</div>
```

デフォルトでアクション ストリップは表示されますが、これは [`hidden`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html#hidden) の @Input プロパティで設定できます。

### メニューのルック アンド フィール

3 つ以上のアクション項目が表示される場合に、[`IgxActionStripMenuItem`]({environment:angularApiUrl}/classes/igxactionstripmenuitemdirective.html) ディレクティブの使用をお勧めします。`*igxActionStripMenuItem` 構造ディレクティブでマークされたアクション ストリップ内の項目はドロップダウンで表示され、[その他] ボタン (最後のアクションを表す 3 つのドット) を切り替えると表示されます。

```html
<div style="position:relative; width:100px; height:100px;">
<igx-action-strip>
<button *igxActionStripMenuItem igxButton (click)="alignTextLeft()">
<igx-icon>format_align_left</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextCenter()">
<igx-icon>format_align_center</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextRight()">
<igx-icon>format_align_right</igx-icon>
</button>
</igx-action-strip>
<igx-action-strip>
<button *igxActionStripMenuItem igxButton (click)="alignTextLeft()">
<igx-icon>format_align_left</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextCenter()">
<igx-icon>format_align_center</igx-icon>
</button>
<button *igxActionStripMenuItem igxButton (click)="alignTextRight()">
<igx-icon>format_align_right</igx-icon>
</button>
</igx-action-strip>
</div>
```


<code-view style="height: 400px;"
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/menus/action-strip-paragraph-menu" >
</code-view>


### アクション ストリップの再利用

同じアクション ストリップ インスタンスは、アクションを同時に表示する必要がない限り、ドキュメント内の複数の場所で使用できます。
Expand All @@ -130,25 +127,25 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ
> [!NOTE]
> アクション ストリップを `element` に追加するために、`show` API メソッドは [Angular Renderer2](https://angular.io/api/core/Renderer2) を使用します。

## グリッドでの使用

アクション ストリップは、IgxGrid の追加機能と UI を提供します。
これはグリッド アクション コンポーネントで利用でき、2 つのデフォルト コンポーネントを提供します。

- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) - グリッド編集に関連する機能と UI を含みます。グリッドの `rowEditable` オプションの値と行の削除が許可されているかどうかに基づいて、セルまたは行の編集モードをすばやく切り替えることができます。
- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) - グリッドの行ピン固定に関連する機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。

```html
<igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
<igx-column *ngFor="let c of columns" [field]="c.field">
</igx-column>
<igx-column *ngFor="let c of columns" [field]="c.field"> </igx-column>

<igx-action-strip #actionStrip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
<igx-grid-editing-actions></igx-grid-editing-actions>
</igx-action-strip>
<igx-action-strip #actionStrip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
<igx-grid-editing-actions></igx-grid-editing-actions>
</igx-action-strip>
</igx-grid>
```

> [!NOTE]
> これらのコンポーネントは [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) を継承します。カスタム グリッド アクション コンポーネントを作成する場合、`IgxGridActionsBaseDirective` も継承する必要があります。
Expand All @@ -166,6 +163,7 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ
## スタイル設定

アクション ストリップをカスタマイズするには、すべてのスタイリング関数とミックスインが置かれている `index` ファイルをインポートする必要があります。

```scss
@use "igniteui-angular/theming" as *;

Expand All @@ -177,43 +175,30 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ

```scss
$custom-strip: action-strip-theme(
$background: rgba(150, 133, 143, 0.4),
$actions-background: rgba(109, 121, 147, 0.6),
$icon-color: null,
$delete-action: null,
$actions-border-radius: 0
$background: rgba(150, 133, 143, 0.4),
$actions-background: rgba(109, 121, 147, 0.6),
$icon-color: null,
$delete-action: null,
$actions-border-radius: 0,
);
```

最後に新しく作成されたコンポーネントのテーマをアプリケーションに含めます。

`$legacy-support` が `false` (デフォルト) に設定されている場合、css 変数を以下のように含めます。
```scss
@include css-vars($custom-strip);
```

`$legacy-support` が `true` に設定されている場合、コンポーネントのテーマを以下のように含めます。
```scss
@include action-strip($custom-strip);
```

<code-view style="height: 400px;"
no-theming
data-demos-base-url="{environment:demosBaseUrl}"
iframe-src="{environment:demosBaseUrl}/menus/action-strip-styling" >
</code-view>

## 既知の問題と制限

- IE11 で Action Strip コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。

```typescript
import 'core-js/es7/array';
```

## API と スタイル リファレンス

アクション ストリップの API に関する詳細な情報は、以下のリンクのトピックを参照してください。

* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)

以下の定義済み CSS スタイルを使用してアクション ストリップ レイアウトを構成しました。
Expand All @@ -227,10 +212,10 @@ $custom-strip: action-strip-theme(
* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)


<div class="divider"></div>

## テーマの依存関係

* [IgxButton テーマ]({environment:sassApiUrl}/index.html#function-button-theme)
* [IgxRipple テーマ]({environment:sassApiUrl}/index.html#function-ripple-theme)
* [IgxDropDown テーマ]({environment:sassApiUrl}/index.html#function-drop-down-theme)
Expand Down
3 changes: 1 addition & 2 deletions jp/components/autocomplete.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ Angular Autocomplete は、入力中に候補のリストから項目を簡単

[`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) ディレクティブは [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) と候補オプションを表示してテキスト入力を向上する方法を提供します。候補は、テキスト入力の開始時、または `上矢印`/`下矢印` キーを使用して表示します。
</p>
<div class="divider"></div>

## Angular Autocomplete の例

Expand Down Expand Up @@ -257,7 +256,7 @@ export class AutocompleteComponent {
## スタイル設定
各コンポーネントには独自のテーマがあります。

`igxAutocomplete` のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、[input-group-theme]({environment:sassApiUrl}/index.html#function-input-group-theme) と [drop-down-theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) の両方を使用する必要があります。
`igxAutocomplete` のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、[input-group-theme]({environment:sassApiUrl}/index.html#function-input-group-theme) と [drop-down-theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) を使用します。

これら 2 つのコンポーネントのスタイル設定については、[`igxInputGroup`](input-group.md#スタイル設定) および [`igxDropdown`](drop-down.md#スタイル設定) のスタイル設定セクションを参照してください。

Expand Down
41 changes: 11 additions & 30 deletions jp/components/avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正
// avatar.component.scss

igx-avatar {
background: #e41c77;
color: #000000;
background: #e41c77;
color: #000000;
}

```
Expand Down Expand Up @@ -156,45 +156,26 @@ Avatar のスタイル設定を始めるには、すべてのテーマ関数と
次のマークアップを前提として:

```html
<div class="initials-avatar">
<igx-avatar>BA</igx-avatar>
<div class="avatar-sample initials">
<igx-avatar initials="JS" size="medium"></igx-avatar>
</div>
```

テーマを作成する必要があります:
以下のアバター テーマを作成します。

```scss
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius: 16px
$background: #72da67,
$color: #000000,
$border-radius: 16px
);
```

### CSS 変数の使用

最後にアバターのカスタム テーマを渡します。

```scss
.initials-avatar {
@include css-vars($custom-avatar-theme);
}
```

### ミックスインの使用

Internet Explorer 11 以前などブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。

コンポーネントが [`Emulated`](./themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。一方、カスタム テーマが他のコンポーネントに影響しないようにするには、`::ng-deep` の前に `:host` セレクターを含めるようにしてください。

```scss
:host {
::ng-deep {
// Custom avatar theme を `igx-avatar` ミックスインに渡します
.initials-avatar {
@include avatar($custom-avatar-theme);
}
}
.initials {
@include css-vars($custom-avatar-theme);
}
```

Expand Down Expand Up @@ -234,7 +215,7 @@ size 属性が適用されていない場合は、事前定義されたサイズ

```scss
igx-avatar {
--ig-size: var(--ig-size-small);
--ig-size: var(--ig-size-small);
}
```

Expand Down
Loading

0 comments on commit 38efbfc

Please sign in to comment.