탭 위젯은 <devsite-selector> 맞춤 요소를 사용하여 다양한 프로그래밍 언어의 코드 예 또는 다른 형식 (예: JSON, YAML)으로 표현되는 데이터 구조와 같이 표현이 여러 개 있는 데이터를 정리합니다. XML)을 제출할 수 있습니다.
일반 사용법
다음 예에서는 <devsite-selector> 맞춤 요소를 사용하여 HTML로 세 개의 탭 섹션을 렌더링합니다.
탭 1 제목
Tab 1 콘텐츠
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
퀴라비 Nunc massa ipsum, mollis non neque
sed, vulputate dignissim odio.
탭 2 제목
탭 2 콘텐츠
Curabitur semper tortor nec crium sagittis. Nunc massa ipsum, mollis
non neque sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
탭 3 제목
Tab 3 콘텐츠
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
다음 예에서는 마크다운 구문을 사용하여 동일한 세 탭을 렌더링합니다.
탭 1 제목
Tab 1 콘텐츠
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
퀴라비 Nunc massa ipsum, mollis non neque sed,
vulputate dignissim odio.
탭 2 제목
Tab 2 콘텐츠
Curabitur semper tortor nec crium sagittis. Nunc massa ipsum, mollis non-ques sed, vulputate dignissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
탭 3 제목
Tab 3 콘텐츠
Nunc massa ipsum, mollis non neque sed, vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
퀴라비
더보기 메뉴가 있는 탭 위젯
다음 예에서는 <devsite-selector> 맞춤 요소를 사용하지만, 화면에 맞추기에는 탭이 너무 많고 자동으로 더보기 드롭다운 메뉴로 오버플로됩니다.
사과
사과 관련 콘텐츠
살구
살구 관련 콘텐츠
아보카도
아보카도에 관한 콘텐츠
무화과나무
무화과 관련 콘텐츠
포도
포도 관련 콘텐츠
키위나무
키위 열쇠 관련 콘텐츠
레몬
레몬에 관한 콘텐츠
라임
라임 관련 콘텐츠
망고
망고 관련 콘텐츠
복숭아
복숭아 관련 콘텐츠
다음 예에서는 마크다운 구문을 사용하여 동일한 더보기 메뉴를 렌더링합니다.
사과
사과 관련 콘텐츠
살구
살구 관련 콘텐츠
아보카도
아보카도에 관한 콘텐츠
무화과나무
무화과 관련 콘텐츠
포도
포도 관련 콘텐츠
키위나무
키위 열쇠 관련 콘텐츠
레몬
레몬에 관한 콘텐츠
라임
라임 관련 콘텐츠
망고
망고 관련 콘텐츠
복숭아
복숭아 관련 콘텐츠
여러 탭 위젯에서 탭 이름이 중복됨
탭을 클릭하면 같은 구문에서 동일한 텍스트가 있는 페이지의 다른 모든 탭에 영향을 미칩니다. 예를 들어 아래 위젯에서 Apples 또는 Apricots를 클릭하면 이전 섹션에서 두 번째 위젯에 영향을 미칩니다. 두 위젯 모두 마크다운으로 빌드되었기 때문입니다.
사과
사과에 관한 추가 콘텐츠
살구
살구에 관한 추가 콘텐츠도 확인해 보세요.
탭 위젯 맞춤설정
마크다운을 사용하여 탭 위젯을 빌드할 수 있지만 HTML 속성을 사용하여 맞춤 속성을 할당해야 합니다.
탭 내에서 텍스트 줄바꿈
DevSite에서 설정한 탭의 최대 너비를 초과하는 텍스트는 잘리며 생략 부호가 추가됩니다. 다음 예에서는 <devsite-selector> 맞춤 요소 내의 two-line-tab 클래스를 사용하여 두 번째 탭에서 텍스트를 래핑합니다.
래핑되지 않는 긴 라벨입니다.
이 라벨은 다른 행에 줄바꿈되지 않습니다.
이 라벨은 두 번째 줄로 줄바꿈합니다.
이 탭의 라벨은 두 번째 줄로 줄바꿈됩니다.
탭 내에서 더 작은 라벨을 사용하여 텍스트 줄바꿈
다음 예에서는 two-line-tab를 첫 번째 줄로, tab-label를 <devsite-selector> 맞춤 요소 내 두 번째 줄로 설정하여 두 줄 탭의 두 번째 줄에 작은 라벨을 표시합니다. 가 있는지 진단합니다.
Swift
이 탭에는 Swift 라벨이 있습니다.
자바
이 두 줄 탭의 Java 라벨 아래에는 더 작은 Android 라벨이 있습니다.
Kotlin
이 두 줄 탭의 Kotlin 라벨 아래에는 작은 Android 라벨이 있습니다.
자바
이 탭에는 자바 라벨이 있습니다.
특정 탭으로 직접 연결
다음 예에서는 <devsite-selector> 맞춤 요소 내에서 id를 지정하여 특정 탭으로 바로 연결되고 탭을 엽니다.
코볼
이 탭이 기본값이지만 #cobol 앵커를 사용할 수도 있습니다.
Fortran
링크에 #fortran 앵커를 추가하여 이 탭에 직접 연결할 수 있습니다.
Haskell
이 탭에서는 링크에 #haskell 앵커를 사용합니다.
모든 위젯이 동일한 탭으로 열린 링크 만들기
다음 링크는 쿼리 매개변수 ?tab=Apricots를 이 페이지의 URL에 추가하고 모든 선택기에 열려 있는 Apricots 탭을 사용하여 페이지를 로드합니다.
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots