타이포그래피

Ignite UI for Angular Typography Sass 모듈을 사용하면 애플리케이션의 모든 구성 요소, 특정 타이포그래피 스케일 또는 특정 구성 요소에 대한 타이포그래피를 수정할 수 있습니다.

개요

애플리케이션은 서로 스케일 범주를 공유할 수 있는 여러 타이포그래피 scales 정의할 수 있습니다. scale category는 font-family, font-size, font-weight, line-height, letter-spacing 및 text-transform에 대한 정보를 포함하는 type styles 세트입니다.

Ignite UI for Angular는 각 테마에 대해 4개의 기본 유형 스케일을 노출합니다 -$material-type-scale, $fluent-type-scale, $bootstrap-type-scale, 그리고 $indigo-type-scale 이는 차례로 mixin에서 typography 타이포그래피 스타일을 설정하는 데 사용됩니다. 그러나 추가 유형 스케일을 만들 수 있습니다.

대부분의 경우 타이포그래피를 약간만 수정하면 되므로 아직 읽지 않았다면 CSS 변수 문서의 타이포그래피 섹션을 먼저 읽어 보는 것이 좋습니다. Sass를 사용하여 타이포그래피를 수정하는 것은 전체 타이포그래피 규모와 관련된 더 깊은 변경을 원하는 경우에만 필요합니다.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Usage

기본적으로 우리는 어떤 타이포그래피 스타일도 적용하지 않습니다. 애플리케이션에서 타이포그래피를 사용하려면 최상위 요소에 ig-typography CSS 클래스를 설정하고 기본.scss 파일에 typography 믹스인을 포함해야 합니다.

​Titillium Web을 Ignite UI for Angular의 Material 테마에서 기본 글꼴로 선택했습니다. 사용하려면 직접 호스팅하거나 Google Fonts에서 포함해야 합니다.

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>
html

유형 스케일에서 카테고리 스타일을 설정하고 검색하는 데 사용되는 여러 믹스인과 함수가 있습니다. 사람들은:

• type-style [함수] - 유형 스케일 범주에서 사용할 스타일 규칙 세트를 반환합니다.
• type-scale [함수] - 13개의 스타일 카테고리 세트를 반환합니다.
• type-scale-category [함수] - 유형 척도 및 카테고리에서 스타일 규칙 맵을 반환합니다.
• type-style [mixin] - 특정 유형 척도 및 카테고리의 선택기에 스타일 규칙을 추가합니다.
• type-style-vars [mixin] - 특정 유형 스타일의 선택기에 스타일 규칙을 추가합니다.
• typography [mixin] - 글로벌 애플리케이션 타이포그래피 스타일을 정의합니다.

앞서 언급한 믹스인과 기능이 각각 무엇을 하는지 자세히 살펴보겠습니다.

The Type Style

​type-style 함수는 특정 인수가 척도 범주에 설정된 스타일의 일부로 전달되도록 하는 인터페이스와 유사한 함수입니다. 예를 들어, h1 스케일 카테고리에 대한 새로운 스타일 규칙 세트를 정의하고 싶다고 가정해 보겠습니다. 그렇게 하려면 간단히 다음과 같이 작성할 수 있습니다.

$h1-style: type-style(
  $font-size: rem(112px),
  $font-weight: 600,
  $line-height: rem(96px),
  ...,
);
scss

The Type Scale

활자 척도는 척도 범주로 사용되는 13가지 타이포그래피 스타일의 지도를 생성합니다. 새로운 유형 스케일을 생성하려면 다음을 수행하십시오.

$my-type-scale: type-scale(...);
scss

13개의 척도 범주 각각에 대해 서체 스타일을 제공해야 합니다. 위와 같이 type-style 함수를 사용하여 스타일을 생성할 수 있습니다.

$my-type-scale: type-scale(
  $h1: $h1-style,
  [$h2...$overline],
);
scss

기존 유형 스케일을 확장하여 수정할 수 있습니다. $material-type-scale의 h1 유형 스타일을 변경하려면 다음을 수행할 수 있습니다.

$my-type-scale: extend(
  $material-type-scale,
  (
    h1: type-style(...),
  )
);
scss

눈금에 추가 유형 스타일을 추가하는 것도 마찬가지로 쉽습니다.

$my-type-category: type-style(
  $font-weight: 600,
  $font-size: rem(42px),
  $text-transform: uppercase,
  ...,
);

$my-type-scale: extend(
  $my-type-scale,
  (
    "my-category": $my-type-category,
  )
);
scss

The Typography Mixin

타이포그래피 믹스인은 기본 h1-h6 및 p 요소의 스타일 지정 방법을 포함하여 애플리케이션의 전역 타이포그래피 스타일을 정의합니다.

현재 2개의 인수를 허용합니다:

• $font-family- 애플리케이션에서 사용할 전역 글꼴 모음입니다.
• $type-scale- 애플리케이션에서 사용할 기본 유형 스케일입니다.

타이포그래피 스타일을 사용하려면 뒤에 core mixin을 typography 포함합니다. 위에서 정의한 type scale $my-type-scale을 활용하여 기본 type scale로 만들어 보겠습니다.

@include typography(
  $font-family: $material-typeface,
  $type-scale: $my-type-scale
);
scss

​$material-typeface, $fluent-typeface, $bootstrap-typeface 및 $indigo-typeface와 유사한 서체에 대한 4가지 변수를 노출합니다. typography 믹스인을 포함할 때 어떤 유형의 스케일과도 조합하여 사용할 수 있습니다.

Custom Type Styles

​type-style 믹스인은 특정 유형 스케일에서 스케일 카테고리에 대한 스타일 규칙을 검색하는 데 사용할 수 있습니다. 또한 추가 스타일 규칙을 추가할 수도 있습니다.

.my-fancy-h1 {
  @include type-style('h1') {
    color: royalblue;
  }
}
scss

위의 코드는 royalblue 색상으로 설정된 color 속성을 추가하여 $my-type-scale의 h1 스케일 범주에 대한 모든 스타일 규칙을 포함하는 클래스 스타일 선택기.my-fancy-h1 생성합니다. 이제 요소의 클래스를.my-fancy-h1로 설정하면 다른 h1 요소처럼 보이지만 색상은 royalblue 입니다.

Component Typography

Ignite UI for Angular에 있는 대부분의 구성요소는 문자의 스타일을 지정하기 위해 축척 범주를 사용합니다. 예를 들어, igx-card 구성 요소는 다음과 같은 축척 범주를 사용합니다.

• h6- 카드 제목 스타일을 지정하는 데 사용됩니다.
• subtitle-2- 카드 자막 및 작은 제목의 스타일을 지정하는 데 사용됩니다.
• body-2- 카드 텍스트 콘텐츠의 스타일을 지정하는 데 사용됩니다.

카드의 텍스트 스타일을 변경하는 방법에는 두 가지가 있습니다. 첫 번째는 수정하는 것입니다. h6, subtitle-2 및/또는 body-2의 스케일 재료 유형 스케일 타이포그래피 믹스인에 전달합니다. 따라서 카드의 제목을 더 작게 만들고 싶다면 글꼴 크기를 변경하기만 하면 됩니다. h6 스케일 범주.

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// Create a custom type scale with the modified h6
$my-type-scale: extend(
  $material-type-scale,
  (
    h6: $my-h6,
  )
);

// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);
scss

위 코드는 h6 스케일 카테고리를 전체적으로 수정하여 h6 스케일을 사용하는 모든 구성 요소의 모양과 느낌에 영향을 미칩니다. 이는 모든 h6 요소가 앱 전체에서 동일하게 보이도록 일관성을 위해 수행됩니다. 우리는 귀하가 우리의 경우 igx-card 구성 요소와 같은 특정 구성 요소에만 h6에 대한 수정 사항을 적용하기를 원할 수 있다는 것을 이해합니다. 이것이 바로 모든 구성 요소에 카테고리 구성을 허용하는 자체 타이포그래피 믹스인이 있는 이유입니다.

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// You can specify which categories from the type sale the card uses
$card-categories: (
  title: 'h6',
  title-small: 'subtitle-1',
  subtitle: 'subtitle-2',
  content: 'body-2',
);

.my-cool-card {
  // Overwrite the 'h6' type style for this scope
  @include type-style-vars('h6', $my-h6);

  // Pass the custom card catergories to the card typography mixin
  @include card-typography($card-categories);
}
scss

​h6 카테고리를 수정하여 $my-type-scale 스케일을 전달하여 더 이상 typography 믹스인을 포함하지 않습니다. 이제 우리가 할 일은 우리가 만든 사용자 정의 h6 스타일을 type-style-vars 믹스인에 전달하는 것뿐입니다.

카드 타이포그래피 믹스인을 사용하여 카드 구성 요소의 모든 요소에 대한 타이포그래피 스타일을 업데이트할 수 있습니다. 위의 예에서 $card-categories 맵의 title-small 키에는 subtitle-1 유형 스타일이 할당됩니다. 이 변경으로 카드의 작은 제목이 약간 커집니다. 기본적으로 카드 구성 요소는 subtitle-1보다 글꼴 크기가 작은 작은 제목에 대해 subtitle-2 유형 스타일을 사용합니다. mixin을 사용하면 이 기본값을 무시하고 새 스타일을 적용할 수 있습니다.

Converting Units

또한 속성 단위를 변환하기 위한 세 가지 타이포그래피 기능이 있습니다. 함수를 사용하여 단위를 or rem로, em 또는 rem 단위를 or로 변환할 px 수 있습니다 px. em 우리가 해야 할 일은 세 가지 함수 중 하나를 호출하고 변환하려는 값을 전달하는 것입니다.

To 'px'

.my-component {
  margin: px(3.23rem);
}
scss

To 'rem'

.my-component {
  margin: rem(10px) rem(5px);
}
scss

To 'em'

.my-component {
  margin: em(10px) em(5px);
}
scss

값을 변환할 때 변환은 기본 글꼴 크기인 16px(여기서 16px = 1em/rem)를 기반으로 한다는 점을 기억하는 것이 중요합니다. 원하는 경우 변환 함수에 대한 인수로 사용자 정의 기본 글꼴 크기를 제공할 수 있습니다. 이렇게 하면 결과 값이 지정된 기본 글꼴 크기를 기준으로 계산됩니다.

.my-component {
  margin: rem(10px, 26px);
  // The result will be 0.385rem
}
scss

이렇게 하면 26px의 글꼴 크기에 따라 10px 값이 rem으로 변환됩니다.

CSS Classes

유형 스케일 범주를 기반으로 모든 구성 요소에 대한 텍스트 스타일을 추가하는 것 외에도 기본 h1-h6 및 p 요소의 스타일도 지정합니다. 이를 통해 스타일과 의미를 분리할 수 있습니다. 예를 들어 h1 태그에 typography 사용할 때 제공하는 기본 스타일이 있더라도 ig-typography__h3 클래스를 제공하여 h3 처럼 보이도록 수정할 수 있습니다.

<h1 class="ig-typography__h3">Some text</h1>
html

기본적으로 제공되는 모든 CSS 클래스 목록은 다음과 같습니다.

• ig-typography__h1
• ig-typography__h2
• ig-typography__h3
• ig-typography__h4
• ig-typography__h5
• ig-typography__h6
• ig-typography__subtitle-1
• ig-typography__subtitle-2
• ig-typography__body-1
• ig-typography__body-2
• ig-typography__button
• ig-typography__caption
• ig-typography__overline

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular