React로 탭 구성요소 만들기
1. 반응 탭
후크로 탭에 반응합니다.
데모: https://jeetiss.github.io/tabs/
2. 반응 쿨 탭
탭을 사용하는 매우 편안한 패키지.
내가 원하는 방식으로 각 탭과 콘텐츠를 사용자 정의할 수 있는 탭 패키지를 찾았습니다.
예를 들어 각 탭에 다른 borderBottom이 있습니다.
3. 플렉스 레이아웃
FlexLayout은 React 구성 요소를 여러 탭 세트로 배열하는 레이아웃 관리자로, 크기를 조정하고 이동할 수 있습니다.
특징:
- 스플리터
- 탭
- 탭 드래그 및 순서 지정
- 탭 집합 끌기(한 번의 작업으로 탭 집합의 모든 탭 이동)
- 탭셋 또는 프레임 가장자리에 도킹
- 탭 집합 최대화(탭 집합 헤더를 두 번 클릭하거나 아이콘 사용)
- 탭 오버플로(탭 오버플로 시 메뉴 표시)
- 테두리 탭 세트
- 하위 모델, 레이아웃 내부의 레이아웃 허용
- 탭 이름 바꾸기(이름을 바꾸려면 탭 텍스트를 두 번 클릭)
- 테마 - 빛과 어둠
- 터치 이벤트 - 모바일 장치(iPad, Android)에서 작동
- 드래그를 사용하여 탭 추가, 간접 드래그, 활성 탭 세트에 추가, ID로 탭 세트에 추가
- 기본 픽셀 크기 탭 세트
- 헤드 탭 세트
- 탭 및 탭 집합 속성: enableHeader, enableTabStrip, enableDock, enableDrop…
- 사용자 정의 가능한 탭 및 탭 세트 헤더 렌더링
- esc 끌기 취소
- typescript 유형 선언 포함
- CSS 모듈에서 사용하기 위해 classNameMapper 소품을 통해 CSS 클래스 이름 재정의를 지원합니다.
www fxnetworks.com/activate
4. 반응형 Navbar에 반응
콘텐츠 영역에 맞지 않는 경우 탐색 모음 항목을 드롭다운으로 이동하는 탐색 모음 구성 요소입니다.
데모: https://opuscapita.github.io/react-responsive-navbar/
5. 반응 탭 Redux
단순하고 완전히 사용자 정의 가능한 React 탭 구성 요소는 일반 React 애플리케이션 또는 외부 애플리케이션 상태가 있는 Flux와 유사한 아키텍처(예: 리덕스.
6. 드래그 가능한 탭 반응
플러그인은 Atom에서 영감을 받았으며 React 앱에서 이러한 아름다운 탭을 사용할 수 있습니다.
file_put_contents 권한이 거부되었습니다.
7. 반응 아리아 탭패널
WAI-ARIA 탭 패널 디자인 패턴에 설명된 키보드 상호 작용 및 ARIA 속성을 제공하여 액세스 가능한 탭을 빌드하는 데 도움이 되는 React 구성 요소입니다.
데모 보기: https://davidtheclark.github.io/react-aria-tabpanel/demo/
8. 반응 탭 탭
ReactJS를 위한 모바일 지원, 드래그 가능, 편집 가능 및 API 기반 탭.
특징
- 모바일 지원 — 터치 지원. 모바일 장치에서 사용하기 쉬운
- 드래그 가능한 탭 — 드래그 앤 드롭 탭 지원
- 추가 및 삭제 — 탭을 추가 및 삭제할 수 있습니다.
- 비동기 콘텐츠 — 지연 로드 패널 콘텐츠
- 사용자 정의 가능한 스타일 — |_+_|를 기반으로 하여 탭 스타일을 매우 쉽게 사용자 정의할 수 있습니다.
- API 기반 — 모든 작업을 제어할 수 있습니다.
- ARIA 액세스 가능
데모: https://ctxhou.github.io/react-tabtab/
원 진행률 표시줄 CSS
9. 반응 Tabbordion
아코디언 및 탭 생성을 위한 보편적이고 의미론적이며 접근 가능한 React 상태 관리 구성 요소
데모: https://merri.github.io/react-tabbordion/
10. 드래그 가능한 탭 반응
드래그 가능한 탭 반응 구성 요소와 같은 원자.
데모: http://georgeosddev.github.io/react-draggable-tab/example/
11. 더 빠른 반응 탭
Faster React Tabs는 접근 가능하고 간단한 탭을 렌더링하는 데 사용되는 유연하고 컨텍스트에 구애받지 않는 React 구성 요소입니다.
액세스 가능한 탭을 만드는 것은 쉬운 일이 아닙니다. 다행히도 이 React 구성 요소는 탭에 대한 모든 모범 사례를 염두에 두고 구축되었습니다. 또한 JS를 사용하지 않거나 서버 측 렌더링을 사용하는 사용자에게 JavaScript가 아닌 대체를 제공합니다.
12. 반응 탭
ReactJS를 위한 접근하기 쉽고 쉬운 탭 구성 요소입니다.
AWS 증폭 CI CD
데모: http://reactcommunity.org/react-tabs/
13. 반응 탭 탐색
React 탭 탐색은 웹 앱에서 탭을 탐색할 수 있게 해주는 멋진 반응 구성 요소입니다.
이 반응 구성 요소를 사용하면 웹 앱에서 탭을 탐색할 수 있습니다.
데모: https://pep.rodeja.me/react-tabs-navigation/
14. 접근 가능한 탭에 반응
내 바닐라 JS 플러그인에서 이식된 접근 가능한 React 탭 구성 요소.
데모: https://stowball.github.io/react-accessible-tabs/
15. 재료 탭
Material Design 탭 구성 요소를 제공하는 간단한 React 패키지입니다.
#reactjs #자바스크립트