MatBlazor 링크

https://www.matblazor.com

1. MatBlazor 설치

먼저, MatBlazor 패키지를 NuGet에서 설치해야 합니다. 이를 위해 Visual Studio나 CLI를 사용합니다.

Visual Studio에서 설치:

찾기 창에서 MatBlazor를 검색하고 MatBlazor 패키지를 설치합니다.

2. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 클릭 후 NuGet 패키지 관리를 선택합니다.

CLI에서 설치 :

dotnet add package MatBlazor

2. `_Imports.razor` 파일에 MatBlazor 추가

프로젝트의 _Imports.razor 파일에 MatBlazor를 추가하여 컴포넌트들을 전역에서 사용할 수 있게 만듭니다.

@using MatBlazor

3. `wwwroot/index.html` 또는 `wwwroot/_Host.cshtml`에 CSS와 JS 추가

MatBlazor에서 Material Design 스타일을 적용하려면, CSS와 JavaScript를 프로젝트에 추가해야 합니다.

Blazor WebAssembly:

wwwroot/index.html 파일에 다음 코드를 추가합니다.

<head>
    <!-- 기타 태그들 -->
    <link href="_content/MatBlazor/dist/matBlazor.min.css" rel="stylesheet" />
</head>

Blazor Server:

_Host.cshtml 파일에 추가합니다.

<head>
    <!-- 기타 태그들 -->
    <link href="_content/MatBlazor/dist/matBlazor.min.css" rel="stylesheet" />
</head>

4. 간단한 MatBlazor 컴포넌트 사용 예제

이제 MatBlazor의 컴포넌트를 사용할 수 있습니다. 예제를 통해 MatBlazor 컴포넌트를 사용하는 방법을 확인해 보겠습니다.

버튼 컴포넌트

<MatButton Raised="true" Label="Click Me" OnClick="OnButtonClick"></MatButton>

@code {
    private void OnButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

텍스트 필드 컴포넌트

<MatTextField Label="Enter your name" @bind-Value="name"></MatTextField>

@code {
    private string name;
}

체크박스 컴포넌트

<MatCheckbox @bind-Value="isChecked">I agree to the terms</MatCheckbox>

@code {
    private bool isChecked;
}

카드 컴포넌트

<MatCard>
    <MatCardHeader>
        <MatCardTitle>Title of the Card</MatCardTitle>
        <MatCardSubtitle>Subtitle</MatCardSubtitle>
    </MatCardHeader>
    <MatCardContent>
        This is some example content for the card.
    </MatCardContent>
    <MatCardActions>
        <MatButton Label="Action 1"></MatButton>
        <MatButton Label="Action 2"></MatButton>
    </MatCardActions>
</MatCard>

5. 전체 예제

MatBlazor에서 제공하는 기본 스타일을 커스터마이징하고자 한다면, CSS 변수 또는 커스텀 CSS를 사용할 수 있습니다. 예를 들어, 버튼 색상을 변경하려면 다음과 같이 CSS를 추가할 수 있습니다.

.mat-raised-button {
    background-color: #4CAF50; /* 예: 녹색 */
    color: white;
}

6. 전체 예제

MatBlazor의 여러 컴포넌트를 조합하여 간단한 폼을 만들 수 있습니다.

<MatCard>
    <MatCardHeader>
        <MatCardTitle>Registration Form</MatCardTitle>
    </MatCardHeader>
    <MatCardContent>
        <MatTextField Label="Username" @bind-Value="username"></MatTextField>
        <MatTextField Label="Email" @bind-Value="email" Type="email"></MatTextField>
        <MatCheckbox @bind-Value="acceptTerms">I accept the terms and conditions</MatCheckbox>
    </MatCardContent>
    <MatCardActions>
        <MatButton Label="Register" OnClick="RegisterUser" Disabled="@(string.IsNullOrEmpty(username) || string.IsNullOrEmpty(email) || !acceptTerms)"></MatButton>
    </MatCardActions>
</MatCard>

@code {
    private string username;
    private string email;
    private bool acceptTerms;

    private void RegisterUser()
    {
        Console.WriteLine("User registered!");
    }
}

소프트웨어

MatBlazor 사용 방법