오픈소스 프로젝트
2023년에 만든 나의 UI 키트
Sergei Solod가 2023년 AI 붐 이전에 만든 오픈소스 UI 키트입니다. 실제 작업에서 오래 사용한 프런트엔드 컴포넌트, 현지화된 데모, 그리고 원본 프로젝트를 살펴볼 수 있습니다.
AI 붐 이전에 만들고 실제 작업에 오래 사용한 키트
이 페이지는 생성형 쇼케이스가 아닙니다. 폼, 버튼, 모달, 테이블, 차트, 캘린더, 내비게이션, 파일 업로드 패턴을 포함한 제 원본 프런트엔드 키트이며, 오래 사용한 뒤 JSVar 안에서 오픈소스로 공개했습니다.
입력 필드
유효성 검사가 포함된 텍스트, 텍스트 영역, 전화, 이메일 및 비밀번호 필드입니다.
버튼
기본, 보조, 압축, 비활성화 및 사용자 정의 스타일 작업.
선택 필드
일반 값 및 객체 배열에 대한 단일 및 다중 선택.
로드 중
비동기 작업에 대한 로드 상태를 차단합니다.
아코디언
한 번에 하나씩 열리는 확장 가능한 콘텐츠 블록입니다.
메시지
확인 작업이 포함된 성공 및 오류 메시지입니다.
모달
명확한 수락 및 취소 흐름이 포함된 확인 대화상자입니다.
페이지 매김
제한된 이전 및 다음 컨트롤이 있는 편집 가능한 페이지 입력입니다.
토글
간단한 제품 설정을 위한 컴팩트 부울 컨트롤입니다.
팝업 패널
보조 세부정보 및 상황별 읽기를 위한 팝업 패널입니다.
언어
JSVar의 21개 로캘 메타데이터를 기반으로 구축된 언어 선택기 데모입니다.
테이블
기본 테이블, 행 세부정보 및 밀도 히트맵.
차트
누적, 그룹화, 혼합, 선, 영역 및 원형 차트 데모.
달력
시작 및 종료 값 쌍에 대한 현지화된 날짜 선택입니다.
파일 드롭
일치하는 업로드 작업이 있는 끌어서 놓기 파일 대상입니다.
네비게이션
동일한 섹션 모델의 모듈 내 섹션 탐색.
스텁
미완성 상태 또는 뷰포트 제한 상태에 대한 보호 오버레이입니다.
쇼케이스
구성요소 놀이터
사이드바를 사용하여 모든 구성 요소 제품군을 찾아보고 이식된 동작을 테스트하세요.
현재 섹션
01/17입력 필드
유효성 검사가 포함된 텍스트, 텍스트 영역, 전화, 이메일 및 비밀번호 필드입니다.
현재 섹션
입력 필드
유효성 검사가 포함된 텍스트, 텍스트 영역, 전화, 이메일 및 비밀번호 필드입니다.
문자 수: 0/1000
표준 필드
이 필드에 잘못된 값이 포함되어 있습니다.
흐림 확인됨
도메인 제안 포함
10자 이상, 대소문자 혼합, 숫자, 기호