로그인

검색

Extra Form
추천지수 6

라이믹스2 에서 새로 생긴 기능 메뉴 아이콘 기능은 간단하게 소식으로 전해드린 적이 있습니다.

 

https://rxtip.kr/rx_story/4083

 

위 소식을 전해드릴때 메뉴에 아이콘을 표시하기 위해 기존에는 메뉴 설명 부분에 아이콘의 특정할 수 있는 문구를 넣고 레이아웃 등에서 메뉴 설명 부분을 읽어와서 출력해주는 것을 별도로 메뉴 아이콘 항목이 신설되어 메뉴설명과 아이콘을 분리해서 사용이 가능하다고 전해드렸습니다.

 

 

메뉴를 출력하는 코드에서 'icon' 값을 출력하도록 코드를 짜면 해당 메뉴에 설정한 아이콘이 나오게 되는거죠.

 

 

저희 라이믹스 꿀팁은 새로 생긴 메뉴 아이콘에 새롭게 아이콘을 넣고 메뉴마다 아이콘을 가지게 해서 출력하게 했습니다.

 

그런데 오늘은 이 메뉴에 있는 아이콘과 똑같은 아이콘이 스케치북 스킨의 빵조각의 메뉴에도 걸리도록 똑같이 만들었습니다.

 

 

기존에 경로 중간에 출력하던 > 는 없애 버리고 각 메뉴가 가지는 아이콘을 메뉴 앞에 출력하도록 했습니다.

화면 캡처 2021-04-21 143126.png.jpg

 

 

<a href="{getSiteUrl()}"><strong>Home</strong></a>
<block loop="$메뉴변수->list=>$key1,$val1" cond="$val1['selected']">
<!--@if(!$val1['list'])--><a href="{$val1['href']}"><em><ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon> {$val1['text']}</em><!--@else--><ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon> {$val1['text']}<!--@end--></a>
<block loop="$val1['list']=>$key2,$val2" cond="$val2['selected']">
<a href="{$val2['href']}"><!--@if(!$val2['list'])--><em><ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon> {$val2['text']}</em><!--@else--><ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon> {$val2['text']}<!--@end--></a>
<block loop="$val2['list']=>$key3,$val3" cond="$val3['selected']">
<a href="{$val3['href']}"><!--@if(!$val3['list'])--><em><ion-icon cond="$val3['icon']" name="{$val3['icon']}"></ion-icon> {$val3['text']}</em><!--@else--><ion-icon cond="$val3['icon']" name="{$val3['icon']}"></ion-icon> {$val3['text']}<!--@end--></a>
</block>
</block>
</block>

 

 

<ion-icon cond="$val1['icon']" name="{$val1['icon']}"></ion-icon>

<ion-icon cond="$val2['icon']" name="{$val2['icon']}"></ion-icon>

<ion-icon cond="$val3['icon']" name="{$val3['icon']}"></ion-icon>

 

각 차수에 맞는 아이콘을 불러올 수 있도록 레이아웃과 동일하게 코드를 추가해 주어서 아이콘이 표시되도록 했습니다.

 

** 저희 라이믹스 꿀팁은 ion-icon 이라는 아이콘 폰트를 쓰고 있으니 하나의 예시일 뿐 저희랑 똑같이 구성해도 아이콘이 출력되지 않습니다. 그리고 관리자페이지 메뉴 아이콘 입력에 정확한 아이콘 폰트명을 입력해야 합니다.

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '0'

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views209 Votes3
    Read More
  6. Read More
  7. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 20

    Date2021.04.10 Category기능 Views308 Votes3
    Read More
  8. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views251 Votes4
    Read More
  9. 본문 게시글 주소 클립보드 복사 기능 만들기 23

    Date2021.04.06 Category기능 Views630 Votes3
    Read More
  10. Read More
  11. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views221 Votes5
    Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views250 Votes3
    Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4