안녕!
내 웹 구성 요소의 오픈 소스 컬렉션을 만들려고 합니다. 인스타그램 위젯을 만드는 것부터 시작했습니다. 프로필의 최신 사진을 보여줍니다.

아이디어는 무거운 WordPress 플러그인을 대체하거나 반응, 각도 및 vuejs에서도 작동하는 (동일한) 구성 요소를 갖기 위해 웹 구성 요소의 생태계를 만드는 것입니다.

자원: [ DEMO ] [ ] [ ]

Webcomponents are the future for me. They allow you to replace wordpress plugins, iframe, invasive javascript libraries. Webcomponents are native components that we also have on react or angular but with better optimized by browsers.

💡 기능

[✔️] 사용하기 쉬운

[✔️] MIT 라이선스

[✔️] 작업: Browserify/Webpack/ReactJS/Angular/Wordpress

[✔️] 번역: 🇬🇧 🇮🇹 🇵🇱 (도와주세요 ❤️)

👔 스크린샷

사진 출처
인스타그램 계정:

🚀 설치(웹)

페이지에 html 코드를 추가하고 @ptkdev를 Instagram 사용자 이름으로 바꿉니다.

<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>

yourpage에 javascript가 필요합니다(</body> 이전):

<script src="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-instagram-widget@latest/dist/lib/en/instagram-widget.min.js"></script>

🧰 옵션 / 속성

모수
설명
가치
기본값
이후 사용 가능


사용자 이름
인스타그램 사용자 이름 설정
@가 있거나 없는 Instagram 사용자 이름@ptkdevv1.0.0

품목 제한
최대 사진 수 설정
번호: 0에서 12까지
9v1.1.0

그리드
그리드 종횡비 설정
1x1 , 2x2 , 3x3 등... 또는 responsiveresponsivev1.1.0

이미지 너비
이미지 너비 설정(참고: responsive와 다른 그리드가 이 값을 덮어씁니다)
길이 단위: 100% , 100px , 100pt100%v1.1.0

이미지 높이
이미지 높이 설정
길이 단위: 100% , 100px , 100100%v1.1.0

경계 간격
이미지 주변의 간격 설정
길이 단위: 5% , 5px , 5pt2pxv2.1.0

경계 모서리
모서리의 테두리 반경 설정: 0: 정사각형/15: 둥글게/100: 원형
번호: 0에서 100까지
5v2.1.0

은닉처
캐시 활성화/비활성화
enabled/disabledenabledv2.1.0

💫 라이선스

코드 및 기여에는 MIT 라이센스가 있습니다.

이미지 및 로고에는 CC BY-NC 4.0 라이선스(Freepik 프리미엄 라이선스)가 있습니다.

문서 및 번역에는 CC BY 4.0 라이센스가 있습니다.

❤️ 감사합니다! 피드백을 남겨주세요!