chayns components
v4.20.24
Chayns® 애플리케이션을 개발하기위한 아름다운 반응 구성 요소 세트.
먼저 chayns-components 패키지를 프로젝트에 설치해야합니다.
# Yarn
yarn add chayns-components
# NPM
npm install chayns-components 우리 구성 요소의 스타일은 chayns-css 라이브러리를 통해 제공되며 일부 구성 요소는 chayns-js API에도 의존하므로 HTML에 포함시켜야합니다.
<!-- CSS styles -->
< script
src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
version =" 4.2 "
> </ script >
<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script > 다음 구성 요소는이 패키지의 일부입니다.
| 요소 | 설명 |
|---|---|
| 아코디언› | 아코디언은 영구적으로 눈에 띄는 헤더와 상호 작용하여 토글링되는 접을 수있는 섹션입니다. |
| 금액› | 금액은 증분 값을 증가 시키거나 감소시키는 데 사용되는 3 세그먼트 제어입니다. |
| AnimationWrapper› | 애니메이션 전신은 어린이들에게 시선을 사로 잡는 초기 애니메이션을 제공합니다. |
| 배지› | 배지는 다른 구성 요소를 둔한 정보로 장식하는 데 사용되는 작고 원형 용기입니다. |
| 버블› | ContextMenu 및 Tooltip 구성 요소에 전원을 공급하는 데 주로 사용되는 부동 기포. |
| 버튼› | 버튼은 동작을 시작하고 제목이나 아이콘을 포함 할 수 있으며 사전 정의 된 스타일 세트와 함께 제공됩니다. |
| 달력 > | 지정된 날짜를 강조 할 수있는 대화식 그리드 캘린더. |
| checkbox› | 확인란을 사용하면 사용자가 옵션 선택과 같은 선택과 관련된 작업을 완료 할 수 있습니다. 두 개의 상호 배타적 상태 사이의 시각적 토글 인 스위치로 스타일을 만들 수 있습니다. |
| ColorPicker› | 사용자가 텍스트, 모양, 마킹 도구 및 기타 요소의 색상을 선택할 수 있습니다. |
| ColorsCheme› | 모든 아동 구성 요소의 색 구성표를 조정합니다. |
| Combobox› | 사람들이 선택할 수있는 고유 한 값의 스크롤 가능한 목록이 포함 된 드롭 다운이있는 버튼. |
| ContextMenu› | 사람들에게 인터페이스를 혼란스럽게하지 않고 화면 항목과 관련된 추가 기능에 액세스 할 수 있습니다. |
| DateInfo› | 쉽게 읽을 수있는 날짜 또는 날짜 범위를 형식화하고 호버의 절대 날짜를 드러냅니다. |
| 이모 지인 펙 | 이모티콘을 넣을 수있는 텍스트 입력. |
| ExpandableContent› | 키가 높이 전이를하는 어린이들을 드러내는 접을 수있는 섹션. |
| FileInput› | 대화 상자 또는 드래그 앤 드롭을 통해 지정된 파일 유형을 허용합니다. |
| FilterButton› | 목록을 필터링하는 데 사용되는 칩 모양의 구성 요소. 일반적으로 2 개 이상의 그룹에서 사용됩니다. |
| FormattedInput› | 입력을 자동으로 포맷하는 텍스트 입력. 이 구성 요소는 Input -컴포넌트를 기반으로하므로 여기에 나열되지 않은 Input -컴포넌트 소품이 필요합니다. 이 구성 요소는 제어되지 않은 구성 요소로만 작동하므로 value -Prop을 사용하지 않습니다. |
| 갤러리› | 기본적으로 최대 4 개의 이미지를 표시하는 이미지 갤러리. 또한 이미지의 재정렬 및 삭제를 지원하고 tsimg.cloud 에서로드 된 이미지의 흐릿한 이미지 미리보기를 지원합니다. |
| 아이콘› | Fontawesome 아이콘을 표시합니다. |
| ImageAccordion› | 큰 이미지를 가지고 있고 그리드에 나타나는 아코디언. ImageAccordionGroup 내부에서 사용해야합니다. |
| ImageAccordionGroup› | 여러 ImageAccordion 구성 요소를 함께 그룹화하므로 한 번에 하나만 열 수 있습니다. |
| 입력› | 다른 디자인으로 검증 및 장식 할 수있는 텍스트 입력. |
| 목록 > | ListItem -component의 래퍼는 목록을 작성합니다. |
| ListItem› | 목록의 항목은 관련 데이터를 구조화 된 형식으로 표시합니다. List 구성 요소 내부에서 사용해야합니다. |
| 오프닝 타임› | 개방 시간을위한 입력. |
| Personfinder› | 임의의 데이터로 작업하도록 사용자 정의 할 수있는 사람에 대한 자동 완성 검색. |
| PositionInput› | 맵 및 텍스트 입력이있는 위치 입력. 이를 위해서는 Places 라이브러리가 활성화 된 Google Maps JavaScript API가 필요합니다. 지도 API에 대한 자세한 내용은 여기를 참조하십시오. |
| ProgressBar› | 행동 진행 상황이나 로딩 스피너와 같은 불확실한 상태를 보여줄 수있는 애니메이션 진행 막대. |
| Radiobutton› | 여러 옵션 중 하나를 선택할 수있는 라디오 버튼. |
| rfidinput› | RFID 신호를 취하는 구성 요소. |
| 스크롤 뷰› | 모든 장치에서 멋지게 보이는 맞춤형 스크롤 바가있는 스크롤 가능한 컨테이너. |
| SearchBox› | 항목 목록을 통해 검색 할 자동 완성 입력. |
| SelectButton› | 클릭하면 선택 대화 상자를 엽니 다. |
| selectItem› | 선택시 콘텐츠를 확장하는 라디오 버튼. SelectList 내부에서 사용해야합니다. |
| SelectList› | 선택시 콘텐츠를 드러내는 무선 버튼의 수직 목록. |
| setupwizard› | 사용자가 순차적으로 통과 해야하는 일련의 단계. |
| setupwizarditem› | SetupWizard 의 한 단계를 나타내는 항목. |
| Sharingbar› | 다양한 플랫폼에서 링크와 일부 텍스트를 공유하기위한 컨텍스트 메뉴. |
| 서명 > | 사용자가 구독하도록하는 구성 요소 |
| 슬라이더› | 최소와 최대 값 사이에서 이동할 수있는 엄지가있는 수평 트랙. |
| SliderButton› | 상호 배타적 인 선형 버튼 세트. |
| SmallwaitCursor› | 작은 원형 하중 표시기. |
| Taginput› | 값을 태그로 그룹화 할 수있는 텍스트 입력. |
| TextArea› | 콘텐츠로 자동으로 성장할 수있는 멀티 라인 텍스트 입력. |
| 텍스트 스트링› | 데이터베이스에서 텍스트 문자열을로드하여 표시합니다. CTRL + Click 통해 교체 및 문자열 변경을 처리합니다 (내부 만). |
| 툴팁› | 아동 구성 요소를 감싸고 자녀가 맴돌거나 클릭 할 때 메시지를 표시합니다. 참조에서 .show() 또는 .hide() 호출하여 명시 적으로 표시 할 수 있습니다. |
| verificationicon› |
우리는 또한 일련의 공통 유틸리티 기능을 제공합니다.
| 기능 | 설명 |
|---|---|
| imageUpload | 기능을 tsimg.cloud에 업로드하려면 기능합니다 |
| istobitemployee | 사용자가 Tobit 직원 인 경우 정보를 얻으십시오 |
| CreateLinks | URL이있는 문자열에서 링크로 문자열을 만듭니다. |
| removehtml | 문자열에서 HTML 태그를 제거합니다 |
| colorutils | 유틸리티 기능은 색상 값을 변환하기위한 유틸리티 기능 (16 진수, RGB, HSV) |
| 평형 장치 | 유틸리티 기능 HTML 요소의 폭을 평등하게합니다 |
chayns-components 에 기여하려면 Contributing.md 파일을 확인하십시오.
