Как добавить Bootstrap Accordion в приложение Angular - PullRequest
Новая
       49

Как добавить Bootstrap Accordion в приложение Angular

0 голосов
/ 03 мая 2019

Я пытаюсь добавить Bootstrap Accordion в мое приложение Angular ниже: 

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                Anim
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
            Anim
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingThree">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #
                </button>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                Anim
            </div>
        </div>
    </div>
</div>

Я выполнил следующие установки NPM перед сборкой:

npm и начальная загрузка

npm и ngx-bootstrap

Но когда я нажимаю на одно из Аккордеонных Титулов, ничего не происходит. Может кто-нибудь, пожалуйста, скажите мне, какая часть установки мне не хватает? Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Попробуйте эту команду, 

npm install bootstrap@4 jquery --save

После редактирования файла Angular.json изменить "style":["put here your bootstrap.css file "] & "script":["put here 1st jquery path and then bootstrap.js path"]

0 голосов
/ 03 мая 2019

Вы используете "простую" версию загрузчика.

  1. Убедитесь, что вы добавили стиль загрузки в свое приложение в глобальном файле styles.css или style.scss:

    Версия CSS

    @import '~bootstrap/dist/css/bootstrap.min.css';

    Версия SCSS

    @import "~bootstrap/scss/bootstrap";

  2. Импортируйте AccordionModule из ngx-bootstrap в ваш AppModule. 

    import { AccordionModule } from 'ngx-bootstrap/accordion';

@NgModule({
  imports: [AccordionModule.forRoot(),...]
})
export class AppModule{}

  3. Используйте компонент, доступный в ngx-bootstrap, а не "обычный"html версия: 

    <accordion>
  <accordion-group heading="Static Header">
    This content is straight in the template.
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
</accordion>

Инструкции по установке для ngx-bootstrap

Аккордеонный компонент ngx-bootstrap

Добавить анимацию

Чтобы добавить анимацию, необходимо добавить свойство isAnimated к родительскому компоненту accordion: 

<accordion [isAnimated]="true">
<!-- ... -->
</accordion>

Открыть только один аккордеон

Чтобы открыть только один аккордеон, вам нужно добавить свойство closeOthers к родительскому компоненту accordion: 

<accordion [isAnimated]="true" [closeOthers]="true">
<!-- ... -->
</accordion>
...