Polymer를 사용하여 아이콘 표시
10182 단어 core-iconsPolymercore-icon
core-를 iron-로 교환하면 사용할 수 있습니다.살짝 해보고 싶은 사람Polymer, 우선 간단한 곳에서 아이콘부터 시작해 보다가 갑자기 빠져드는 사람 있어요?모든 일은 작은 일부터 시작해야만 기초를 공고히 할 수 있다.지금부터 Polymer를 시작하고 싶은 분들은 여기서 아이콘을 사용해 보세요!
그나저나 여기 해설 부분Rob Dodson이 설명하는 영상입니다.도 커버됐으니 관심 있으신 분들은 꼭 봐주세요.영어지만 최근에는 일본어 자막이 붙을 예정이다.
아이콘용 Polymer 요소
Polymer의 묘미는 표준 HTML에 포함되지 않은 요소를 사용해 고기능 요소를 쉽게 흡수한다는 점이다.그럼 봐봐icon과 관련된 참고
core-icon core-icon-button core-iconset core-iconset-svg 이미 이 근처에 있어 "어떡하면 좋아!?"이렇게 됐죠?불가능한 것도 아니고.그리고 사실 문서에 나타나지 않은 것
core-icons도 반드시 사용해야 하기 때문에 대화는 더욱 복잡하다.위 목록에 core-icons을 넣고 각자 무엇을 해야 하는지 간단하게 설명해 주세요.core-icon이것은 이 글의 주인공입니다. 아이콘을 표시할 때 실제적으로 묘사할 요소입니다.core-iconsPolymer의 아이콘 기능은 바로 사용할 수 있는 아이콘 도형을 많이 제공하지만 이 요소는 기본적인 아이콘 집합을 제공한다.core-icon-button아이콘을 사용하는 단추를 만들려면 이 단추를 사용하십시오.이 문장은 관련이 없다.core-iconset core-icons 등 아이콘 세트를 직접 만들고 싶을 때 사용한다.core-iconset-svg core-iconset에서svg 아이콘 집합을 직접 만들고 싶을 때 사용합니다.차리다
어쨌든 준비부터 시작하자.이 근처의 일은 Polymer를 사용할 때 필수적이기 때문에 매우 중요하다.
우선bower이 필요합니다.bower는 JavaScript의 라이브러리 등 의존 관계를 고려한 토대에서 한 번의 명령만으로 필요한 파일을 로컬로 끌어낼 수 있다.npm의 전면 버전을 고려해 주세요.$ bower install --save Polymer/core-icon
이상은 core-icon 호스트 외에 여러 개의 의존 구성 요소를 다운로드할 것이다.이 중에는 브라우저에서 실행할 수 있는 Polymer 호스트와 webcomponents.js 프로그램 라이브러리도 포함되어 있다.
지원하지 않는 브라우저에서 실행하려면 웹components를 사용하십시오.js를 읽으려면 HTMLlink[rel="import"]에 기술하십시오.<script src="bower_components/webcomponentsjs/webcomponents.min.js/">
그리고 사용하고자 하는 요소core-icon를 읽기link[rel="import"].<link rel="import" href="bower_components/core-icon/core-icon.html">
이렇게 하면 준비할 수 있다.HTMLcore-icon에서 사용할 수 있습니다.
이전 이미지에서 아이콘으로 표시 core-icon에 이미지를 지정하려면 img 태그와 같은 방법src에서 URL을 지정합니다.<core-icon src="star.png"></core-icon>
잘 진행되면 다음 그림이 보일 것입니다.
요점은 원본 이미지의 가로 비율을 1:1로 설정하는 것입니다.기본적으로 치수는 24px 사방으로 자동으로 조정됩니다.큰 시간을 변경하려면 CSS에서 지정합니다.<core-icon src="star.png" style="width:16px; height:16px;"></core-icon>
Polymer에서 제공하는 아이콘 집합 사용
여기까지만 하면 일반적으로 img 라벨을 사용하면 되기 때문에 core-icon를 사용하면 좋은 점이 크지 않다.core-icon의 묘미는 다양한 아이콘 세트 무료 제공이다.
여기에 등장하는 것은 core-icons(복수형식의 s를 주의!)이다.가져오기core-icons를 통해 242개이 아주 좋은 아이콘들를 쉽게 사용할 수 있습니다.
그림을 준비할 생각도 했기 때문에 core-icon 사용할 수 없는 core-icons 아이콘 집합만 가져왔습니다.이것도 같이 가져오세요.<link rel="import" href="bower_components/core-icons/core-icons.html">
그리고 아까 아이콘 목록 페이지에서 사용할 아이콘을 선택하여 icon 속성에 이름을 추가합니다.여기서 사용해 보세요star.<core-icon icon="star"></core-icon>
어때요?간단하네.
실제로 이 아이콘은 SVG로 만든 것이다.SVG의 장점은 치수를 변경해도 앤티앨리어스가 나타나지 않는다는 것입니다.<core-icon icon="star" style="width:160px; height:160px;"></core-icon>
색깔을 바꿀 수 있는 부분도 있어요.<core-icon icon="star" style="width:160px; height:160px; color:yello;"></core-icon>
더 많은 아이콘 그룹을 사용하고 싶습니다!
방금 소개한 아이콘 집합의 일람된 페이지를 아래로 스크롤하면 Av와 Communication 등 다양한 종류의 아이콘을 볼 수 있다.
이 아이콘들을 사용하려면 시간이 좀 더 필요합니다.사용하지 않는 그림을 대량으로 읽는 것은 주파수와 자원의 낭비일 것이다.Polymer의 core-ins에서 필요한 구성 요소만 읽을 수 있습니다.
예를 들어, 위의 이미지에 대한 Device 아이콘을 사용하려는 경우 페이지에 기록된 대로 core-icons에서 읽기device-icons.html를 사용합니다.<link rel="import" href="bower_components/core-icons/device-icons.html">
Device Matrix 테이블의 아이콘을 사용할 수 있습니다.설명할 때 [아이콘 집합 이름 : 아이콘 이름] 을 icon 속성에 추가합니다.다음 예에서 device 아이콘 집합의 access-time 아이콘을 사용합니다.<core-icon icon="device:access-time"></core-icon>
자신만의 아이콘 세트 만들기
필요한 아이콘 집합만 읽고 사용할 수 있다고 썼지만 많은 사람들이 대량의 아이콘에서 200개를 사용하면 낭비가 많다고 생각한다.이들을 위해 core-iconset와core-iconset-svg를 준비했다.이것을 사용하면 자신의 아이콘 집합을 만들 수 있습니다.
여기서는 사용법을 잘 안 쓰지만 꼭 보세요비디오 검색.
총결산
마지막으로, 먼저 이 글을 쓰는 데 사용할 견본 HTML을 붙여라.<!doctype html>
<html>
<head>
<title>Core Icon Demo</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/device-icons.html">
</head>
<body>
<core-icon src="star.png"></core-icon>
<core-icon icon="star"></core-icon>
<core-icon icon="star" style="width: 32px; height: 32px; color: red;"></core-icon>
<core-icon icon="device:access-time"></core-icon>
</body>
</html>
Reference
이 문제에 관하여(Polymer를 사용하여 아이콘 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/agektmr/items/944acb4621de91e9c04f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ bower install --save Polymer/core-icon
<script src="bower_components/webcomponentsjs/webcomponents.min.js/">
<link rel="import" href="bower_components/core-icon/core-icon.html">
core-icon에 이미지를 지정하려면 img 태그와 같은 방법src에서 URL을 지정합니다.<core-icon src="star.png"></core-icon>
요점은 원본 이미지의 가로 비율을 1:1로 설정하는 것입니다.기본적으로 치수는 24px 사방으로 자동으로 조정됩니다.큰 시간을 변경하려면 CSS에서 지정합니다.
<core-icon src="star.png" style="width:16px; height:16px;"></core-icon>
Polymer에서 제공하는 아이콘 집합 사용
여기까지만 하면 일반적으로 img 라벨을 사용하면 되기 때문에 core-icon를 사용하면 좋은 점이 크지 않다.core-icon의 묘미는 다양한 아이콘 세트 무료 제공이다.
여기에 등장하는 것은 core-icons(복수형식의 s를 주의!)이다.가져오기core-icons를 통해 242개이 아주 좋은 아이콘들를 쉽게 사용할 수 있습니다.
그림을 준비할 생각도 했기 때문에 core-icon 사용할 수 없는 core-icons 아이콘 집합만 가져왔습니다.이것도 같이 가져오세요.<link rel="import" href="bower_components/core-icons/core-icons.html">
그리고 아까 아이콘 목록 페이지에서 사용할 아이콘을 선택하여 icon 속성에 이름을 추가합니다.여기서 사용해 보세요star.<core-icon icon="star"></core-icon>
어때요?간단하네.
실제로 이 아이콘은 SVG로 만든 것이다.SVG의 장점은 치수를 변경해도 앤티앨리어스가 나타나지 않는다는 것입니다.<core-icon icon="star" style="width:160px; height:160px;"></core-icon>
색깔을 바꿀 수 있는 부분도 있어요.<core-icon icon="star" style="width:160px; height:160px; color:yello;"></core-icon>
더 많은 아이콘 그룹을 사용하고 싶습니다!
방금 소개한 아이콘 집합의 일람된 페이지를 아래로 스크롤하면 Av와 Communication 등 다양한 종류의 아이콘을 볼 수 있다.
이 아이콘들을 사용하려면 시간이 좀 더 필요합니다.사용하지 않는 그림을 대량으로 읽는 것은 주파수와 자원의 낭비일 것이다.Polymer의 core-ins에서 필요한 구성 요소만 읽을 수 있습니다.
예를 들어, 위의 이미지에 대한 Device 아이콘을 사용하려는 경우 페이지에 기록된 대로 core-icons에서 읽기device-icons.html를 사용합니다.<link rel="import" href="bower_components/core-icons/device-icons.html">
Device Matrix 테이블의 아이콘을 사용할 수 있습니다.설명할 때 [아이콘 집합 이름 : 아이콘 이름] 을 icon 속성에 추가합니다.다음 예에서 device 아이콘 집합의 access-time 아이콘을 사용합니다.<core-icon icon="device:access-time"></core-icon>
자신만의 아이콘 세트 만들기
필요한 아이콘 집합만 읽고 사용할 수 있다고 썼지만 많은 사람들이 대량의 아이콘에서 200개를 사용하면 낭비가 많다고 생각한다.이들을 위해 core-iconset와core-iconset-svg를 준비했다.이것을 사용하면 자신의 아이콘 집합을 만들 수 있습니다.
여기서는 사용법을 잘 안 쓰지만 꼭 보세요비디오 검색.
총결산
마지막으로, 먼저 이 글을 쓰는 데 사용할 견본 HTML을 붙여라.<!doctype html>
<html>
<head>
<title>Core Icon Demo</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/device-icons.html">
</head>
<body>
<core-icon src="star.png"></core-icon>
<core-icon icon="star"></core-icon>
<core-icon icon="star" style="width: 32px; height: 32px; color: red;"></core-icon>
<core-icon icon="device:access-time"></core-icon>
</body>
</html>
Reference
이 문제에 관하여(Polymer를 사용하여 아이콘 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/agektmr/items/944acb4621de91e9c04f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<link rel="import" href="bower_components/core-icons/core-icons.html">
<core-icon icon="star"></core-icon>
<core-icon icon="star" style="width:160px; height:160px;"></core-icon>
<core-icon icon="star" style="width:160px; height:160px; color:yello;"></core-icon>
방금 소개한 아이콘 집합의 일람된 페이지를 아래로 스크롤하면 Av와 Communication 등 다양한 종류의 아이콘을 볼 수 있다.
이 아이콘들을 사용하려면 시간이 좀 더 필요합니다.사용하지 않는 그림을 대량으로 읽는 것은 주파수와 자원의 낭비일 것이다.Polymer의 core-ins에서 필요한 구성 요소만 읽을 수 있습니다.
예를 들어, 위의 이미지에 대한 Device 아이콘을 사용하려는 경우 페이지에 기록된 대로
core-icons에서 읽기device-icons.html를 사용합니다.<link rel="import" href="bower_components/core-icons/device-icons.html">
: 아이콘 이름] 을 icon 속성에 추가합니다.다음 예에서 device 아이콘 집합의 access-time 아이콘을 사용합니다.<core-icon icon="device:access-time"></core-icon>
자신만의 아이콘 세트 만들기
필요한 아이콘 집합만 읽고 사용할 수 있다고 썼지만 많은 사람들이 대량의 아이콘에서 200개를 사용하면 낭비가 많다고 생각한다.이들을 위해 core-iconset와core-iconset-svg를 준비했다.이것을 사용하면 자신의 아이콘 집합을 만들 수 있습니다.
여기서는 사용법을 잘 안 쓰지만 꼭 보세요비디오 검색.
총결산
마지막으로, 먼저 이 글을 쓰는 데 사용할 견본 HTML을 붙여라.<!doctype html>
<html>
<head>
<title>Core Icon Demo</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/device-icons.html">
</head>
<body>
<core-icon src="star.png"></core-icon>
<core-icon icon="star"></core-icon>
<core-icon icon="star" style="width: 32px; height: 32px; color: red;"></core-icon>
<core-icon icon="device:access-time"></core-icon>
</body>
</html>
Reference
이 문제에 관하여(Polymer를 사용하여 아이콘 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/agektmr/items/944acb4621de91e9c04f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
마지막으로, 먼저 이 글을 쓰는 데 사용할 견본 HTML을 붙여라.
<!doctype html>
<html>
<head>
<title>Core Icon Demo</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-icons/device-icons.html">
</head>
<body>
<core-icon src="star.png"></core-icon>
<core-icon icon="star"></core-icon>
<core-icon icon="star" style="width: 32px; height: 32px; color: red;"></core-icon>
<core-icon icon="device:access-time"></core-icon>
</body>
</html>
Reference
이 문제에 관하여(Polymer를 사용하여 아이콘 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/agektmr/items/944acb4621de91e9c04f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
