Skip to content

Latest commit

 

History

History
69 lines (36 loc) · 2.34 KB

design-patterns-controls-PricingControl.md

File metadata and controls

69 lines (36 loc) · 2.34 KB

PricingControl

Basics

The PricingControl enables the user to see the current pricing information and navigate to a separate experience to change pricing options.

When to use

Use the PricingControl so the user can understand the currently selected pricing option and navigate to a separate experience to compare and select among a set pricing options.

Best practices

Do

  • Use the PricingControl when your pricing selection is moderately complex and the user needs to compare multiple facets of pricing to make a good selection.
  • Set the infoBalloonContent to concise, helpful text with a link to learn
  • Use the label option to provide a helpful name for the control.
  • Use the validations option to help the user input the correct text if a specific format is required

Don't

  • Don't use the PricingControl if the pricing selection is a simple choice among a few options. Consider DropDown or RadioButtons for simple pricing choices.

Developer tips and tricks

  • To display HTML in the infoBalloonContent use this code

infoBalloonContent: { htmlTemplate:"Sample label
infoBalloonContent should explain concepts and
can include a link to learn more.Learn more about infoBalloon", viewModel: {}, }

Interactive control and sample source code

Go to the playground site to use the latest control and get source code for your project. Learn more about playground.

Related info