@classi/spen

"spen" stands for "シャープペンシル".

How to Install

ng addコマンドでインストールすると依存パッケージのインストール、設定ファイルの更新などを自動的に行います。

$ ng add @classi/spen

インストール後のアップデートは ng update コマンドをおすすめします。 一部の変更が自動マイグレーションされます。

$ ng update @classi/spen

How to Use

core

spen コンポーネントを利用したいモジュールで SpenModule をインポートします。

import { SpenModule } from '@classi/spen';

@NgModule({
    imports: [..., SpenModule]
})
export class AppModule {}

オーバーレイ CSS のセットアップ

一部のコンポーネントはオーバーレイーレイ表示のためのグローバル CSS 読み込みが必要です。

• datepicker (popup)
• toast
• modal
• dialog

@classi/spen/assets/styles/overlay.scss をstyles.scssや angular.json のstylesなどで読み込んでください。 （ng addでインストールした場合は自動的に行われます）

      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
               "@classi/spen/assets/styles/overlay.scss"
            ]
          }
        }
      }

アニメーションモジュールのセットアップ

一部のコンポーネントはアニメーションのためにBrowserAnimationsModule が必要です。

• toast

import { SpenModule } from '@classi/spen';

@NgModule({
    imports: [..., BrowserAnimationsModule, SpenModule]
})
export class AppModule {}