팔레트
Ignite UI for Angular 테마 엔진은 색상을 생성하고 검색하기 위한 몇 가지 강력한 기능과 믹스인을 제공합니다.
개요
Ignite UI for Angular 맥락에서 팔레트는 Sass Maps로 선언되며, 그 맵의 키는 팔레트 색상(primary,secondary,surface, 등)입니다. 각 색상은 지도 자체이며, 모든 색상 변형이 키로 나열되어 있습니다. 이 색상 변형에 할당된 값은 모든 구성 주제에서 실제로 사용되는 색상입니다. 모든 팔레트 맵은 팔레트 함수에 의해 프로그래밍적으로 생성됩니다. 이 함수는 ,,,,,,,primary, , 에secondary 대한 인자를surfacegray 받아들입니다.infosuccesswarnerror 색상은primary 보통 브랜드 색상입니다. 주로 컴포넌트igx-navbar와 같은 정적 요소를 스타일링하는 데 사용됩니다. 색상은secondary 버튼, 스위치, 슬라이더 등 실행 가능한 요소에 사용됩니다. 색상은surface 카드, 메뉴, 날짜/시간 선택기, 배너 시트 등 일부 구성 요소의 배경색에 사용됩니다. 필요한 논항은 색상primarysecondarysurface과 우리는 ,,,,, 의surface 색상을 미리 정해진 세트로 기본값으로 설정grayinfo 합니다.successwarnerror
첫 번째 색상 팔레트를 시작하려면 전역 테마의 기본 파일이 될 SCSS 파일을 만드세요. 내 전화를 걸_variables.scss 겠다.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
Warning
전달$primary 하는 값이나$secondarysurface 다른 색상은 타입 색상이어야 합니다. 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
)
);
Warning
맵 키를 인용구'primary' 호 -,,'secondary','gray' 등 명확히 문자열로 설정하는 것이 중요합니다. 모든 색상 변형에도 동일하게 적용됩니다 -500,,500-contrast 등.
Predefined Palettes
우리는 구성 요소에 대한 테마를 생성하기 위해 스키마와 함께 사용할 수 있는 사전 정의된 밝은 팔레트와 어두운 팔레트를 제공합니다.
- 라이트 팔레트
$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
모든 밝은 팔레트를 원하는 밝은 스키마와 혼합하고 일치시킬 수 있으며 그 반대도 가능합니다. 즉, 귀하의 필요와 비전에 가장 잘 맞을 것이라고 생각되는 어두운 스키마의 모든 어두운 팔레트를 혼합하여 사용할 수 있습니다.
Grayscale Colors
와 색상과primarysecondarysurface 마찬가지로, 회색 음영을 생성하는 데 사용할 또 다른 색상을 함수에palette 제공할 수 있습니다. 모든 라이트 테마에서 팔레트를gray 생성하는 데 사용되는 기본 색상은 ,#000 또는 더 잘 알려진 색상black 입니다. 색상 변형은gray 주로 구성 요소 간 텍스트 색상 설정에 사용됩니다. 값을 수정하는 것은 애플리케이션에서 배경색이나 표면색을 변경할 때 유용합니다. 예를 들어, 애플리케이션이 더 어두운 표면 배경을 사용한다면, 색상을gray로white 설정하는 것이 합리적이며, 모든 텍스트 색상이 음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
);
Colors Variants
기억하기 쉽고 사용하기 쉬운 함수를 제공합니다 -color. 최대 네 개의 인항 -palette,,color,variant andopacity;
// 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;
}
인자를 생$palette 략하면 해당 CSS 변수 변형을 참조하는 문자열이 나옵니다. 만약 제공$color$variant 하지 않으면, 각각 와primary에500 배정됩니다.
Contrast Text Colors
색상 변형을 가져오는 방법과 유사하게, 팔레트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;
}
Color Classes
우리는 일부 사람들이 CSS 클래스를 사용하여 텍스트나 배경 등 웹 요소에 색상을 적용하는 것을 선호한다는 것을 알고 있습니다. 팔레트의 각 색상에 대해 CSS 클래스를 생성할 수 있는 믹스인이 있습니다.
믹스인은 CSS 클래스 이름과 팔레트 색상을 전달할 CSS 속성을 제어할 수 있는 몇 가지 인수를 사용합니다.
$prop- 색상을 할당하는 CSS 속성.$prefix- 생성된 클래스 이름에 부착하는 접두사 문자열. 기본값은 'igx'입니다.$suffix- 생성된 클래스 이름에 붙이는 접미사 문자열.$palette- 사용할 팔레트.
예를 들어 요소에 배경색을 적용하는 CSS 클래스를 생성하려는 경우 다음을 수행할 수 있습니다.
@include color-classes(
$prop: 'background-color',
$prefix: 'bg'
);
위 코드는 팔레트 내 각 색상 변형에 대해 CSS 클래스를 생성합니다. 예를 들어, 팔레트의500 색상 변형은primary 다음과 같은 클래스.bg-primary-500가 부여됩니다;
<div class="bg-primary-500">...</div>
CSS Variables
문서의 CSS 변수 섹션에서 색상 팔레트에 대해 읽어보면, 모든 팔레트 색상이 CSS 변수로 포함되어 있다는 것을 알 수 있었습니다. 믹싱을 사용해theme 테마를 생성할 때마다 내부적으로 이 작업을 합니다. 이 단어는theme 몸체 내 또 다른 믹신을 호출합니다.palette 팔레트를 받아 그 안의 색상을 CSS 변수로 변환합니다.
사용자 정의 팔레트 색상을 CSS 변수로 포함시키려는 경우 이 믹스인을 사용합니다.
예는 다음과 같습니다.
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
@include palette($my-palette);
API Reference
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub