移动标签条和角度形式之间的差异

Disparity between Mobile Tabstrip and Angular Form

本文关键字:之间 标签 移动      更新时间:2023-09-26

对于从 Kendo UI 站点获取的 Kendo Mobile TabStrip 演示,默认示例移动选项卡是以下标记:

<div data-role="tabstrip" data-selected-index="1">
  <a data-icon="contacts">foo</a>
  <a data-icon="contacts">bar</a>
  <a data-icon="info">baz</a>
</div>

但是AngularJS等价物是:

<kendo-mobile-view id="tabstrip-foo" k-title="'foo'" k-layout="'mobile-tabstrip'">
</kendo-mobile-view>
<kendo-mobile-view id="tabstrip-bar" k-title="'bar'" k-layout="'mobile-tabstrip'">
</kendo-mobile-view>
<kendo-mobile-view id="tabstrip-baz" k-title="'baz'" k-layout="'mobile-tabstrip'">
</kendo-mobile-view>

为什么格式之间存在差异?

不确定您正在查看哪个演示,但那里的 Angular 元素定义了选项卡条导航到的视图,而不是选项卡条本身。

这个演示有 HTML:

<div data-role="footer">
    <div data-role="tabstrip">
        <a href="#tabstrip-profile" data-icon="contacts">Profile
        </a><a href="#tabstrip-sales" data-icon="history">Sales
        </a><a href="#tabstrip-rating" data-icon="favorites">Rating
        </a><a href="#tabstrip-settings" data-icon="settings">Settings</a>
    </div>
</div>

或者角度版本:

<kendo-mobile-footer>
    <kendo-mobile-tab-strip>
        <a href="#tabstrip-profile" data-icon="contacts">Profile
        </a><a href="#tabstrip-sales" data-icon="history">Sales
        </a><a href="#tabstrip-rating" data-icon="favorites">Rating
        </a><a href="#tabstrip-settings" data-icon="settings">Settings</a>
    </kendo-mobile-tab-strip>
</kendo-mobile-footer>