前のポストでは、私はについて書きました.
私がその記事に言及したように、TailWindCSSで作業しているとき、あなたは「あまりに多くの重複したコード」を考えることができる特定のシナリオを見つけます.しかし、あなたが角度のようなどんな現代のJSフレームワークででも働いているならば、あなたは再利用可能なコンポーネントを抽出することによって劇的にこの複製を減らします.
それで、私はそれがあなたの過去の記事から同じTailWindCSSスニペットを使ってこれをする方法を示すのに役に立つかもしれないと思いました.

1 -カラフルなノート

このコンポーネントは、超シンプルであり、両方の色とコンテンツをカスタマイズできるようになります

// colorful-note.component.ts
@Component({
    selector: 'colorful-note',
    templateUrl: './colorful-note.component.html',
    styleUrls: ['./colorful-note.component.css']
})
export class ColorfulNoteComponent implements OnInit {

    @Input() color: string = "teal"
    @Input() title: string
    @Input() description: string

    constructor() { }

    ngOnInit() {
    }

}

<!-- colorful-note.component.html -->
<div class="bg-{{color}}-100 text-{{color}}-500 border-l-8 border-{{color}}-500 p-4 mb-2">
    <p class="font-bold">{{title}}</p>
    <p>{{description}}</p>
</div>

用途

<colorful-note color="red" title="Note" description="Lorem ipsum dolor sit amet..."></colorful-note>
<colorful-note color="blue" title="Note" description="Lorem ipsum dolor sit amet..."></colorful-note>
<colorful-note color="green" title="Note" description="Lorem ipsum dolor sit amet..."></colorful-note>
<colorful-note color="yellow" title="Note" description="Lorem ipsum dolor sit amet..."></colorful-note>

2 - 3列カードグリッド

このコンポーネントのために、私はスマート/ダムパターンを使用するつもりです.あなたがこのパターンを知らないならば、チェックアウトしてくださいarticle .

TL;DR

• Dumb component: It is a component that for received data (inputs), will always look and behave the same, possibly also producing other data
• Smart components: It is not only dependant on its’ inputs, but also on some kind of external data (“the outer world”), which is not passed directly via @Input(). It might also produce some side effects that are not emitted through the @Output() interface

この実装用のスマートコンポーネントは、グリッドコンポーネントと呼ばれます.

記事一覧の取得

ダムコンポーネントを使用した各記事の表示

最後に、私のダムコンポーネントは、グリッド項目コンポーネントと呼ばれ、スマートコンポーネントから受け取ったデータを使用して各記事をレンダリングするために使用されます.

What's really powerful about this dumb component is that it's super generic, so you'll be able to use it in other scenarios.

グリッドコンポーネント(スマート):

// Class used to transfer data between components
export class Article {
    title: string;
    description: string;
    imgUrl: string;
    link: string;
}

// grid.component.ts
@Component({
    selector: 'grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {

    articles: Article[] = []

    constructor() { }

    ngOnInit() {
        this.getArticles()
    }

    getArticles() {
        // Get data and set articles...
    }
}

<!-- grid.component.html -->
<div class="flex flex-wrap mt-2 mx-2">
    <!-- Items -->
    <app-grid-item *ngFor="let article of articles" 
        [title]="article.title"
        [description]="article.description"
        [imgUrl]="article.imgUrl"
        [link]="article.link"
        class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
    </app-grid-item>
</div>

グリッドアイテムのコンポーネント

// grid-item.component.ts
@Component({
    selector: 'grid-item',
    templateUrl: './grid-item.component.html',
    styleUrls: ['./grid-item.component.css']
})
export class GridItemComponent implements OnInit {

    @Input() title: string
    @Input() description: string
    @Input() imgUrl: string
    @Input() link: string

    constructor() { }

    ngOnInit() {
    }

}

<!-- grid-item.component.html -->
<div class="shadow-md bg-white">
    <img class="h-48 w-full object-cover" [src]="imgUrl" alt="">
    <div class="flex flex-col p-4">
        <p class="text-lg">{{title}}</p>
        <p class="text-gray-600">{{description}}</p>
        <a [href]="link" class="self-end mt-4">Show more...</a>
    </div>
</div>

ボタン

別の簡単で実用的な例.我々は、我々のボタンのために内容、色とスタイルをセットするために、1つの構成要素だけを使います

// button.component.ts
@Component({
    selector: 'app-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {

    @Input() type: string = 'simple'
    @Input() color: string = 'teal'
    @Input() text: string
    constructor() { }

    ngOnInit() {
    }

    getStyles() {
        switch(this.type) {
            case 'simple': 
                return `bg-${this.color}-500 hover:bg-${this.color}-700 text-white font-bold py-2 px-4 rounded mb-2 border border-${this.color} mx-2`
            case 'outline':
                return `hover:bg-${this.color}-500 text-${this.color}-700 font-semibold hover:text-white py-2 px-4 border border-${this.color}-500 hover:border-transparent rounded mb-2 mx-2`
        }
    }

}

<!-- button.component.html -->
<button [class]="getStyles()">{{text}}</button>

用途

<app-button text="Simple teal button"></app-button>
<app-button text="Outline teal button" type="outline"></app-button>
<app-button text="Simple red button" color="red"></app-button>
<app-button text="Outline red button" type="outline" color="red"></app-button>
<app-button text="Simple indigo button" color="indigo"></app-button>
<app-button text="Outline indigo button" type="outline" color="indigo"></app-button>

コードをチェックアウトする場合は、ここで私のgithub

マローコード / 再利用可能な角TailWindCSSコンポーネント

アングルとテールウィンドで構築された再利用可能なコンポーネントのコレクション

再利用可能なコンポーネント

このプロジェクトはAngular CLI バージョン8.0.3

開発サーバ

ランng serve を返します.移動するhttp://localhost:4200/ . 場合は、ソースファイルのいずれかを変更すると、アプリケーションが自動的にリロードされます.

コード足場

ランng generate component component-name 新しいコンポーネントを生成する.また、使用することができますng generate directive|pipe|service|class|guard|interface|enum|module .

ビルド

ランng build プロジェクトを構築するにはビルドのアーティファクトはdist/ ディレクトリ.使用する--prod プロダクションビルドのフラグ.

ランニングユニット試験

ランng test ユニットテストを実行するKarma .

エンドツーエンドテストの実行

ランng e2e を介してend - to - endテストを実行するにはProtractor .

更なる援助

角度CLI使用のヘルプを得るにはng help またはチェックアウトAngular CLI README .
View on GitHub