Web Components Button (ボタン) の概要

Web Components Button コンポーネントを使用すると、Web Components アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、Web Components Button OnClick イベント、Web Components ボタンの切り替え、Web Components ボタンの無効化などを通じて柔軟性を提供します。

Web Components Button の例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

次に、以下のように、IgcButtonComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { defineComponents, IgcButtonComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcButtonComponent の使用を開始する最も簡単な方法は次のとおりです:

<igc-button>Click me</igc-button>

Prefix / Suffix

IgcButtonComponent コンポーネントの prefix スロットと suffix スロットを使用すると、ボタンのメインコンテンツの前後に異なるコンテンツを追加できます。

<igc-button type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</igc-button>

タイプ

href 属性が設定されている場合、ボタンコンポーネントはその内部構造を <button> から <a> タイプの要素に変更します。その場合、ボタンは通常のリンクと考えることができます。href 属性を設定すると、rel、target および download 属性も設定できます。ボタンコンポーネントが実際の <button> 要素を内部で使用する場合、プロパティを次のいずれかの値に設定することで、その Type を指定できます。

Submit - フォームデータを送信する場合
reset - フォームデータを初期値にリセットする場合
button - ウェブページのどこかにカスタム機能を備えたボタンを追加する場合

Button のバリアント

Contained ボタン

variant 属性を使用して、コンポーネントテンプレートにシンプルな contained ボタンを追加します。バリアントを設定しない場合、デフォルトでは contained に設定されることに注意してください。

<igc-button variant="contained">Contained</igc-button>

Outlined ボタン

outlined ボタンを作成するために必要なのは、variant プロパティの値を変更することだけです。

<igc-button variant="outlined">Outlined</igc-button>

Flat ボタン

同様に、flat バリアントに切り替えることができます。

<igc-button variant="flat">Flat</igc-button>

Floating Action ボタン

variant プロパティを fab に設定することで、フローティングアクションボタンを作成できます。

<igc-button variant="fab">Fab</igc-button>

ボタンのサイズ設定

ユーザーは、CSS 変数 --ig-size を使用して IgcButtonComponent のサイズを変更できます。次の例では、すべてのサイズ値を表示するためのラジオボタンをいくつか追加します。このようにして、選択されるたびにボタンの size プロパティを変更します。

import { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);

<igc-radio-group id="radio-group" alignment="horizontal">
    <igc-radio name="size" value="small" label-position="after">Small</igc-radio>
    <igc-radio name="size" value="medium" label-position="after" checked>Medium</igc-radio>
    <igc-radio name="size" value="large" label-position="after">Large</igc-radio>
</igc-radio-group>

this.radioGroup = document.getElementById('radio-group') as IgcRadioGroupComponent;
this.outlinedButton = document.getElementById('outlined-btn') as IgcButtonComponent;
this.flatButton = document.getElementById('flat-btn') as IgcButtonComponent;
this.containedButton = document.getElementById('contained-btn') as IgcButtonComponent;
this.fabButton = document.getElementById('fab-btn') as IgcButtonComponent;

this.radioGroup.addEventListener('click', (radio: any) => {
    this.outlinedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.flatButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.containedButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
    this.fabButton.style.setProperty('--ig-size', `var(--ig-size-${radio.target.value})`);
});

上記のコードを実装した結果は、次のようになります:

ダウンロード

download プロパティを設定すると、リンクされた URL に移動する代わりに、保存するように求められます。

<igc-button
    href=""
    variant="contained"
    download="url_to_content"
    target="_blank">
    Download
</igc-button>

スタイル設定

IgcButtonComponent は、スタイル設定に使用できる 3 つの CSS パーツを公開します。

名前	説明
`base`	igc-button コンポーネントのネイティブボタン要素。
`prefix`	igc-button コンポーネントのプレフィックスコンテナー。
`suffix`	igc-button コンポーネントのサフィックスコンテナー。

base CSS パーツを使用すると、ラップされた要素 (<button> または <a>) のスタイルを設定できます。

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}