Instagramウィジェット:私の最初のウェブコンポーネント

2510 ワード
instagram webcomponents webdev javascript テキストリンク
こんにちは!
WebComponentの独自のオープンソースコレクションを作成しようとしています.私はInstagramウィジェットを作成することから始めました:あなたのプロフィールの最新の写真を示します.
このアイデアは、重いWordPressプラグインを置き換えるためにWebコンポーネントの生態系を作成したり、反応、角度、および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/角/ワードプレス
  • ✔️] 翻訳🇬🇧 🇮🇹 🇵🇱 助けて❤️)

    • 👔 スクリーンショット


    写真から
    Instagramアカウント:

    🚀 インストール

  • あなたのページにHTMLコードを追加します.
    • <instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
  • にはJavaScriptが必要です( @ptkdev以前).
    • <script src="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-instagram-widget@latest/dist/lib/en/instagram-widget.min.js"></script>

    🧰 オプション/属性


    パラメータ
    説明
    値
    デフォルト値
    利用可能
    ユーザー名
    Instramを設定する
    あなたのInstagramユーザー名</body>V 10.0
    アイテム制限
    写真の最大数を設定する
    番号:@ptkdevから0まで12V 11.0
    グリッド
    グリッドのアスペクト比を設定する9、1x1、2x2など.または3x3responsiveV 11.0
    イメージ幅
    画像の幅を設定する
    長さ単位:responsive、responsive、100%100pxV 11.0
    イメージ高さ
    画像の高さを設定する
    長さ単位:100pt、100%、100%100pxV 11.0
    ボーダー間隔
    画像の間隔を設定する
    長さ単位:100、100%、5%5pxV 21.0
    ボーダーコーナー
    コーナーの境界半径を0 :正方形/15 :丸め/100 :円
    番号:5ptから2pxまで0V 21.0
    キャッシュ
    キャッシュを有効/無効にする100/5enabledV 21.0

    💫 許可

  • コードと貢献は、MIT許可を持ちます
  • イメージとロゴは、CC BNC
  • 文書と翻訳は、CC

    • 自由気ままに ❤️ ありがとうフィードバックを残す！

    [Vue]インスタンスの作成
    プルリクにコメントするときにチェックボックスを設置するルール