Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save chrisobriensp/9c26007e45753e82be292541a6ff5d49 to your computer and use it in GitHub Desktop.
Save chrisobriensp/9c26007e45753e82be292541a6ff5d49 to your computer and use it in GitHub Desktop.
An extract showing the Choice Group control you can use in SPFx web part properties (from getPropertyPaneConfiguration() method) - used here with images.
PropertyPaneChoiceGroup('FileType', {
label: 'File type:',
options: [
{ key: 'Word', text: 'Word',
imageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_32x1.png',
imageSize: { width: 32, height: 32 },
selectedImageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/docx_32x1.png'
},
{ key: 'Excel', text: 'Excel',
imageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_32x1.png',
imageSize: { width: 32, height: 32 },
selectedImageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/xlsx_32x1.png'
},
{ key: 'PowerPoint', text: 'PowerPoint',
imageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_32x1.png',
imageSize: { width: 32, height: 32 },
selectedImageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/pptx_32x1.png'
},
{ key: 'OneNote', text: 'OneNote',
imageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_32x1.png',
imageSize: { width: 32, height: 32 },
selectedImageSrc: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png/one_32x1.png'
}
]
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment