honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-03-02 01:39:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
flowerbot 2022-08-01 11:20:33 +10:00
parent f67f819eb7
commit 2319107305
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -5,6 +5,9 @@
Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011). Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).
Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com/package/property-pane-portal) and cuz I want to eventually build in a dynamic palette generator/css reader for my web parts. Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com/package/property-pane-portal) and cuz I want to eventually build in a dynamic palette generator/css reader for my web parts.
![property pane view](images/palettePickerWebPart.gif)
![after save and refresh](images/palettePickerWebPartAfterSaveAndRefresh.gif)
## Used SharePoint Framework Version ## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.13-green.svg) ![version](https://img.shields.io/badge/version-1.13-green.svg)
@ -18,7 +21,7 @@ Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com
## Prerequisites ## Prerequisites
> Any special pre-requisites? The standard stoic perserverance required for spFx development.
## Solution ## Solution
@ -46,27 +49,25 @@ Version|Date|Comments
- **npm install** - **npm install**
- **gulp serve** - **gulp serve**
> Include any additional steps as needed.
## Features ## Features
Next step is see if I can make prism work with it (as per inspiring example), and then to have the generated colors applied to web part elements. Multi-parameter sliders* in property pane from [react-range](https://www.npmjs.com/package/react-range), dynamic colour updating, css snippet generation, apply colours to MS dropdown component options.
![property pane view](images/palettePickerWebPart.gif) * PnP - please consider :)
![after save and refresh](images/palettePickerWebPartAfterSaveAndRefresh.gif)
This web part illustrates the following concepts: This web part illustrates the following concepts:
- custom property pane - custom property pane
- dynamic css in spFx property pane (and later beyond) - dynamic css in spFx property pane
- custom css colour on dropdown options - custom css colour on dropdown options
> Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.
> Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp. > Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.
## References ## References
- [Property Pane Portal](https://blog.pathtosharepoint.com/2021/07/29/introducing-the-property-pane-portal/) (thank you Christophe!)
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant) - [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview) - [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis) - [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)