standard components
1.0.0
기능성 UI 구성 요소에 대한 사양
https://standard-components.com
UI 구성 요소 라이브러리는 모든 모양과 크기로 제공됩니다. 이 사양은 교환 가능한 UI 구성 요소의 생태계를 만들고 더 큰 코드 재사용 성을 장려하기 위해 명명 규칙 및 소품 API를 표준화하는 방법으로 고안되었습니다.
교환 가능한 UI 구성 요소의 라이브러리를 만들려면 다음 이름 지정 규칙을 사용해야합니다. 이 목록은 의도적으로 제한되며 데모의 시작점입니다. 시간이 지남에 따라 더 많은 구성 요소가 추가 될 수 있습니다.
박스 구성 요소는 마진, 패딩, 너비 및 기타 레이아웃 스타일을 처리하는 원시 박스 모델 레이아웃 구성 요소입니다.
Flex 구성 요소는 Flexbox 별 특성을 가진 박스 구성 요소의 확장입니다.
텍스트 구성 요소는 글꼴 크기, 무게, 라인 높이, 정렬 및 기타 타이포그래피 스타일을 처리하는 원시 타이포그래피 구성 요소입니다.
제목 구성 요소는 제목을위한 텍스트 구성 요소의 확장입니다.
이미지 구성 요소는 이미지를 표시하는 컨텐츠 구성 요소입니다.
배경이지는 배경 이미지를 표시하기위한 소품으로 박스 구성 요소의 확장입니다.
버튼 구성 요소는 버튼처럼 보이는 스타일이있는 대화식 구성 요소입니다.
링크 구성 요소는 탐색을위한 대화식 구성 요소입니다.
스타일 소품은 유연성을위한 CSS 위에 높은 수준의 추상화이며 인스턴스 별 스타일 문제를 해결하는 데 도움이됩니다. 스타일 소품은 주로 CSS 속성을 기반으로하며 마진 및 패딩을위한 속기 소품이 있습니다.
버튼과 같은 일부 구성 요소는 스타일 변형을 사용하여 primary 및 secondary 버튼 스타일과 같은 다른 버전을 렌더링합니다. 변형은 primary 및 secondary 변이체에 대한 속기 부울 소품으로 variant 소품으로 처리해야합니다.
더 많은 소품을 참조하십시오.
테마는 스타일 소품으로 사용되는 값을 정의하는 객체입니다. 테마는 일관된 마진, 패딩, 색상, 글꼴 크기 및 기타 UI 상수를 보장합니다.
자세한 내용은 테마를 참조하십시오.
엄격한 구성 요소 유형 구조를 준수함으로써, 시스템의 구성 요소는 단일 목적과 관련하여 라이브러리에서 더 큰 상호 교환 가능성을 허용 할 수 있습니다.
레이아웃 구성 요소는 너비, 높이 및 간격을 제어합니다. 그들은 타이포그래피 나 다른 고려 사항을 제어하려고 시도 하지 않습니다 .
타이포그래피 구성 요소는 글꼴 패밀리, 크기, 무게, 선행, 추적 및 기타 속성과 관련이 있습니다. 타이포그래피 구성 요소는 레이아웃과 관련이 없습니다 .
콘텐츠 구성 요소는 레이아웃, 타이포그래피 또는 기타 스타일 문제에 영향을 미치지 않고 이미지, 비디오 및 다이어그램과 같은 것을 표시합니다.
링크, 버튼 및 양식 요소와 같은 대화식 요소는 사용자 입력이 필요하며 일반적으로 레이아웃 또는 타이포그래피 문제를 처리하지 않습니다 .
스타일 구성 요소는 레이아웃이나 타이포그래피에 영향을 미치지 않고 경계, 반경, 그림자 및 그라디언트와 같은 다른 UI 스타일을 처리합니다.
위치 구성 요소는 일반 문서 흐름에서 자녀를 제거하고 드물게 사용해야합니다.
Compositor | github | MIT 라이센스
