머티리얼 디자인은 Google에서 개발한 인기 있는 가이드라인의 집합으로 소프트웨어 및 웹 앱에서 일관되고 명확한 스타일을 제공하는 데 도움이 됩니다.

이 디자인은 확신을 가지고 브랜드를 표현할 수 있도록 균일한 테마, 레이아웃, 애니메이션, 컴포넌트 및 타이포그래피 사양을 제공합니다. 10년이 지난 후에도 머티리얼 디자인은 여전히 매우 인기가 좋습니다.

이 블로그에서는 .NET 8 및 ComponentOne ASP.NET MVC 컨트롤 템플릿을 사용하여 ASP.NET Core 응용 프로그램에 머티리얼 디자인 라이트 테마를 적용하는 방법을 설명합니다.

또한 사전 설정된 테마를 사용하여 새 응용 프로그램을 만드는 방법, 기존 응용 프로그램에 테마를 적용하는 방법, 사용자 정의 테마를 만드는 방법을 설명합니다.

머티리얼 디자인 라이트 테마의 정의

테마는 색, 글꼴, 이미지, 스킨 등 각 UI 컨트롤에 다르게 적용되는 설정의 컬렉션입니다.

ComponentOne ASP.NET MVC Edition은 웹 응용 프로그램에서 직접 설정할 수 있는 20개 이상의 기본 제공 테마를 지원합니다.

머티리얼 디자인 라이트를 사용하면 JS 프레임워크에 의존하지 않고 웹 앱에 머티리얼 디자인 모양과 느낌을 추가할 수 있습니다.

ComponentOne ASP.NET 컨트롤은 기본 제공되는 288개의 서로 다른 색 구성표를 지원하는 머티리얼 디자인 라이트를 사용하여 만든 머티리얼 디자인 라이트 테마를 지원합니다! 나중에 선택하는 데 관한 자세한 내용.

새로운 머티리얼 테마

응용 프로그램을 신속하게 만드는 방법

새로운 머티리얼 테마 ASP.NET MVC 또는 ASP.NET Core 응용 프로그램을 만드는 가장 빠른 방법은 원하는 ComponentOne ASP.NET MVC Edition을 다운로드하는 것입니다.

Visual Studio를 열면 새로운 프로젝트 템플릿 두 개가 표시됩니다.

원하는 버전 및 언어를 선택하고 프로젝트를 만듭니다.

최종 단계에서는 ComponentOne ASP.NET MVC 응용 프로그램 마법사 대화 상자가 표시됩니다. 이 대화 상자를 사용하면 아키텍처, 데이터 바인딩, 테마 등 응용 프로그램의 여러 항목을 사전 구성할 수 있습니다.

마법사에서 "머티리얼" 테마를 선택합니다.

이 예에서는 모델 바인딩 옵션도 선택할 수 있습니다. 이렇게 하면 모델 데이터 바인딩 예제를 포함하여 응용 프로그램을 위한 진정한 MVC 구조가 생성되므로 초보자도 사용하기 쉽습니다.

응용 프로그램을 빌드하고 실행하여 FlexGrid DataGrid에 적용되는 머티리얼 디자인 라이트 테마를 확인합니다.

다음으로 테마가 적용되는 방식을 확인해 보겠습니다. 이렇게 하면 기존 응용 프로그램에 테마를 추가하는 데 도움이 될 수 있습니다.

ASP.NET Core 응용 프로그램에 머티리얼 테마를 적용하는 방법 

프로젝트 마법사에서 테마를 설정하거나 리소스를 등록할 때 테마를 설정할 수 있습니다.

머티리얼 테마를 추가하고 기존 프로젝트에 적용하는 방법:

• ASP.NET Core 응용 프로그램용 C1.AspNetCore.Mvc 또는 .NET Framework용 C1.Web.Mvc에 프로젝트 참조를 추가합니다.

• 기본 html 페이지(대부분 프로젝트 템플릿의 경우 _Layout.cshtml 페이지)에 다음 코드를 추가합니다.

  @Html.C1().Styles().Theme("material.deep_orange-red")

   

이 머티리얼 테마에는 기본 색과 강조색이 포함되어 있습니다.

ComponentOne ASP.NET MVC 머티리얼 테마는 288개의 서로 다른 머티리얼 디자인 라이트 테마 색을 지원합니다.

문서의 전체 색 목록을 확인하십시오.

응용 프로그램을 실행하여 짙은 주황색을 확인합니다.

이 작업은 더 많은 컨트롤을 사용하여 스타일에 더 많은 영향을 미칩니다.

사용자 정의 머티리얼 테마를 만드는 방법

웹용 ComponentOne 컨트롤은 Wijmo 컨트롤 위에 작성됩니다.

Wijmo 팀에서는 ASP.NET MVC 컨트롤과 함께 사용할 수 있는 대화형 테마 빌더를 릴리스했습니다.

테마 빌더를 사용하면 색을 선택하여 응용 프로그램에 추가하기 전에 컨트롤을 사용하여 테마를 미리 볼 수 있습니다. (기본색과 강조색의) 조합을 사용하는 경우 다른 조합에 비해 특정한 CSS 파일을 포함해야 합니다.

그러므로, 필요한 리소스를 제공할 수 있는 대화형 테마 빌더를 제공하는 것이 필요하다고 생각되었습니다.

ASP.NET MVC 컨트롤을 사용하여 사용자 정의 테마를 미리 보려면 다음 단계를 따르십시오.

1. 응용 프로그램의 _Layout 페이지에 머티리얼 라이트 JavaScript 파일을 포함합니다.

   <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>

   
   

2. Wijmo 테마 빌더를 사용하여 사용자 정의 테마를 디자인합니다. 그런 다음 레이아웃 페이지에 포함할 코드를 다운로드하거나 복사합니다. 예를 들어 다음과 같습니다.

   <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.deep_purple-pink.min.css"> 
   <link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/themes/material/wijmo.theme.material.deep_purple-pink.min.css" />
   

    

응용 프로그램에 머티리얼 아이콘을 포함할 수도 있습니다.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

결론

이제 몇 단계만으로 웹 응용 프로그램에 머티리얼 테마를 추가할 수 있습니다.

이러한 머티리얼 테마는 모든 에버그린 브라우저에서 동일하게 작동하며, Android 및 모바일 Safari용 Chrome에서 완벽하게 지원됩니다. IE9와 같은 이전 브라우저의 경우, CSS로만 저하됩니다.

지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ