sp-dev-fx-webparts/samples/section-backgrounds
Hugo Bernier 411f1b1eca Changed authors to contributors 2023-02-18 22:58:44 -05:00
..
.devcontainer Added 1.7.x containers 2022-02-16 01:12:30 -05:00
assets Changed docs links to learn 2022-10-24 09:42:45 -04: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 Changed authors to contributors 2023-02-18 22:58:44 -05: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://learn.microsoft.com/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

Contributors

  • 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.