 |
요약 | 사이드바 토글 아이콘을 동적으로 변경하고 커스터마이징할 수 있도록 합니다 |
 |
저장소 | https://github.com/Lillinator/dynamic-sidebar-icon |
 |
미리보기 | https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
이 테마 컴포넌트 설치하기
개요
사이드바가 열려 있거나 닫혀 있는 상태에 따라 헤더의 사이드바 토글 아이콘을 동적으로 변경하는 가벼운 Discourse 테마 컴포넌트입니다.
기본적으로 이 컴포넌트는 사이드바가 닫혀 있을 때 표준 햄버거 메뉴 아이콘(bars)을 표시하고, 사이드바가 열려 있을 때 닫기 X 아이콘(xmark)으로 전환됩니다.
관리자는 원할 경우 대신 커스텀 아이콘을 지정할 수 있으며, 모바일 뷰에서도 활성화할 수 있습니다(컴포넌트의 동적 측면은 비모바일 뷰포트 크기에만 적용되지만, 열린 아이콘을 변경하는 관리자는 모바일 UX와 일관성을 원할 수 있습니다).
기능
- 사용자가 사이드바와 어떻게 상호작용해야 하는지 명확한 시각적 피드백을 제공합니다.
- 관리자는 테마 설정을 통해 기본 아이콘을 어떤 FontAwesome 아이콘으로든 쉽게 교체할 수 있습니다.
- 모바일 뷰포트 UX 일관성을 위해 교체된 사이드바 아이콘을 활성화하도록 허용합니다.
비디오 스크린샷
컴포넌트 기본값:
dog 및 cat 아이콘 사용:
설정
컴포넌트 설정을 편집하여 사이드바를 여닫을 때 사용할 아이콘을 커스터마이징하세요:
| 설정 | 설명 |
|---|---|
Icon_to_open_the_sidebar |
사이드바가 접혀 있을 때 표시되는 아이콘 (기본값: bars) |
Icon_to_close_the_sidebar |
사이드바가 펼쳐져 있을 때 표시되는 아이콘 (기본값: xmark) |
Apply_open_icon_on_mobile |
모바일 뷰포트에 커스텀 ‘열기’ 아이콘 적용 (기본값: false) |
참고 사항
- 코어 Discourse에 이미 포함되어 있지 않은 커스텀 아이콘을 사용하면 아이콘이 빈 상태로 표시될 수 있습니다. 이를 해결하려면 Discourse 관리자 설정의
SVG icon subset사이트 설정에 커스텀 아이콘(예:rocket,cat)을 추가해야 합니다(All Site Settings→SVG icon subset참조). - 이 컴포넌트는 헤더 드롭다운 모드와 호환되지 않습니다.
내 다른 Discourse 관련 작업 보기
