@guaigaihu/common-ng-ui-liandi v0.0.8

Common UI コンポーネントライブラリ

Angular 17 で開発された再利用可能な UI コンポーネントライブラリです。

特徴

• 📦 すぐに使える Angular コンポーネント
• 🎨 モダンなデザインスタイル
• 🛠 カスタマイズ可能なテーマ
• 📱 レスポンシブデザイン

インストール

npm install @guaigaihu/common-ng-ui-liandi

クイックスタート

1. app.module.ts または独立コンポーネントで必要なコンポーネントをインポート：

import { InputComponent, CheckboxComponent } from '@guaigaihu/common-ng-ui-liandi';

@Component({
  // ...
  imports: [InputComponent, CheckboxComponent]
})

2. テンプレートで使用：

<!-- 入力フィールドコンポーネント -->
<lib-input
  label="ユーザー名"
  [(value)]="username"
  placeholder="ユーザー名を入力してください"
></lib-input>

<!-- チェックボックスコンポーネント -->
<lib-checkbox
  label="記憶する"
  [(checked)]="rememberMe"
></lib-checkbox>

コンポーネントドキュメント

InputComponent 入力フィールドコンポーネント

ラベル付きの入力フィールドコンポーネントで、双方向バインディングをサポートします。

プロパティ

イベント

CheckboxComponent チェックボックスコンポーネント

カスタムスタイルのチェックボックスコンポーネントです。

プロパティ

イベント

スタイルカスタマイズ

コンポーネントは SCSS 変数でテーマをカスタマイズできます：

// カスタムテーマカラー
$primary-color: #3B82F6;     // メインカラー
$border-color: #E5E7EB;      // ボーダーカラー
$hover-color: #D1D5DB;       // ホバーカラー
$text-color: #374151;        // テキストカラー

ローカル開発

1. プロジェクトをクローン

git clone https://github.com/guaigaihu/common-ng-ui-liandi.git

2. 依存関係のインストール

npm install

3. ライブラリのビルド

npm run build:lib

ブラウザサポート

• Chrome (最新版)
• Firefox (最新版)
• Safari (最新版)
• Edge (最新版)

コントリビューションガイド

1. リポジトリをフォーク
2. フィーチャーブランチを作成 (git checkout -b feature/AmazingFeature)
3. 変更をコミット (git commit -m 'Add some AmazingFeature')
4. ブランチにプッシュ (git push origin feature/AmazingFeature)
5. プルリクエストを作成

ライセンス

MIT License