it-swarm.com.ru

Bootstrap 4 измените каретку при нажатии раскрывающегося списка

Используя Bootstrap 4, я пытаюсь создать раскрывающийся список с помощью каретки (например, вправо). При нажатии раскрывающегося списка направление курсора должно быть изменено (например: вниз).

У меня есть способ сделать это

/*Please refer the above link for full code details*/

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
</a>

<div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        This content is hidden
      </div>
</div>

CSS.

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

Но загвоздка в том, что изначально все каретки направлены вниз, что должно быть правильным

Есть и другие подходы . Но я не хочу использовать JQuery, так как мое приложение angular 4. Хотелось бы как можно больше избегать JQuery/JS.

Это не дубликат вопрос.

Спасибо заранее...

9
Vinni

В Bootstrap V4 они отбросили Glyphicons. Приведенный ниже код будет хорошо работать в соответствии с вашими потребностями. Для стиля выпадающего значка вы можете использовать шрифт awesome.

[data-toggle="collapse"]:after {
display: inline-block;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  transform: rotate(90deg) ;
  transition: all linear 0.25s;
  }   
[data-toggle="collapse"].collapsed:after {
  transform: rotate(0deg) ;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Вот демонстрационная ссылка codepen

Примечание: в вашей демонстрационной ссылке они использовали Bootstrap V3.

12
Satheesh Kumar

Вот как я получил эту работу с Bootstrap4-CSS-fontAwesome & No JS/JQuery.

<a class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId">
  click
</a>

<div id="anyId" class="collapse">
    Hi
</div>

<!-- CDNs for font-awesome, bootstrap, JQuery -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

.css

.accordion-toggle:after {
  font-family: 'FontAwesome';/* essential to enable caret symbol*/
  content: "\f0d7";/* adjust as needed, taken from font-awesome.css */
  color: grey;
}
.accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\f0da";  /* adjust as needed, taken from font-awesome.css */
}

Спасибо @ Сатиш Кумар

5
Vinni

Если вы используете SCSS, для этого есть встроенные миксины, расположенные по адресу ~bootstrap/scss/mixins/_caret.scss.

caret-down, caret-up, caret-right, caret-left и caret($direction).

Таким образом, это может быть так же просто, как:

.panel-heading .accordion-toggle {
    @include caret(right);

    &.collapsed {
        @include caret(left);
    }
}

или, если ваш HTML содержит атрибут aria-expanded (что очень рекомендуется)

.panel-heading .accordion-toggle {
    &[aria-expanded="false"] {
        @include caret(left);
    }

    &[aria-expanded="true"] {
        @include caret(right);
    }
}       

0
lambidu

Вот как я начал работать, используя только CSS для начальной загрузки 4.2 и fontawesome. Я использовал метку aria и добавил переходы для иконки, используя класс span для иконки

CSS:

#accordionExample .btn[aria-expanded=false] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
 transition: all .5s;
}

#accordionExample .btn[aria-expanded=true] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
  transition: all .5s;
  -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

HTML:

<div class="container my-5 mw-600">
  <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">

        <a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false">
          Collapsible Group Item #1
          <span class="ml-auto"></span></a>

    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">

        <a class=" btn btn-link collapsed d-flex align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">
          Collapsible Group Item #2
          <span class="ml-auto"></span>
        </a>

    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">

        <a class="btn btn-link collapsed d-flex" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">
          Collapsible Group Item #3<span class="ml-auto"></span>
        </a>

    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>

Демо: https://codepen.io/anon/pen/XoLgbY

0
Robert Doyle