Question

我正在使用余烬版本的ivy-tabs填充我的标签页。当使用条件添加类时出现错误im时，该选项卡将以红色显示。但是当颜色更改时，标签也会更改。我需要停止此操作或将其加载到默认选项卡中。我尝试了他们的文档和发行说明，对此一无所知。

代码如下

{{#ivy-tabs selection=selection  as |tabs|}}

    <div class="edit_profile">
      <div class="modal--content--sidebar">
        {{#tabs.tablist  as |tablist|  }}
          <ul role="presentation" class="modal_tabs">
            <li role="presentation" class="modal_tabs--item ivy-tabs-tab">
              {{#unless errorTabs.personal}}
                {{#tablist.tab "TabA" class="modal_tabs--item_a ivy-tabs-tab" on-select=(action (mut selection))}}Personal{{/tablist.tab}}
              {{else}}
                {{#tablist.tab "TabA" class="modal_tabs--item_a ivy-tabs-tab edit_profile--tab_error" on-select=(action (mut selection))}}Personal{{/tablist.tab}}
              {{/unless}}
            </li>
            <li role="presentation" class="modal_tabs--item ivy-tabs-tab">
              {{#unless errorTabs.contact}}
                {{#tablist.tab "TabB" class="modal_tabs--item_a"  on-select=(action (mut selection))}}Contact{{/tablist.tab}}
              {{else}}
                {{#tablist.tab "TabB" class="modal_tabs--item_a edit_profile--tab_error"  on-select=(action (mut selection))}}Contact{{/tablist.tab}}
              {{/unless}}
            </li>
            <li role="presentation" class="modal_tabs--item ivy-tabs-tab  " >
              {{#unless errorTabs.professional}}
                {{#tablist.tab "TabC" class="modal_tabs--item_a" on-select=(action (mut selection))}}Professional{{/tablist.tab}}
              {{else}}
                {{#tablist.tab "TabC" class="modal_tabs--item_a edit_profile--tab_error" on-select=(action (mut selection))}}Professional{{/tablist.tab}}
              {{/unless}}
            </li>
          </ul>
        {{/tabs.tablist}}
      </div>

      <div class="modal--content--container">

        <div class="modal--content--scroll_container">
          {{#tabs.tabpanel "TabA" }}

            {{something here}}

          {{/tabs.tabpanel}}

          {{#tabs.tabpanel "TabB" }}

            {{something here}}

          {{/tabs.tabpanel}}

          {{#tabs.tabpanel "TabC" }}

            {{something here}}

          {{/tabs.tabpanel}}

        </div>


  {{/ivy-tabs}}

Answer 1

在控制器

handleTabs:function(selected){

      this.set('selection',selected);
    },

在模板

中

 {{#ivy-tabs selection=selection  as |tabs|}}

        <div class="edit_profile">
          <div class="modal--content--sidebar">
            {{#tabs.tablist  as |tablist|  }}
              <ul role="presentation" class="modal_tabs">
                <li role="presentation" class="modal_tabs--item ivy-tabs-tab">
                    {{#tablist.tab "TabA" class=tabAstyles on-select=(action "handleTabs")}}Personal{{/tablist.tab}}
                </li>
                <li role="presentation" class="modal_tabs--item ivy-tabs-tab">
                    {{#tablist.tab "TabB" class=tabBstyles on-select=(action "handleTabs")}}Contact{{/tablist.tab}}
                </li>
                <li role="presentation" class="modal_tabs--item ivy-tabs-tab  " >
                    {{#tablist.tab "TabC" class=tabCstyles on-select=(action "handleTabs")}}Professional{{/tablist.tab}}
                </li>
              </ul>
            {{/tabs.tablist}}
          </div>

          <div class="modal--content--container">

            <div class="modal--content--scroll_container">
              {{#tabs.tabpanel "TabA" }}

                {{SOMETHIING}}

              {{/tabs.tabpanel}}

              {{#tabs.tabpanel "TabB" }}

                {{SOMETHIING}}

              {{/tabs.tabpanel}}

              {{#tabs.tabpanel "TabC" }}

                {{SOMETHIING}}

              {{/tabs.tabpanel}}

            </div>


      {{/ivy-tabs}}

如何选择常春藤选项卡的默认选项卡

1 个答案: