fontawesome을 바삭하게 짜넣기 위한 라이브러리 「wonderful.js」를 만들어 보았다

... 상태 (α 버전)

(기능 추가 후에 수시로 갱신해 나가려고 합니다!하지만 일단 Launch합니다!)

배경

체크 박스나 라디오 버튼을 간편하게(세련되게) 편입할 수 없는가 생각했을 때,

다음 옵션을 만났습니다.

iCheck.js

→ Jquery 의존적이거나 한다

CSS로 세련되게 자작 htps : //에서 시논. 코 m / 2019/03/02 / 굉장한 - 치쿠 쿠보 x - 아니 마치온 /

→ 코피페라고 해도 힘든 ..

(그 밖에 더 쉬운 방법이 있으면 알려주세요 .... orz)

fontawesome은 아이콘 포함에 뭔가 사용되는 것이 많다고 생각합니다.

다만, free판에도 체크 박스의 아이콘도 존재하기 때문에 조합해 사용해 간편하게 실장과 가자고 할까라고 생각했습니다.

덧붙여서, checkbox의 의사 요소(before)를 사용해 CSS만으로 fontawesome를 짜넣는 방법도 소개되고 있었습니다만, 아이콘 사이즈와 라벨의 사이즈를 조정하는 것이 귀찮거나 합니다.

그래서 "jQuery에도 의존하지 않는 fontawesome을 간편하게 통합할 수 있는 JS 라이브러리"를 원한다는 것으로 작성에 이르렀습니다!

이름은 awesome = 멋지다 에 대해 wonderful = 훌륭하다는 발상에서 이미지는 개! =3

리포지토리

여기에 공개했습니다!
wonderful.js 　｜ DOC

사용법

1. fontawesome을 사용할 준비를하십시오

다음과 같은 형태로 fontawesome을 import

  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
  integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI="
  crossorigin="anonymous"/>

2. 리포지토리에서 wonderful.js를 다운로드하여 앱으로 가져옵니다.

(body 태그의 맨 아래가 바람직합니다)

<script type="text/javascript" src="wonderful.js"></script>

이상!

기본 설정만으로 다음과 같은 디자인으로 완성됩니다

조금 빈상입니다만, 사용하고 싶은 아이콘, 색으로 변경 가능합니다!

설정(Configuration)

Checkbox

설정
기본
설명


targetClass
undefined
사용자 지정하려는 요소에 부여할 클래스 이름 지정

isStack
false
아이콘을 겹쳐서 표시하려면 true 설정

bfFontClass
far fa-square (if:isStack = true then far 'fa-square')
아이콘 클래스 세트

bfFontClassStacked
far fa-square fa-stack-1x
겹쳐서 표시할 아이콘의 클래스를 설정

bfColor
블랙
아이콘 색상 설정

bfColorStacked
블랙
겹쳐서 표시할 아이콘의 색상 설정

bfSize
1.5rem
아이콘 크기 설정

bfSizeStacked
1.5rem
겹쳐서 표시할 아이콘의 크기 설정

bfMarginRight
8px
라벨과의 거리를 조정하기 위해 설정

afFontClass
far fa-square (if:isStack = true then far 'fa-square')
아이콘 클래스 세트

afFontClassStacked
far fa-square fa-stack-1x
겹쳐서 표시할 아이콘의 클래스를 설정

afColor
블랙
아이콘 색상 설정

afColorStacked
블랙
겹쳐서 표시할 아이콘의 색상 설정

afSize
1.5rem
아이콘 크기 설정

afSizeStacked
1.5rem
겹쳐서 표시할 아이콘의 크기 설정

afMarginRight
8px
라벨과의 거리를 조정하기 위해 설정

labelSize
1rem
라벨의 문자 크기 설정


※bf*,af* 는 check 전후의 설정을 나타냅니다.

기타 샘플

TBI(향후 전개)

Webpack에서 javascript 환경을 만들고 있지만 Typescript로 만들고 싶습니다

Checkbox와 inputbox에도 대응시킨다

사용하기 쉽도록 리팩토링