Skip to content
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -89,19 +89,18 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';

デモ サンプルの実行方法を見てみましょう。Ignite UI コンポーネントと NG Bootstrap コンポーネントを組み合わせたもので、1 つのアプリケーションにうまく収まります。この例のナビゲーションは、<ApiLink type="ButtonDirective" label="igx-buttons" /> および <ApiLink type="Avatar" label="igx-avatar" /> とともに bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) を使用して作成されます。[Campaigns] ボタンの下の [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) も bootstrap ライブラリから取得されます。ナビゲーションの下で、<ApiLink type="Card" label="igx-card" /> コンポーネントを使用して統計を表示します。カード内に複数の項目を配置しました - <ApiLink type="Avatar" label="igx-avatars" />、<ApiLink type="Icon" label="igx-icons" />、[`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) および [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples)。

<Image src={igxCards} alt="Ignite UI for Angular Cards" width="100%" />
<Image src={igxCards} alt="Ignite UI for Angular Cards" />

`[More]` ボタンをクリックすると、<ApiLink type="Dialog" label="igx-dialog" /> が表示されます。

<Image src={igxDialog} alt="Ignite UI for Angular Dialog" width="100%" />
<Image src={igxDialog} alt="Ignite UI for Angular Dialog" />

次に、クレジット カードに関する情報を表示する [`ngb-accordion`](https://ng-bootstrap.github.io/#/components/accordion/examples) を追加しました。コンテンツの中には、<ApiLink type="List" label="igx-list" /> と `igx-button` があります。

<Image src={ngbAccordion} alt="NG Bootstrap Accordion" width="100%" />

<Image src={ngbAccordion} alt="NG Bootstrap Accordion" />
最後に、右上隅に Ignite UI for Angular `アイコン ボタン`を挿入し、アプリ全体のテーマを変更します。

<Image src={darkVariant} alt="Dark Variant Theme" width="100%" />
<Image src={darkVariant} alt="Dark Variant Theme" />

## スタイル設定

Expand Down Expand Up @@ -264,12 +263,13 @@ Ignite UI for Angular のすべてのコンポーネントは渡されたパレ

// 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);
}
Expand Down Expand Up @@ -355,16 +355,14 @@ Ignite UI for Angular は、テーマごとに 4 つのデフォルト タイプ

## API リファレンス

<hr/>

- <ApiLink kind="sass" module="palettes" type="variable-light-bootstrap-palette" label="Light Bootstrap パレット" />
- <ApiLink kind="sass" module="palettes" type="variable-dark-bootstrap-palette" label="Dark Bootstrap パレット" />
- <ApiLink kind="sass" module="themes" type="mixin-bootstrap-light-theme" label="Light Bootstrap テーマ" />
- <ApiLink kind="sass" module="themes" type="mixin-bootstrap-dark-theme" label="Dark Bootstrap テーマ" />
- <ApiLink kind="sass" module="palettes" type="function-palette" label="Palette Function" />
- <ApiLink kind="sass" module="typography" type="mixin-typography" label="Typography Mixin" />

関連トピック:
## 関連トピック

- [パレット](../sass/palettes.md)
- [コンポーネント テーマ](../sass/component-themes.md)
Expand All @@ -382,6 +380,3 @@ Ignite UI for Angular は、テーマごとに 4 つのデフォルト タイプ
コミュニティに参加して新しいアイデアをご提案ください。
- [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