Как изменить вид с помощью ajax и переключателя? - PullRequest
Новая
       36

Как изменить вид с помощью ajax и переключателя?

1 голос
/ 25 мая 2019

В Drupal 8 я создал 2 вида блоков: 

message_activity_stream_timeline_public
message_activity_stream_timeline_private

Я добавил следующий код в шаблон TWIG моей домашней страницы: 

  <div class="main-timeline">
    {{ drupal_view('message_activity_stream_timeline_public', 'block_1') }}
    {{ drupal_view('message_activity_stream_timeline_private', 'block_1') }}
  </div>

Я не хочу отображать 2 блока одновременно. Я хочу создать кнопку переключения и переключаться с блока message_activity_stream_timeline_public на message_activity_stream_timeline_private с помощью ajax и наоборот.

Как я могу это сделать?

ОБНОВЛЕНИЕ (я нашел решение): 

          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVÉ</a>
            </li>
          </ul>

и 

  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">
      <div class="home-page-footer">
        <div class="timelines">
          <div class="main-timeline pt-5">
            {{ drupal_view('message_activity_stream_timeline_public', 'block_1') }}
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">
      <div class="home-page-footer">
        <div class="timelines">
          <div class="main-timeline pt-5">
            {{ drupal_view('message_activity_stream_timeline_private', 'block_1') }}
          </div>
        </div>
      </div>
    </div>
  </div>

Но вкладки меня не устраивают. Я ищу вид кнопки переключения.

Я на Bootstrap 4, и я нашел это:

https://bootswatch.com/sketchy/

введите описание изображения здесь

Как мне изменить первую часть моего кода, чтобы она выглядела так же? (кнопка в 3 раза больше была бы идеальной)

введите описание изображения здесь 

          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVÉ</a>
            </li>
          </ul>



          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
            <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
          </div>



          <div class="toggle-on-off">
            <span class="toggle-on-off-public">PUBLIC</span>
            <i class="fas fa-toggle-on fa-inverse fa-rotate-180 fa-3x text-primary"></i>
            <span class="toggle-on-off-prive">PRIVÉ</span>
          </div>

На этом скриншоте первая кнопка (вкладка) - мой текущий код, и он работает.

Я хочу использовать тумблер из Bootstrap 4, это вторая кнопка для замены вкладок.

Я хочу иметь вид третьей кнопки (текст на каждой стороне).

...