Sync with Kendo UI Professional

Author: User Jenkins

docs-aspnet/html-helpers/navigation/tabstrip/animation.md

@@ -0,0 +1,42 @@
+---
+title: Animations
+page_title: Animations
+description: "Learn how to control the animations in the Telerik UI TabStrip HtmlHelper for {{ site.framework }}."
+slug: htmlhelpers_tabstrip_animations_aspnetcore
+position: 8
+---
+
+# Animations
+
+By default, the TabStrip uses animations to reveal the content of the tabs. You can modify these animations through the `Animation` configuration option.
+
+The following example demonstrates how to configure the TabStrip animation:
+
+```
+@(Html.Kendo().TabStrip()
+    .Name("tabstrip")
+    .Animation(animation =>
+    {
+        animation.Enable(true);
+        animation.Open(config =>
+        {
+            config.Expand(ExpandDirection.Vertical);
+            config.Fade(FadeDirection.In);
+            config.Duration(AnimationDuration.Slow);
+        });
+        animation.Close(config =>
+        {
+            config.Reverse(true);
+        });
+    })
+    .Items(tabstrip =>
+    {
+        // add TabStrip items
+    })
+    )
+```
+
+## See Also
+
+* [Animations in the TabStrip HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/tabstrip/animation)
+* [Server-Side API](/api/tabstrip)

docs-aspnet/html-helpers/navigation/tabstrip/images.md

@@ -0,0 +1,75 @@
+---
+title: Images
+page_title: Images
+description: "Learn how to include images and sprite icons in the Telerik UI TabStrip HtmlHelper for {{ site.framework }}."
+slug: htmlhelpers_tabstrip_images_aspnetcore
+position: 7
+---
+
+# Images 
+
+The TabStrip allows you to include images or sprite icons in its tabs.
+
+## Images
+
+To include images in the Telerik UI for {{ site.framework }} TabStrip items, use the `.ImageUrl()` configuration option and pass the image Url as a parameter:
+
+```
+@(Html.Kendo().TabStrip()
+        .Name("tabstrip-images")
+        .Items(tabstrip =>
+        {
+            tabstrip.Add().Text("Baseball")
+                .ImageUrl(Url.Content("~/shared/icons/sports/baseball.png"))
+                .Content(@<text>
+                    Baseball content
+                  </text>);
+            tabstrip.Add().Text("Football")
+                .ImageUrl(Url.Content("~/shared/icons/sports/football.png"))
+                .Content(@<text>
+                    Football content
+                  </text>);
+            tabstrip.Add().Text("Basketball")
+                .ImageUrl(Url.Content("~/shared/icons/sports/basketball.png"))
+                .Content(@<text>
+                    Basketball content
+                  </text>);
+        })
+    )
+```
+
+## Sprites
+
+To include sprites in the Telerik UI for {{ site.framework }} TabStrip items, use the `.SpriteCssClasses()` configuration option and specify the sprite CSS class:  
+
+```
+@(Html.Kendo().TabStrip()
+          .Name("tabstrip-sprites")
+          .Items(tabstrip =>
+          {
+              tabstrip.Add().Text("Brazil")
+                  .SpriteCssClasses("brazilFlag")
+                  .Content(@<text>
+                    Brazil, officially the Federative Republic of Brazil, is the largest country in South America. 
+                  </text>);
+
+              tabstrip.Add().Text("India")
+                  .SpriteCssClasses("indiaFlag")
+                  .Content(@<text>
+                        India, officially the Republic of India, is a country in South Asia. 
+                  </text>);
+
+              tabstrip.Add().Text("Netherlands")
+                  .SpriteCssClasses("netherlandsFlag")
+                  .Content(@<text>
+                        The Netherlands is a constituent country of the Kingdom of the Netherlands, located mainly in North-West Europe and with several islands in the Caribbean. 
+                  </text>);
+          })
+          .SelectedIndex(0)
+    )
+```
+
+## See Also
+
+* [Images in the TabStrip HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/tabstrip/images)
+* [TabStrip Server-Side API](/api/tabstrip)

docs-aspnet/html-helpers/navigation/tabstrip/overview.md

@@ -109,6 +109,8 @@ The following example demonstrates the basic configuration of the TabStrip HtmlH
 
 * [Tabs]({% slug htmlhelpers_tabstrip_aspnetcore_tabs %})
 * [Tab content]({% slug htmlhelpers_tabstrip_aspnetcore_content %})
+* [Animation Effects]({% slug htmlhelpers_tabstrip_animations_aspnetcore %})
+* [Images]({% slug htmlhelpers_tabstrip_images_aspnetcore %})
 
 ## Events
 

docs-aspnet/html-helpers/navigation/tabstrip/tabs.md

@@ -10,6 +10,34 @@ position: 2
 
 The TabStrip provides advanced options for configuring its tabs.
 
+## Tabs Positioning
+
+The TabStrip API provides the `.TabPosition()`[/api/Kendo.Mvc.UI.Fluent/TabStripBuilder#tabpositionkendomvcuitabstriptabposition] configuration option that allows you to set the position of the tabs. You can position the tabs to the top, left, right or bottom of the TabStrip via the [`TabStripTabPosition`](/api/Kendo.Mvc.UI/TabStripTabPosition)
+
+The following example demonstrates how to position the TabStrip tabs to the right:
+
+```
+@(Html.Kendo().TabStrip()
+    .Name("tabstrip")
+    .TabPosition(TabStripTabPosition.Right)
+    .Items(items =>
+    {
+        items.Add().Text("One")
+                .Content(@<text>
+                    <p>Tab One</p>
+                </text>);
+        items.Add().Text("Two")
+                .Content(@<text>
+                    <p>Tab Two</p>
+                </text>);
+        items.Add().Text("Three")
+                .Content(@<text>
+                    <p>Tab Three</p>
+                </text>);
+    })
+)
+```
+
 ## Dynamic Tabs
 
 The TabStrip API provides methods for dynamically adding or removing TabStrip bars.