как выбрать вкладку ivy-tab по умолчанию - PullRequest
Новая
       5

как выбрать вкладку ivy-tab по умолчанию

0 голосов
/ 09 января 2019

Я использую ember-версию ivy-tabs для заполнения своих вкладок. и когда возникает ошибка, я использую условие для добавления класса, который будет отображать вкладку красным цветом. но когда цвет меняется, вкладка тоже меняется. Мне нужно остановить это или загрузить его на вкладку по умолчанию. я попытался с их документацией и примечаниями к выпуску, и нет никакой подсказки на этом.

код следующий 

{{#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}}

1 Ответ

0 голосов
/ 10 января 2019

в контроллер 

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}}
...