Framework7-색상 테마

기술

Framework7은 애플리케이션에 다양한 색상 테마를 제공합니다.

색상 테마는 아래 표에 지정된대로 응용 프로그램과 원활하게 작동하는 데 사용되는 다양한 유형의 테마 색상을 제공합니다.

S. 아니	테마 유형 및 설명
1	iOS 테마 색상 애플리케이션에 10 가지 기본 iOS 색상 테마를 사용할 수 있습니다.
2	머티리얼 테마 색상 Framework7은 애플리케이션에 대해 22 가지 기본 재질 색상 테마를 제공합니다.

색상 테마 적용

Framework7을 사용하면 부모 요소에 theme- [color] 클래스를 사용하여 페이지, 목록 블록, navbar, button-row 등과 같은 다양한 요소에 색상 테마를 적용 할 수 있습니다 .

예

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

레이아웃 테마

흰색 과 어두운 두 가지 테마를 사용하여 애플리케이션에 기본 레이아웃 테마를 사용할 수 있습니다 . 테마는 layout- [theme] 클래스를 사용하여 부모 요소에 적용 할 수 있습니다 .

예

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

도우미 클래스

Framework7은 아래 나열된 테마 외부에서 또는 테마없이 사용할 수있는 추가 도우미 클래스를 제공합니다.

• color-[color] − 블록의 텍스트 색상이나 버튼, 링크, 아이콘 등의 색상을 변경할 때 사용할 수 있습니다.

• bg-[color] − 블록이나 요소에 미리 정의 된 배경색을 설정합니다.

• border-[color] − 블록 또는 요소에 미리 정의 된 테두리 색상을 설정합니다.