Как свернуть аккордеонную коробку ngx- bootstrap? - PullRequest
Новая
       35

Как свернуть аккордеонную коробку ngx- bootstrap?

0 голосов
/ 02 мая 2020

У меня есть гармошка в Html

<accordion [isAnimated]="true">
      <accordion-group heading="Date Created">
        {{ example text }}
      </accordion-group>
    </accordion>

Я хочу уменьшить размер поля, текста и текста при нажатии. В основном уменьшите размер всей коробки. Как это сделать? Before click After ckick

Я пробовал эти ниже, которые уменьшают текст заголовка и основной текст, но не поле 

<accordion-group panalClass="xyz">
        <button
          class="btn btn-link btn-block clearfix"
          accordion-heading
          type="button" panalClass="xyz"
        >
          <div class="pull-centre float-centre" style="background-color: blue;">
            Date Created
          </div>
        </button>
        {{ example text }}
      </accordion-group>

Я хочу выровнять элемент с остальной частью страницы.

Rest of the page

1 Ответ

0 голосов
/ 02 мая 2020

Поскольку я не нашел возможности изменить его размер, я обнаружил, что должен использовать сгенерированные классы angular (концепция Shadow CSS), которые можно увидеть в разделе элементов на странице консоли. В данном случае это были ".panel-heading" и ".panel-body".

Используйте класс angular в своем собственном классе, чтобы создать эффект В стилях. css, чтобы получить эффект. Как это: 

.accordion-small {
  .panel-heading {
    padding: 0px;
  }
}

.accordion-small {
  .panel-body {
    padding: 5px;
    font-size: small;
    text-align: center;
  }
}

В html: 

<accordion [isAnimated]="true" class="accordion-small">
      <accordion-group>
        <button
          class="btn btn-link btn-block clearfix"
          accordion-heading
          type="button"
        >
          <div class="pull-centre float-centre header-name">
            Date Created
          </div>
        </button>
        {{ example text }}
      </accordion-group>
    </accordion>

В компоненте css

.header-name {
  font-size: small;
}

Результат:

resized component

...