부트스트랩 5 가로 스크롤 탭

UI를 더 멋지게 분할하려면 웹사이트/앱에 여러 탭을 추가해야 합니다. 그러나 4개 이상일 경우 특히 모바일 환경에서는 보기 좋지 않을 수 있습니다.

4개의 탭을 추가해야 하는 경험에 직면했고 일부 기기에서 내 앱이 두 번째 행을 표시하기 시작했습니다. 이것은 좋아 보이지 않았습니다.



이것이 내가 연구를 수행하고 Bootstrap 4에 대한 다음과 같은 훌륭한 코드를 찾은 이유입니다.

https://www.codeply.com/go/Loo3CqsA7T

jQuery에 의존했기 때문에 예상대로 작동하지 않았고 Bootstrap 5를 사용하고 있었습니다. 나는 그것을 위해 하나의 추가 레이어를 추가하고 싶지 않았습니다. 그래서 JS로 다시 썼고 결과는 다음과 같습니다.




다음은 필수 코드의 스니펫입니다.

설치:

npm으로 설치: npm i scrolling-tabs-bootstrap-5

필요한 라이브러리:

<!--Bootstrap icons-->
<link rel="stylesheet" href="node_modules/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">

<!--External library-->
<script src="node_modules/move-js/move.min.js"></script>
<!--https://visionmedia.github.io/move.js/-->

<!--Scrollable libs-->
<link href="node_modules/scrollable-tabs-bootstrap-5/dist/scrollable-tabs.css" rel="stylesheet">
<script src="node_modules/scrollable-tabs-bootstrap-5/dist/scrollable-tabs.js"></script>

HTML 예:

<div class="w-100">
    <div class="scroller scroller-left float-start mt-2"><i class="bi bi-caret-left-fill"></i></div>
    <div class="scroller scroller-right float-end mt-2"><i class="bi bi-caret-right-fill"></i></div>
    <div class="wrapper-nav">
        <nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
            <a class="nav-item nav-link pointer active" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="public" aria-selected="true">Tab1</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab2" role="tab" data-bs-toggle="tab">Tab 2</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab3" role="tab" data-bs-toggle="tab">Tab 3</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab4" role="tab" data-bs-toggle="tab">Tab 4</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab5" role="tab" data-bs-toggle="tab">Tab 5</a>
            <a class="nav-item nav-link pointer" data-bs-target="#tab6" role="tab" data-bs-toggle="tab">Tab 6</a>
        </nav>
    </div>
    <div class="tab-content p-3" id="myTabContent">
        <div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" >
            This is the content of Tab 1...
        </div>
        <div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 2...
        </div>
        <div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 3...
        </div>
        <div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 4...
        </div>
        <div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 5...
        </div>
        <div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" >
            This is the content of Tab 6...
        </div>
    </div>
</div>

개선하고 싶다면 GitHub에 게시했습니다.

https://github.com/SupernovaIC/scrollable-tabs-bootstrap-5

여기에서 테스트할 수도 있습니다.

https://supernovaic.github.io/scrollable-tabs-bootstrap-5/

나를 팔로우하세요:

링크드인
유튜브
인스 타 그램
사이버 예언자
이야기 공유