이전 게시물에서 에 대해 썼습니다.

해당 기사에서 언급했듯이 tailwindcss로 작업할 때 "너무 많은 중복 코드"라고 생각할 수 있는 특정 시나리오를 찾을 수 있습니다. 그러나 Angular와 같은 최신 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열 카드 그리드

이 구성 요소에는 Smart/Dumb 패턴을 사용하겠습니다. 이 패턴을 모르신다면 이 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

이 구현을 위한 내 스마트 구성 요소는 Grid 구성 요소라고 하며 다음 용도로 사용됩니다.

기사 목록 검색

덤 구성 요소를 사용하여 각 기사 표시

마지막으로 내 dumb 구성 요소는 Grid 항목 구성 요소라고 하며 스마트 구성 요소에서 받은 데이터를 사용하여 각 기사를 렌더링하는 데 사용됩니다.

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>

그리드 항목 구성 요소(Dumb):

// 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>

버튼

또 다른 간단하고 실용적인 예입니다. 버튼의 콘텐츠, 색상 및 스타일을 설정하는 데 하나의 구성 요소만 사용합니다.

// 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 저장소가 있습니다.

마우로 코드 / 재사용 가능한 Angular-tailwindcss-구성 요소

Angular 및 tailwindcss로 구축된 재사용 가능한 구성 요소 모음

재사용 가능한 구성 요소

이 프로젝트는 Angular CLI 버전 8.0.3으로 생성되었습니다.

개발 서버

dev 서버에 대해 실행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를 실행하여 Protractor을 통해 종단 간 테스트를 실행합니다.

추가 도움말

Angular CLI에 대한 추가 도움말을 보려면 ng help를 사용하거나 Angular CLI README을 확인하십시오.


View on GitHub