5

ドロップダウンメニューのあるアコーディオンにボタンを追加しようとしていますが、機能していないようです:

1) ボタンが大きすぎて、アコーディオンのヘッダーを通り過ぎます。2) ドロップダウン メニューは、アコーディオン ヘッダー/グループ内で終了し、他のすべての上にはありません。

これらを修正する最善の方法は何ですか? 私が欲しい

以下は、アコーディオン グループのコードです。

<accordion-group is-open="true">
    <accordion-heading>
        <div class="btn-group" style="float:right;">
            <button type="button" class="btn btn-info">Info</button>
        </div>   
    </accordion-heading>
</accordion-group>

この投稿は似ていますが、ボタンをテキストのすぐ隣ではなく、ヘッダーの右側に配置したいので、float:left を使用しています。

ヘッダー部分にボタンがある Angular UI アコーディオン

4

3 に答える 3

4

s.alemには上記の素晴らしい例がありますが、それを angularjs 1.3 に変換すると問題が発生しました。

主に、ng-click で $event.stopPropagation() が適用された非プルダウン ボタンが、クリックされたときにページをリロードし続けることに気付きました。

もう少しいじってみると、プルダウン ボタンは問題なく機能するので、必要に応じて通常のボタンをプルダウン ボタンのように扱ってはどうかということに気付きました。解決策は、プルダウン バージョンから 2 つの属性ディレクティブ (dropdown、dropdown-toggle) を追加し、それらをそれぞれ通常のボタン グループに配置することでした。

s.alem の例を使用して 1.3 と ui.bootstrap 0.12 に変更し、アコーディオン本体にコメントを付けてサンプルを作成しました。これが役立つことを願っています。プルダウン ボタンを使用せずに 1.3.x でも通常のボタンを使用したいのですが、今のところこれで動作します...

これが私のplnkrコードです

<div class="pull-right btn-group btn-group-xs" dropdown>
  <button type="button" class="btn btn-success btn-xs" dropdown-toggle ng-click="mdc.clickToAdd();$event.stopPropagation();">Good</button>
  <button class="btn btn-danger btn-xs" ng-click="mdc.clickToAdd();$event.stopPropagation();">bad</button>
</div>
于 2015-02-06T22:06:36.533 に答える
3

私のプランカーをチェックしてください。angular.ui github の問題に「dropdown-append-to-body」を追加することについて、いくつかの議論があります。しかし、それまではこれでうまくいくはずです：

.panel-group .panel {
      overflow: visible;
}

また、の代わりに、ブートストラップのクラスをfloat:right;使用できます。pull-rightボタン グループには、 などのサイズ設定用のクラスもありますbtn-group-xs btn-group-sm。ブートストラップ コンポーネントを確認する必要があります。

于 2014-07-01T03:39:24.737 に答える
0

私の解決策：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <div class="row">
            <div class="col-lg-2">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Titel
                    </a>
                </h4>
            </div>
            <div class="col-lg-10">
                <button class="glyphicon glyphicon-pencil pull-right"></button>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <h1>Inhalt</h1>
        </div>
    </div>
</div>

于 2015-10-14T14:56:38.073 に答える