angularjs bootstrap collapse horizontally

Question

Wie kann ich angular bootstrap kollabieren, kollabieren horizontal? Etwas wie here?

Answer 1

Sie müssen entweder die Kollatierungsdirektive ändern oder eine neue Direktive erstellen, die darauf basiert, nur die Breite zu reduzieren. Ich würde Letzteres empfehlen, es sei denn, Sie möchten, dass alle Kollabierungsanweisungen in Ihrer App horizontal zusammenfallen.

Bitte beachten Sie die Plunk here die Verwendung einer auf der Bootstrap-Kollaps Richtlinie auf der Grundlage collapse-with Richtlinie zu demonstrieren.

Zusätzlich zu der Änderung der Direktive müssen Sie neue Klassen hinzufügen, um den Übergang zu behandeln und eine Breite für das Element festlegen, das Sie reduzieren möchten (Sie könnten auch die Anweisung auf 100% Breite reduzieren, nicht sicher) auf Ihren Anwendungsfall aber hoffentlich Sie die Idee) erhalten:

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

und die Richtlinie erfordert nur wenige Änderungen an den expand, expandDone, collapse und collapseDone Funktionen und das Hinzufügen von/über die CSS-Klasse zu entfernen, wie folgt:

.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(); 
      } 
     }); 
     } 
    }; 
}]); 

Möglicherweise müssen Sie die CSS ein wenig optimieren, um sicherzustellen, dass der Abstand und die Ränder mit Ihren Anwendungsfällen konsistent sind, aber hoffentlich hilft dies.