홈페이지>프로그래밍 관련>타사 구성 요소
다운로드

❧ 반응 형 세트 팅 ☙

아름답게 조립 된 디자인을 만들기위한 구성 요소에 반응합니다.

데모!

켈 이 프로젝트는 매우 실험적입니다. 자신의 위험에 사용하십시오!

목차

  • 구성 요소
    • TILITENTEXT
      • 소품
    • 예방비
      • 소품
    • 신이 옳다고 하다
      • 소품
    • Fontobserver
      • 소품
    • fontobserver.provider
      • 소품
    • 조판. 제공자
      • 소품

구성 요소

TILITENTEXT 

 import { TightenText } from 'react-typesetting' ;

최소 수의 포장 선과 오버플로를 보장하는 데 필요한 최소 금액으로 word-spacing , letter-spacing 및 font-size (순서대로)를 강화합니다.

알고리즘은 모든 값의 최소값 ( minWordSpacing , minLetterSpacing 및 minFontSize Props에 의해 정의 됨)을 설정하여 이들 조정을 조정하면 랩핑 된 선이 적거나 오버플로가 줄어 듭니다. 그렇다면, 가장 적합한 것을 찾기 위해 이진 검색이 수행됩니다 (대부분의 maxIterations 와 함께).

기본적으로 텍스트를 다시 설정해야 할 수있는 요소 크기가 자동으로 감지됩니다. reflowKey Prop을 지정하면 구성 요소를 업데이트 할 때마다 소품을 변경하여 수동 제어를 수행 할 수 있습니다.

일반적인 정당한 텍스트와 달리, 적합 조정은 개별 랩핑 라인을 타겟팅 할 수있는 방법이 없기 때문에 조여야하는 줄뿐만 아니라 텍스트의 모든 줄에 적용되어야합니다. 따라서이 구성 요소는 타이틀이나 레이블과 같이 타입식으로 중요한 짧은 텍스트에 드물게 사용됩니다.

소품

이름 유형 기본 설명
클래스 이름 끈

클래스는이 구성 요소가 생성 한 외부 래퍼 span 에 적용합니다.

스타일 물체

이 구성 요소가 생성 한 외부 래퍼 span 에 추가 할 추가 스타일 특성.

어린이들 마디

렌더링 할 내용.

minwordspacing 숫자 -0.02

EMS의 최소 단어 간격. 단어 간격을 조정하지 않으면 이것을 0으로 설정하십시오.

Minletterspacing 숫자 -0.02

EMS의 최소 문자 간격. 단어 간격을 조정하지 않으면 이것을 0으로 설정하십시오.

Minfontsize 숫자 0.97

EM의 최소 font-size . 글꼴 크기를 조정하지 않으면 이것을 1로 설정하십시오.

최대화 숫자 5

이진 검색을 수행하여 각 CSS 속성의 최적 값을 찾을 때 값을 정하기 전에 실행할 최대 반복 수를 설정합니다.

리플 로키 하나의…
숫자
끈

지정된 경우 자동 리플 로우를 비활성화 하여이 값을 변경하여 수동으로 트리거 할 수 있습니다. 소품 자체는 아무것도하지 않지만 변경하면 반응이 구성 요소를 업데이트하게됩니다.

리플 로우 타임 아웃 숫자

Defounces는 반사되어 최대 종종 밀리 초로 발생합니다 (주어진 기간이 끝날 때). 지정되지 않은 경우, 성분이 렌더링 될 때마다 Reflow가 계산됩니다.

장애가 있는 부울

텍스트를 완전히 비활성화할지 여부. 이전 렌더에 이미 적용된 적합 조정은 보존됩니다.

onreflow 기능

레이아웃이 다시 계산되고 텍스트가 다시 완성 될 때 호출 할 함수.

사전 설정 끈

외부 Typesetting.Provider 에 정의 된 사전 설정의 이름. 존재하는 경우 다른 모든 소품의 기본값은 지정된 사전 설정에서 나옵니다.

예방비 

 import { PreventWidows } from 'react-typesetting' ;

구성 요소의 어린이가 렌더링 한 마지막 텍스트 라인의 너비를 측정하여 미망인을 방지합니다. 주어진 최소 너비 또는 최대 치환 수에 도달 할 때까지 공간은 비 침해 공간으로 변환됩니다.

기본적으로 재조정 라인 폭을 필요로하는 요소 크기가 자동으로 감지됩니다. reflowKey Prop을 지정하면 구성 요소를 업데이트 할 때마다 소품을 변경하여 수동 제어를 수행 할 수 있습니다.

소품

이름 유형 기본 설명
클래스 이름 끈

클래스는이 구성 요소가 생성 한 외부 래퍼 span 에 적용합니다.

스타일 물체

이 구성 요소가 생성 한 외부 래퍼 span 에 추가 할 추가 스타일 특성.

어린이들 마디

렌더링 할 내용.

MaxSubstitutions 숫자 3

대체 할 공간의 최대 수.

minlinewidth 하나의…
숫자
끈
기능		 15%

마지막 줄의 최소 너비는 최소가 충족 될 때까지 비 침해 공간이 삽입 될 것입니다.

  • 숫자는 절대 픽셀 너비를 나타냅니다.
  • 문자열은 컨테이너에 요소를 일시적으로 주입하여 폭을 결정하여 계산할 CSS width 값을 나타냅니다.
  • 반환 할 동적 번호 또는 문자열 값을 결정하기 위해 관련 데이터와 함께 함수가 호출됩니다. 예를 들어 미디어 쿼리와 같이 다른 중단 점에서 다른 규칙을 갖는 데 사용할 수 있습니다.
nbspchar 하나의…
끈
반응 요소
기능		 u00A0

공간을 대체 할 때 사용할 문자 또는 요소. 표준 비 침해 공간 문자로 기본값을 얻습니다. 비 분해 공간이 디버깅 목적으로 삽입되는 곳을 시각화하거나 폭을 조정하지 않는 한 거의 확실하게 고수해야합니다.

  • 문자열 값은 공간이 포함 된 기존 텍스트 노드에 직접 삽입됩니다.
  • 반응 요소 값은 메모리 인 "인큐베이터"노드로 렌더링 한 다음 DOM으로 이식하여 공간이 발견 된 텍스트 노드를 분할합니다.
  • 함수 값은 문자열, 텍스트 노드, 요소 노드 또는 삽입 할 요소를 생성해야합니다.
리플 로키 하나의…
숫자
끈

지정된 경우 자동 리플 로우를 비활성화 하여이 값을 변경하여 수동으로 트리거 할 수 있습니다. 소품 자체는 아무것도하지 않지만 변경하면 반응이 구성 요소를 업데이트하게됩니다.

리플 로우 타임 아웃 숫자

Defounces는 반사되어 최대 종종 밀리 초로 발생합니다 (주어진 기간이 끝날 때). 지정되지 않은 경우, 성분이 렌더링 될 때마다 Reflow가 계산됩니다.

장애가 있는 부울

미망인 예방을 완전히 비활성화할지 여부.

onreflow 기능

레이아웃이 재 계산되고 공간 대체가 수행 될 때 호출 할 함수.

사전 설정 끈

외부 Typesetting.Provider 에 정의 된 사전 설정의 이름. 존재하는 경우 다른 모든 소품의 기본값은 지정된 사전 설정에서 나옵니다.

신이 옳다고 하다 

 import { Justify } from 'react-typesetting' ;

여기에는 향후 더욱 진보 된 정당화 기능이 포함될 수 있지만 현재 매우 간단합니다. text-align: justify 크고 눈에 띄지 않는 단어 간격을 피할 수있는 충분한 공간이 있는지 여부에 따라 컨테이너 요소 (기본적으로 <p> )에 정당화합니다. 최소 너비는 minWidth 및 기본값으로 16 EMS로 정의됩니다.

미디어 쿼리로이를 수행 할 수도 있지만이 구성 요소는 전체 페이지 대신 컨테이너 요소에 사용 가능한 정확한 너비를 결정할 수 있습니다.

소품

이름 유형 기본 설명
클래스 이름 끈

클래스는이 구성 요소에서 만든 외부 래퍼 요소에 적용됩니다.

스타일 물체

이 구성 요소가 만든 외부 래퍼 요소에 추가 할 추가 스타일 속성.

어린이들 마디

렌더링 할 내용.

~처럼 하나의…
끈
기능
물체		 피

공급 된 어린이를 렌더링하는 요소 유형. text-align 이 인라인 요소에 영향을 미치지 않기 때문에 p 또는 div 와 같은 블록 레벨 요소 여야합니다. forwardRef 사용하는 한 사용자 정의 반응 구성 요소 일 수도 있습니다.

Minwidth 하나의…
숫자
끈		 16EM

정당한 텍스트를 허용하는 최소 너비. 숫자는 절대 픽셀 너비를 나타냅니다. 너비 계산을 수행하기 위해 문자열이 요소의 CSS에 적용됩니다.

초기 조정 부울 진실

초기에 text-align: justify 여부.

리플 로키 하나의…
숫자
끈

지정된 경우 자동 리플 로우를 비활성화 하여이 값을 변경하여 수동으로 트리거 할 수 있습니다. 소품 자체는 아무것도하지 않지만 변경하면 반응이 구성 요소를 업데이트하게됩니다.

리플 로우 타임 아웃 숫자

Defounces는 반사되어 최대 종종 밀리 초로 발생합니다 (주어진 기간이 끝날 때). 지정되지 않은 경우, 성분이 렌더링 될 때마다 Reflow가 계산됩니다.

장애가 있는 부울

정당화 탐지를 완전히 비활성화할지 여부. 적용 된 마지막 정렬은 보존됩니다.

onreflow 기능

레이아웃이 재 계산 될 때 호출 할 수있는 기능이 적용되거나 적용되지 않았습니다.

사전 설정 끈

외부 Typesetting.Provider 에 정의 된 사전 설정의 이름. 존재하는 경우 다른 모든 소품의 기본값은 지정된 사전 설정에서 나옵니다.

Fontobserver 

 import { FontObserver } from 'react-typesetting' ;

FontObserver.Provider 구성 요소에 지정된 글꼴을 관찰하기위한 구성 요소.

소품

이름 유형 기본 설명
어린이들 기능

관찰 된 글꼴의 현재 상태를받는 함수. 인수는 이러한 속성을 가진 대상이 될 것입니다.

  • fonts : FontObserver.Provider 로 전달 된 글꼴 배열은 각각 loaded 및 error 특성을 갖습니다.
  • loaded : 모든 관찰 된 글꼴이 로딩 될지 여부.
  • error : 글꼴이로드되지 않으면 첫 번째 오류가 발생합니다.

fontobserver.provider 

 import { FontObserver } from 'react-typesetting' ;

관찰 할 글꼴을 지정하기위한 컨텍스트 제공 업체.

소품

이름 유형 기본 설명
글꼴 배열…
하나의…
끈
물체 1

로드하고 관찰 할 글꼴. 글꼴 파일 자체는 이미 CSS에서 어딘가에 지정되어야하며,이 구성 요소는 단순히 FontFaceObserver 사용하여 필요한 경우 (필요한 경우) 강제로로드하고 준비된 시점을 관찰합니다.

배열의 각 항목은 글꼴 family , weight , style 및 stretch 을 지정하며 family 만 필요합니다. 또한, 각 항목에는 기본값과 다른 경우 해당 글꼴에 대한 사용자 정의 testString 및 timeout 포함될 수 있습니다. 가족 이름 만 필요한 경우 배열 항목은 문자열 일 수 있습니다.

1 객체
가족 끈
무게 하나의…
숫자
끈
스타일 끈
뻗기 끈
테스트 스트링 끈
시간 초과 숫자
테스트 스트링 끈

FontFaceObserver 의 load 방법으로 전달하는 맞춤형 테스트 문자열은 자체 testString 지정하지 않는 모든 글꼴에 사용됩니다.

시간 초과 숫자

FontFaceObserver 의 load 방법으로 전달되는 밀리 초의 사용자 정의 시간 초과는 자신의 timeout 지정하지 않는 모든 글꼴에 사용됩니다.

어린이들 마디

컨텍스트를 통해 글꼴로드 상태에 액세스 할 수있는 컨텐츠.

조판. 제공자 

 import { Typesetting } from 'react-typesetting' ;

사용할 다른 모든 react-typesetting 요소에 대한 사전 설정을 정의하기위한 컨텍스트 제공자.

소품

이름 유형 기본 설명
사전 설정 물체 {}

객체 매핑 사전 설정 이름으로 기본 소품. 예를 들어, 값이 주어지면 : 

 { myPreset : { minFontSize : 1 , maxIterations : 3 } }

… TightenText 구성 요소는 preset 소품을 지정 하여이 사전 설정을 사용할 수 있습니다. 

 < TightenText preset = "myPreset" />
어린이들 마디

컨텍스트를 통해 정의 된 사전 설정에 액세스 할 수있는 컨텐츠.
확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체