sp-dev-fx-webparts/samples/section-backgrounds
petkir 71f6469fa0 URL dev.office.com to docs.microsoft.com 2020-06-09 09:09:22 +02:00
..
assets Added section background examples 2019-03-13 12:11:37 +01:00
config Added section background examples 2019-03-13 12:11:37 +01:00
src Font Color to Background Color 2019-08-16 16:12:55 -04:00
.gitignore Added section background examples 2019-03-13 12:11:37 +01:00
.yo-rc.json Added section background examples 2019-03-13 12:11:37 +01:00
README.md URL dev.office.com to docs.microsoft.com 2020-06-09 09:09:22 +02:00
gulpfile.js Added section background examples 2019-03-13 12:11:37 +01:00
package.json Added section background examples 2019-03-13 12:11:37 +01:00
tsconfig.json Added section background examples 2019-03-13 12:11:37 +01:00
tslint.json Added section background examples 2019-03-13 12:11:37 +01:00

README.md

Supporting section backgrounds in your web parts

Summary

These samples show how to implement support for section backgrounds in your web parts.

There are 3 web parts in this solution showing how to implement support for a background and 1 web part that shows what the fallback scenario looks like.

For more details on the implementation, check out the documentation at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/supporting-section-backgrounds

A basic web part

This basic (no framework) web part implements support for backgrounds.

Basic Web Part

In the 2 column section above we defined a background color and inserted the first example web part in the left column. It picks up the background color and uses the right foreground color for text.

A React based web part

This React based web part implements support for backgrounds, alike the basic the web part.

React Web Part

A web part using the Office UI Framework

This web part implements a Office UI button which is inheriting its colors correctly from the theme

Office UI Component Web Part

Building the code

Applies to

Solution

Solution Author(s)
section-background-examples Microsoft

Version history

Version Date Comments
1.0.0 March 13, 2019 Initial release

Disclaimer

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.