2016-07-18 46 views
0

ブートストラップ折りたたみパネルを角度コンポーネントに使用しようとしています。 ブートストラップのアプローチは、パネルのIDを使用して折りたたむ方法です。これはスタンドアローンとして機能しますが、角度コンポーネントに使用すると、同じIDは、折りたたみモードと非折りたたみモードの切り替え時に望ましくない効果を生成します。 (常に最初のパネルが折りたたまれている/展開されていない)角度コンポーネントにブートストラップコンポーネントを使用する

私の次のステップは、カスタム折りたたみパネルを作成することでした。これは動作し、 ここに表示されますplunkerが、折りたたみ効果は同じではありません(プランナーリンクはマイパネルとブートストラップパネルを並行して表示します)。

私の質問はどのように私のコンポーネントにブートストラップパネルを使用することができますか、私は崩壊/解体時に同じブートストラップ効果を持つようにCSSを変更することができます。 ?

<custom-filter-accordion button-text="Expand/Collapse Non-BootStrap"></custom-filter-accordion> 

答えて

2

あなたは間違いなくAngular-ui's integration with bootstrapを使用する必要があります。この特定の目的のために、彼らはCollapse

と呼ばれるコンポーネントを持っている彼らは、すでにあなたが角度で使用できるディレクティブがたくさんあるし、開発時間をスピードアップする必要があり

Check this plunker

+0

私はあなたを使用してコードを変更提案が表示されますが、パネルが折り畳まれているときにはわずかな不具合があります。 [link](https://plnkr.co/edit/VKoMO7UrHeMbHaJG1AE4?p=preview)をご確認ください。パネルが最後につぶれてしまうと、元のブートストラップパネルには表示されないグリッチがあります。 – Lucian

+0

プランナーを投稿してください。それはあなたが直面している問題が[plunker](https://plnkr.co/edit/VKoMO7UrHeMbHaJG1AE4?p=preview)であるのを見るのに役立ちます。 – Srijith

+0

折りたたみが発生したとき(特に折り畳み遷移の最後に)、custom-filter-accordion2コンポーネントと3番目のパネル(ブートストラップパネル)の違いを確認してください。 – Lucian

関連する問題