With the SharePoint Framework it is fairly easy to configure the properties you want to expose in the property pane of your web part. All you have to do is specify each of the property pane fields you want to show in the propertyPaneSettings function underneath the groupFields property.
There are various types of property pane fields like text, dropdown, toggle, checkbox, and if that is not enough or you need a special one, you have the ability to build it yourself.
When you are defining your properties, they will be immediately visible in the web part property pane. In most cases that is the behavior you want, but in my case, I wanted to be able to toggle between settings.
Let me give you an example so you can see what I mean. In my POC search web part, I have a dropdown that will be visible the first time you open the property pane:
This dropdown is used to select an internal template. I also have the option to show data from an external template, but I did not want to show both options. So what I did, I added the “use an external template” toggle. One you toggle this setting, the dropdown will be gone and a textbox appears.
This example works with a toggle, but you can also achieve this when you select a specific property in the dropdown or something else.
I achieved it with the following code:
Have fun coding with the SharePoint Framework!