팔레트
Ignite UI for Angular 테마 엔진은 색상을 생성하고 검색하기 위한 몇 가지 강력한 기능과 믹스인을 제공합니다.
개요
Ignite UI for Angular의 컨텍스트에서 팔레트는 Sass Maps로 선언되며, 해당 맵의 키는 팔레트 색상(primary
, secondary
, surface
, 등)입니다. 각 색상은 차례로 맵 자체이며 모든 색상 변형이 키로 나열됩니다. 이러한 색상 변형에 할당된 값은 모든 구성 요소 테마에서 사용되는 실제 색상입니다. 모든 팔레트 맵은 palette 함수에 의해 프로그래밍 방식으로 생성됩니다. 이 함수는 ,,,,,, success
및 error
warn
colors 인수 primary
를 허용합니다. info
gray
surface
secondary
색상은 primary
일반적으로 브랜드 색상입니다. 주로 구성 요소와 같은 igx-navbar
정적 요소의 스타일을 지정하는 데 사용됩니다. secondary
색상은 버튼, 스위치, 슬라이더 등과 같이 실행 가능한 요소에 사용되는 색상입니다. 색상 surface
은 카드, 메뉴, 날짜/시간 선택기, 배너, 시트 등과 같은 일부 구성 요소의 배경색에 사용되는 색상입니다. 유일하게 필요한 인수는 for primary
와 secondary
surface
colors입니다. , gray
, info
, success
,에 warn
error
대한 surface
색상을 기본적으로 선택하고 미리 정의된 집합으로 설정합니다.
첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 scss 파일을 만듭니다. 나는 내_variables.scss
것을 부를 것이다.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
scss
전달하는 $primary
$secondary
값 및/ surface
또는 다른 색상은 color 형식이어야 합니다. CSS 변수는 Sass 빌드 시간에 해결할 수 없으므로 인수로 전달할 수 없습니다.
각 변형에 대해 자동으로 생성된 텍스트 대비 색상을 포함하여 모든 색상에 대한 변형이 포함된 팔레트를 만들었습니다. CSS 변수가 있는 팔레트에 관한 문서를 확인하지 않았다면 지금 확인해보세요. 여기에는 팔레트의 모든 색상 변형에 대한 정보가 포함되어 있습니다.
palette
기능은 빌드 시.scss
문서 전체에서 재사용할 수 있는 색상을 생성하는 데 도움이 되도록 내부적으로 많은 작업을 수행합니다. 이 기능은 사용자를 위해 거대한 색상 맵을 생성한다는 점에서 훌륭하지만 색상 변형을 생성하는 알고리즘은 매우 독단적이며 사용자의 정확한 요구 사항과 일치하지 않을 수 있습니다. 우리의 구성 요소 테마는 팔레트가 생성되는 방식에는 관심이 없으며 지도의 모양에만 관심이 있습니다.
팔레트를 수동으로 생성하거나 팔레트 생성 기능을 직접 생성하려는 경우 팔레트 맵으로 얻을 수 있는 것이 있습니다.
$handmade-palette: (
'primary': (
'50': #e6eff8,
'50-contrast': black,
'100': #bfd7f2,
'100-contrast': black,
'200': #98bfec,
'200-contrast': black,
'300': #85b5e9,
'300-contrast': white,
'400': #73a6e4,
'400-contrast': white,
'500': #6797de,
'500-contrast': white,
'600': #3681dd,
'600-contrast': white,
'700': #357fda,
'700-contrast': white,
'800': #306dc8,
'800-contrast': white,
'900': #284ea8,
'900-contrast': white,
'A100': #98bfec,
'A100-contrast': white,
'A200': #73a6e4,
'A200-contrast': white,
'A400': #3681dd,
'A400-contrast': white,
'A700': #284ea8,
'A700-contrast': white
),
'secondary': (
'50': #fef7e2,
'50-contrast': black,
'100': #fdeab7,
'100-contrast': black,
'200': #fbdd89,
'200-contrast': black,
'300': #fad15c,
'300-contrast': black,
'400': #f9c63f,
'400-contrast': black,
'500': #f7bd32,
'500-contrast': white,
'600': #f6b02d,
'600-contrast': white,
'700': #f49e2a,
'700-contrast': white,
'800': #f38e28,
'800-contrast': white,
'900': #f38e28,
'900-contrast': white,
'A100': #fbdd89,
'A100-contrast': black,
'A200': #f9c63f,
'A200-contrast': black,
'A400': #f6b02d,
'A400-contrast': white,
'A700': #f38e28,
'A700-contrast': white
),
'gray': (
'50': #fff,
'50-contrast': black,
'100': #fafafa,
'100-contrast': black,
'200': #f5f5f5,
'200-contrast': black,
'300': #f0f0f0,
'300-contrast': black,
'400': #dedede,
'400-contrast': black,
'500': #b3b2b2,
'500-contrast': black,
'600': #979696,
'600-contrast': white,
'700': #7b7a7a,
'700-contrast': white,
'800': #404040,
'800-contrast': white,
'900': #1a1a1a,
'900-contrast': white
),
'info': (
'500': rgb(18, 118, 211),
'500-contrast': black
),
'success': (
'500': rgb(76, 184, 96),
'500-contrast': black
),
'warn': (
'500': rgb(251, 178, 60),
'500-contrast': black
),
'error': (
'500': rgb(255, 20, 75),
'500-contrast': black
),
'surface': (
'500': rgb(255, 255, 255),
'500-contrast': black
)
);
scss
map 키를 따옴표 - 'primary'
, 'secondary'
,, 'gray'
등 명시적으로 문자열로 설정하는 것이 중요합니다. 모든 색상 변형에 동일하게 적용됩니다 -500
, 500-contrast
, 등.
미리 정의된 팔레트
우리는 구성 요소에 대한 테마를 생성하기 위해 스키마와 함께 사용할 수 있는 사전 정의된 밝은 팔레트와 어두운 팔레트를 제공합니다.
- 라이트 팔레트
$light-material-palette
$light-fluent-excel-palette
$light-fluent-word-palette
$light-fluent-palette
$light-bootstrap-palette
$light-indigo-palette
- 다크 팔레트
$dark-material-palette
$dark-fluent-excel-palette
$dark-fluent-word-palette
$dark-fluent-palette
$dark-bootstrap-palette
$dark-indigo-palette
모든 밝은 팔레트를 원하는 밝은 스키마와 혼합하고 일치시킬 수 있으며 그 반대도 가능합니다. 즉, 귀하의 필요와 비전에 가장 잘 맞을 것이라고 생각되는 어두운 스키마의 모든 어두운 팔레트를 혼합하여 사용할 수 있습니다.
그레이스케일 색상
및 surface
colors와 primary
유사하게, secondary
회색 음영을 생성하는 데 사용할 함수에 palette
다른 색상을 제공할 수 있습니다. 모든 밝은 테마에서 팔레트를 gray
생성하는 데 사용되는 기본 색상은 #000
다음과 같거나 더 잘 알려져 있습니다 black
. 색상 변형은 gray
주로 구성 요소 간에 텍스트 색상을 설정하는 데 사용됩니다. 값을 수정하면 응용 프로그램에서 배경 또는 표면 색을 변경할 때 유용합니다. 예를 들어, 응용 프로그램에서 더 어두운 표면 배경을 사용하는 경우 색상을 로 white
설정하는 gray
것이 합리적이며 모든 텍스트 색상이 음영 white
을 기반으로 하도록 합니다.
회색 음영에 white
사용하는 팔레트를 생성하려면:
// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$surface-color: #e5e5e5 /* Light gray for backgrounds/ */
$grayscale-base: #fff; /* Used to generate shades of gray */
$my-color-palette: palette(
$primary: $company-color,
$secondary: $secondary-color,
$surface: $surface-color,
$gray: $grayscale-base
);
scss
색상 변형
기억하기 쉽고 사용하기 쉬운 기능을 제공합니다 -color
. 최대 4개의 인수를 사용할 수 있습니다 -palette
, color
,and variant
opacity
;
// Get the primary color as CSS variable reference to the 500 color variant
$my-primary-500: color();
// Get the primary color as CSS variable reference to the 600 color variant
$my-primary-600: color($variant: 600);
// Get the primary color as CSS variable reference to the 600 color variant with .5 opacity
$my-primary-600-opacity: color($variant: 600, $opacity: .5);
// Get the secondary A700 color variant as a HEX value from $my-palette
$my-primary-A700: color($my-palette, 'secondary', 'A700');
// Get the warn 500 color variant as HEX value from $my-palette
$my-warning-color: color($my-palette, 'warn');
.my-awesome-class {
background: $my-primary-600;
border-color: $my-primary-A700;
}
.warning-bg {
background: $my-warning-color;
}
scss
$palette
인수를 생략하면 해당 CSS 변수 변형을 참조하는 문자열을 얻게 됩니다. $color
및/또는 $variant
제공하지 않으면 각각 primary
및 500
에 할당됩니다.
대비 텍스트 색상
색상 변형을 검색하는 방법과 유사하게, 함수를 contrast-color
사용하여 팔레트의 각 색상 변형에 대한 대비 텍스트 색상을 가져오는 방법이 있으며, 함수와 color
동일한 유형과 인수 수를 허용합니다.
$my-primary-800: color($my-palette, 'primary', 600);
$my-primary-800-text: contrast-color($my-palette, 'primary', 600);
// sample usage
.my-awesome-article {
color: $my-primary-800-text;
background: $my-primary-800;
}
scss
색상 클래스
우리는 일부 사람들이 CSS 클래스를 사용하여 텍스트나 배경 등 웹 요소에 색상을 적용하는 것을 선호한다는 것을 알고 있습니다. 팔레트의 각 색상에 대해 CSS 클래스를 생성할 수 있는 믹스인이 있습니다.
믹스인은 CSS 클래스 이름과 팔레트 색상을 전달할 CSS 속성을 제어할 수 있는 몇 가지 인수를 사용합니다.
$prop
- 색상을 할당할 CSS 속성입니다.$prefix
- 생성된 클래스 이름에 첨부할 접두사 문자열입니다. 기본값은 'igx'입니다.$suffix
- 생성된 클래스 이름에 첨부할 접미사 문자열입니다.$palette
- 사용할 팔레트입니다.
예를 들어 요소에 배경색을 적용하는 CSS 클래스를 생성하려는 경우 다음을 수행할 수 있습니다.
@include color-classes(
$prop: 'background-color',
$prefix: 'bg'
);
scss
위의 코드는 팔레트의 각 색상 변형에 대한 CSS 클래스를 생성합니다. 예를 들어, primary
팔레트의 500
색상 변형에는 다음 클래스.bg-primary-500
지정됩니다.
<div class="bg-primary-500">...</div>
html
CSS 변수
문서의 CSS 변수 섹션에서 색상 팔레트에 대해 읽을 때 모든 팔레트 색상이 CSS 변수로 포함되어 있음을 알 수 있습니다. theme
믹스인을 사용하여 테마를 생성할 때마다 내부적으로 이 작업을 수행합니다. theme
본문 palette
에서 또 다른 믹스인을 호출합니다. 팔레트를 가져와 그 안의 색상을 CSS 변수로 변환합니다.
사용자 정의 팔레트 색상을 CSS 변수로 포함시키려는 경우 이 믹스인을 사용합니다.
예는 다음과 같습니다.
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
@include palette($my-palette);
scss
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.