docs(SegmentedControl): Compare with ButtonGroup and TabStrip (#3700)

Author: dimodi

_contentTemplates/segmentedcontrol/notes.md

@@ -0,0 +1,9 @@
+#comparison-with-buttongroup-tabstrip
+
+The ButtonGroup, SegmentedControl, and TabStrip are similar and even inter-changeable in some aspects. The major differences between these components are:
+
+* The [ButtonGroup](slug:buttongroup-overview) supports single and multiple selection. The SegmentedControl and TabStrip can only have one selected (active) item.
+* The [SegmentedControl](slug:segmentedcontrol-overview) is a databound component. The ButtonGroup and TabStrip use declarative items as child components.
+* The [TabStrip](slug:components/tabstrip/overview) renders content containers and manages their visibility out-of-the-box. The ButtonGroup and SegmentedControl can also integrate with separate content containers, but this must rely on the component events and a custom implementation.
+
+#end

components/buttongroup/overview.md

@@ -16,7 +16,9 @@ The ButtonGroup component is a container for [regular and toggle buttons](slug:b
 
 The ButtonGroup component lets you [select one or more toggle buttons](slug:buttongroup-selection), and respond to the [selection and click events](slug:buttongroup-events). The buttons inside fill up the container, match the styling according to the [chosen theme](slug:themes-overview) and provide the regular button features like images and icons and the other parameters and attributes.
 
->tip Compared to the SegmentedControl, the ButtonGroup is a markup-based component — you declare each button explicitly as a child component and can configure the component for single or multiple selection. The [SegmentedControl](slug:segmentedcontrol-overview) is a data-bound component — it renders items from a `Data` collection and allows only single selection.
+## Comparison with SegmentedControl and TabStrip
+
+@[template](/_contentTemplates/segmentedcontrol/notes.md#comparison-with-buttongroup-tabstrip)
 
 ## Creating Blazor ButtonGroup
 

components/segmentedcontrol/overview.md

@@ -15,6 +15,10 @@ The <a href="https://www.telerik.com/blazor-ui/segmented-control" target="_blank
 
 >tip Compared to the ButtonGroup, the SegmentedControl is a data-bound component — it renders items from a `Data` collection and allows only single selection. The [ButtonGroup](slug:buttongroup-overview) is markup-based — you declare each button explicitly as a child component and can configure the component for single or multiple selection.
 
+## Comparison with ButtonGroup and TabStrip
+
+@[template](/_contentTemplates/segmentedcontrol/notes.md#comparison-with-buttongroup-tabstrip)
+
 ## Creating Blazor SegmentedControl
 
 1. Use the `<TelerikSegmentedControl>` tag.

components/tabstrip/overview.md

@@ -12,6 +12,10 @@ components: ["tabstrip"]
 
 The <a href = "https://www.telerik.com/blazor-ui/tabstrip" target = "_blank">Blazor TabStrip component</a> displays a collection of tabs, containing associated content, which enable the user to switch between different views inside a single component.
 
+## Comparison with ButtonGroup and SegmentedControl
+
+@[template](/_contentTemplates/segmentedcontrol/notes.md#comparison-with-buttongroup-tabstrip)
+
 ## Creating Blazor TabStrip
 
 1. Use the `<TelerikTabStrip>` tag.