동적으로 클래스를 할당하는 두 가지 빠른 IHP 팁
클래스 도우미 사용
...보기의 요소에 클래스를 동적으로 할당합니다. 코드를 많이 단순화하는 쉬운 방법입니다.
-- BEFORE
<a class={usersLinkClasses} href={UsersAction}>Users</a>
<a class={invitesLinkClasses} href={InvitesAction}>Invites</a>
...
where
usersLinkClasses = "nav-link" ++ if isActivePath UsersAction
then " active"
else ""
invitesLinkClasses = "nav-link" ++ if isActivePath InvitesAction
then " active"
else ""
-- AFTER
<a class={classes ["nav-link", ("active", isActivePath UsersAction)]} href={UsersAction}>Users</a>
<a class={classes ["nav-link", ("active", isActivePath InvitesAction)]} href={InvitesAction}>Invites</a>
isActivePath 대신 isActivePathOrSub 사용
이전 예제를 읽으면
isActivePath 클래스를 링크에 동적으로 할당하기 위해 active를 사용했음을 알 수 있습니다. 음, isActivePathOrSub를 사용하면 경로가 하위 경로인 경우에도 작동합니다. 다음 예에서는 /Settings와 /Settings/Profile가 모두 일치하여 링크가 active 클래스를 가져옵니다. Learn more in the documentation .<a class={classes ["nav-link", ("active", isActivePathOrSub "/Settings")]} href={SettingsAction}>Settings</a>
이것이 당신의 관심을 최고조에 달했다면 get started with IHP now 당신의 생각을 알려주세요!
Reference
이 문제에 관하여(동적으로 클래스를 할당하는 두 가지 빠른 IHP 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/digitallyinduced/two-quick-ihp-tips-to-dynamically-assign-classes-3cc1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
