以下の内容はhttps://mynote365.hatenadiary.com/entry/2019/08/16/190000より取得しました。


【SPFx】PnP Controlsを利用する

f:id:tecchan365:20190815171512p:plain

PnP Controlsを利用して、プロパティペインを作成する方法です。

@pnp/spfx-property-controls をインストール

Webパーツのソリューションを開き、以下のコマンドを実行します。

npm install @pnp/spfx-property-controls --save --save-exact

@pnp/spfx-property-controls がインストールされます。

f:id:tecchan365:20190815163418p:plain

@pnp/spfx-property-controls を利用する

Webパーツクラスのファイルを開き、モジュールをインポートします。

f:id:tecchan365:20190815164148p:plain

getPropertyPaneConfiguration() メソッドに、表示するコントロールを入力します。

f:id:tecchan365:20190815164636p:plain

gulp serve で実行してみると、カラーパレットが表示されていることが確認できます。

f:id:tecchan365:20190815164755p:plain

以上、PnP Controls を利用する方法でした。

カラーパレットの他にも、さまざまなコントロールが用意されています。
詳細は、下記を参照ください。

sharepoint.github.io

github.com




以上の内容はhttps://mynote365.hatenadiary.com/entry/2019/08/16/190000より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14