ASP。. NET Core TabStrip概述

面向ASP的Telerik UI。网络核心Ninja image

TabStrip是面向ASP的Telerik UI。网络核心一个专业级的UI库,包含 110+ 组件,用于构建现代和功能丰富的 应用程序。要想尝试一下,注册一个30天的免费试用。

Telerik UI TabStrip TagHelper和HtmlHelper的ASP。网络核心are server-side wrappers for the Kendo UI TabStrip widget.

TabStrip显示带有相关内容的选项卡集合。它由表示选项卡的无序项列表和选项卡的集合组成div元素,其中包含每个选项卡的内容。

初始化TabStrip

下面的示例演示如何定义TabStrip。

@(Html.Kendo(). tabstrip (). name ("tabstrip") . items (tabstrip => {tabstrip. add (). text ("Paris") . selected (true) . content (@ 

巴黎的阴雨天气。

);tabstrip.Add(). text ("Sofia") . content (@

Sofia的晴朗天气。

);tabstrip.Add(). text ("Moscow") . content (@

莫斯科多云天气。

);tabstrip.Add(). text ("Sydney") . content (@

悉尼的阴雨天气。

);}))
    

巴黎阴雨天气。

Sofia天气晴朗。

莫斯科阴天。

悉尼的阴雨天气。< / p > < / div > < /内容> < / tabstrip-item > < /物品> < / kendo-tabstrip >

public class TabStripController: Controller {public IActionResult Index() {return View();}}

基本配置

下面的示例演示了TabStrip的基本配置。

@(Html.Kendo(). tabstrip (). name ("tabstrip") . tabposition (TabStripTabPosition.Bottom) . collapsible (true) . navigatable (false) . animation (animation => {animation. animation => {打开(config => {config. fade (FadeDirection.In);});}) . items (items => {items. add (). text ("One") . content (@ 

Lorem ipsum dolor - sit - met, consectetur adipisced精英)。> < / p > < /文本);items.Add(). text ("Two") . content (@

Mauris pulvinar molestie accumsan。> < / p > < /文本);}))