ステンシルを持つコンポーネントライブラリ.ディープ・ゴー

これは、ステンシルを使用したWebコンポーネントライブラリの作成に関する一連の記事の第4です.チェックアウトザ
最後の投稿では、非常にシンプルなボタンコンポーネントを作成しました.我々は今より多くのオプションと機能をより完全に特色に拡張するつもりです.私は個人的にこのボタン、ボタンの図形のカップル、およびいくつかのサイズのカップルの色のオプションを持っている.

コンポーネント

これを始めるために、ユーザが何を望むかを指定できるようにするために、いくつかの小道具を必要とします.我々の小道具を呼びましょうcolor , shape , and size . 我々はまた、定期的なHTMLボタンと同じように、送信とリセットなどの複数のボタンの種類を持つことができますので、我々はまた、小道具として追加されます.

@Prop()
type: 'button' | 'reset' | 'submit' = 'button';

@Prop()
color: 'primary' | 'accent' | 'light' = 'primary';

@Prop()
shape: 'square' | 'round' = 'square';

@Prop()
size: 'small' | 'default' | 'large' = 'default';

あなたが以前にタイプスクリプトを使用しなかったならば、あなたは、これらの小道具がタイプであるために私のタイプを定義する代わりに、それに気がつくでしょうstring , 技術的には、私は、さらに一歩を踏み出すと、各支柱はいくつかの特定の文字列の一つであることを定義します.これにより、このコンポーネントを使用しているときに、より効果的なIntelliSenseが可能になります.私はフロントを定義しているいくつかの特定のサイズ、色、形、および私が実装するつもりです.その上で、私は私の好みのデフォルトにそれらの小道具を初期化しました、したがって、あなたが単に定義された小道具で私のボタン構成要素を呼ぶならば、それはデフォルトボタンのように見えます.

クラスマップ

次に、これらの小道具を使用して、CSSクラスのマップを作成し、コンポーネントに適用します.私は典型的にはCssClassMap この目的のために.そのファイルを作成しましょうsrc/utils/interfaces.ts , それが何かであるので、私は私のすべての構成要素のために再利用していて、以下の内容をファイルに使用します

export type CssClassMap = { [className: string]: boolean };

ご覧のように、このクラスマップ型をキーのマップ、クラス名、および値として定義しています.効果的に私はクラスを適用するかどうかを指定するつもりです.このインターフェイスを持っているので、このクラスマップをレンダリングにビルドするメソッドを記述しましょう.

export class Button {
  // ...

  render() {
    const classMap = this.getCssClassMap();

    return (
      <button type={this.type} class={classMap} disabled={this.disabled}>
        <slot />
      </button>
    );
  }

  private getCssClassMap(): CssClassMap {
    return {
      [this.color]: true,
      [this.shape]: true,
      [this.size]: true
    };
  }
}

ご覧のように、Renderメソッドからこの関数を呼び出して、クラスマップを取得します.この場合、かなり単純なものです.button . また、私はまた、合格したことに気づいたことがありますtype ボタンにもプロップします.正しいクラスを適用したので、実際にこれらのクラスを実装しましょう.最初に正しい色が必要なので、いくつかのSCSS変数を追加しましょうsrc/styles/variables.scss ファイル.

//...

// Brand Colors
$blue-steel: #4571c4;
$blue-steel-dark: #315db0;
$coral: #c75943;
$coral-dark: #a83a24;
$light: #f0f1f2;
$light-dark: #e2e3e4;

変数が利用可能になったので、クラス自体を実装しましょう.デフォルトクラスを実装する必要はありません.

button {
  //...

  // Color variations
  &.accent {
    background-color: $coral;

    &:hover {
      background-color: $coral-dark;
    }
    &:active {
      background-color: darken($coral-dark, 10%);
    }
  }
  &.light {
    background-color: $light;
    color: rgba(0, 0, 0, 0.7);

    &:hover {
      background-color: $light-dark;
    }
    &:active {
      background-color: darken($light-dark, 10%);
    }
  }

  // Shape variations
  &.round {
    border-radius: 50px;
  }

  // Size variations
  &.small {
    padding: 2px 8px;
    font-size: 12px;
  }
  &.large {
    padding: 8px 20px;
    font-size: 16px;
  }
}

色を変更するクラスの場合は、再実装する必要がありますhover and active 州我々は再実装する必要はありませんdisabled 私たちの既存のもの以来、状態は、単に任意の色で偉大な探して低い不透明度を適用します.ボタンを丸くすることは些細なものであり、そしてpadding and font-size 我々のボタンの大規模または小さなボタンとして良い見てください.
我々はこれらのクラスを実装した今、我々はいくつかのかなり信じられないほどのボタンのWebコンポーネントを探している!

次の手順

我々は今、我々はどこでも使用できる素晴らしいボタンコンポーネントを持っている!これは単純な最初のコンポーネントですので、私たちは他の多くのデコレーターを扱うことはありません@Watch() , @Method() , or @State() . 我々は次のポストでより複雑である新しい構成要素でそれらに入ります.次のいずれかを参照してください!
単に最後の結果レポを参照してくださいするには?チェックイットアウトhere