honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/js-propertycontrols-svg/README.md

69 lines
2.9 KiB
Markdown
Raw Normal View History

Update README.md
2020-11-08 23:11:07 -05:00
# Dynamic Scalable Vector Graphics (SVG) image using propertie
Js property controls svg (#364) * Initial Webpart generation * Added Localization Strings for Color Properties * Added PnP SPFx Property Controls package * Added SVG and color properties * Added height property and reset button * Icon and Name update * Additional Comments * Updated ReadMe
2017-12-01 09:40:23 -05:00
## Summary
Added links to issue templates
2021-04-26 02:08:59 -04:00
An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.
Js property controls svg (#364) * Initial Webpart generation * Added Localization Strings for Color Properties * Added PnP SPFx Property Controls package * Added SVG and color properties * Added height property and reset button * Icon and Name update * Additional Comments * Updated ReadMe
2017-12-01 09:40:23 -05:00
![picture of the web part in action](./assets/js-propertycontrols-svg.gif)
Added links to issue templates
2021-04-26 02:08:59 -04:00
Updated compatiblity matrix
2021-11-07 01:43:55 -04:00
# Compatibility
![SPFx 1.3.4](https://img.shields.io/badge/SPFx-1.3.4-green.svg)
![Node.js v6](https://img.shields.io/badge/Node.js-v6-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Compatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
Js property controls svg (#364) * Initial Webpart generation * Added Localization Strings for Color Properties * Added PnP SPFx Property Controls package * Added SVG and color properties * Added height property and reset button * Icon and Name update * Additional Comments * Updated ReadMe
2017-12-01 09:40:23 -05:00
## Which PnP SPFx controls are being used in this sample?
Added links to issue templates
2021-04-26 02:08:59 -04:00
Changed master to main
2021-05-02 15:04:59 -04:00
* [PropertyFieldSpinButton](https://github.com/pnp/sp-dev-fx-property-controls/wiki/PropertyFieldSpinButton)
* [PropertyFieldColorPicker](https://github.com/pnp/sp-dev-fx-property-controls/wiki/PropertyFieldColorPicker)
Js property controls svg (#364) * Initial Webpart generation * Added Localization Strings for Color Properties * Added PnP SPFx Property Controls package * Added SVG and color properties * Added height property and reset button * Icon and Name update * Additional Comments * Updated ReadMe
2017-12-01 09:40:23 -05:00
## Applies to
URL dev.office.com to docs.microsoft.com
2020-06-09 03:09:22 -04:00
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
Changed master to main
2021-05-02 15:04:59 -04:00
* [sp-dev-fx-property-controls](https://github.com/pnp/sp-dev-fx-property-controls)
Js property controls svg (#364) * Initial Webpart generation * Added Localization Strings for Color Properties * Added PnP SPFx Property Controls package * Added SVG and color properties * Added height property and reset button * Icon and Name update * Additional Comments * Updated ReadMe
2017-12-01 09:40:23 -05:00
* [PnP Man](https://github.com/thechriskent/PnPMan)
## Solution
Solution|Author(s)
--------|---------
js-propertycontrols-svg | Chris Kent ([thechriskent.com](https://thechriskent.com), [@thechriskent](https://twitter.com/thechriskent))
## Version history
Version|Date|Comments
-------|----|--------
1.0|November 12, 2017|Initial release
## Disclaimer
Added links to issue templates
2021-04-26 02:08:59 -04:00
Js property controls svg (#364) * Initial Webpart generation * Added Localization Strings for Color Properties * Added PnP SPFx Property Controls package * Added SVG and color properties * Added height property and reset button * Icon and Name update * Additional Comments * Updated ReadMe
2017-12-01 09:40:23 -05:00
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `gulp serve`
- Customize your PnP Hero!
## Features
Displays a Scalable Vector Graphics (SVG) image of the SharePoint Patterns and Practices Super Hero and allows users to customize the colors used and the size of the image through the use of PnP SPFx Property Controls (SpinButton & ColorPicker).
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- Rendering an SVG image
- Using a PropertyFieldSpinButton control
- Using a PropertyFieldColorPicker control
![Screenshot](./assets/js-propertycontrols-svg.png)
Update README.md
2020-11-08 23:11:07 -05:00
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-propertycontrols-svg" />