angularjs 부트 스트랩 붕괴 가로

Question

angular bootstrap 붕괴가 가로로 붕괴 될 수 있습니까? here과 같은 것?

Answer 1

축소 지시문을 수정하거나 너비 만 축소 할 수있는 지침을 기반으로 새 지시문을 만들어야합니다. 앱의 모든 축소 지시문을 가로로 축소하지 않으려면 후자를 제안합니다.

는 Plunk here 부트 스트랩 붕괴의 지시에 따라 collapse-with 지시어의 사용을 시연 참조하십시오.

지침을 변경하기 전에 전환을 처리하고 축소하려는 요소의 너비를 설정하기 위해 새 클래스를 추가해야합니다 (100 % 너비로 또는 그로부터 접기로 지시문을 변경할 수도 있습니다.

.well { 
    width: 400px; 
} 

.collapsing-width { 
    position: relative; 
    overflow: hidden; 
    -webkit-transition: width 0.35s ease; 
    -moz-transition: width 0.35s ease; 
    -o-transition: width 0.35s ease; 
    transition: width 0.35s ease; 
} 

을 그리고 지시는 단지 expand, expandDone, collapse 및 collapseDone 기능에 몇 가지 변경을 필요로하고 다음과 같이 위의 CSS 클래스를 추가/제거 : 사용 사례에 그러나 희망 당신은) 아이디어를 얻을

을

.directive('collapseWidth', ['$transition', function ($transition, $timeout) { 

    return { 
     link: function (scope, element, attrs) { 

     var initialAnimSkip = true; 
     var currentTransition; 

     function doTransition(change) { 
      var newTransition = $transition(element, change); 
      if (currentTransition) { 
      currentTransition.cancel(); 
      } 
      currentTransition = newTransition; 
      newTransition.then(newTransitionDone, newTransitionDone); 
      return newTransition; 

      function newTransitionDone() { 
      // Make sure it's this transition, otherwise, leave it alone. 
      if (currentTransition === newTransition) { 
       currentTransition = undefined; 
      } 
      } 
     } 

     function expand() { 
      if (initialAnimSkip) { 
      initialAnimSkip = false; 
      expandDone(); 
      } else { 
      element.removeClass('collapse').addClass('collapsing-width'); 
      doTransition({ width: element[0].scrollWidth + 'px' }).then(expandDone); 
      } 
     } 

     function expandDone() { 
      element.removeClass('collapsing-width'); 
      element.addClass('collapse in'); 
      element.css({width: 'auto'}); 
     } 

     function collapse() { 
      if (initialAnimSkip) { 
      initialAnimSkip = false; 
      collapseDone(); 
      element.css({width: 0}); 
      } else { 
      // CSS transitions don't work with height: auto, so we have to manually change the height to a specific value 
      element.css({ width: element[0].scrollWidth + 'px' }); 
      //trigger reflow so a browser realizes that height was updated from auto to a specific value 
      var x = element[0].offsetHeight; 

      element.removeClass('collapse in').addClass('collapsing-width'); 

      doTransition({ width: 0 }).then(collapseDone); 
      } 
     } 

     function collapseDone() { 
      element.removeClass('collapsing-width'); 
      element.addClass('collapse'); 
     } 

     scope.$watch(attrs.collapseWidth, function (shouldCollapse) { 
      if (shouldCollapse) { 
      collapse(); 
      } else { 
      expand(); 
      } 
     }); 
     } 
    }; 
}]); 

간격과 여백이 사용 사례와 일치하는지 확인하려면 CSS를 약간 조정해야하지만 도움이되기를 바랍니다.