Как добавить новый предмет для материализации коллекции CSS? - PullRequest
Новая
       9

Как добавить новый предмет для материализации коллекции CSS?

0 голосов
/ 20 ноября 2018

Материализация css имеет коллекции https://materializecss.com/collections.html

Интересно, есть ли конкретный метод для добавления нового элемента на лету в коллекцию, или я должен каким-то образом создать HTML самостоятельно, используя, например, jquery?

1 Ответ

0 голосов
/ 23 апреля 2019

Поскольку ссылка на это была в моих первых результатах поиска, когда я искал похожую проблему, я отвечу с тем, что я знаю до сих пор.

Нет встроенного параметра / метода для динамического добавлениясписок элементов в коллекции, но вы можете использовать JQuery для этого. 

$('.add-item').click(function() {
  $('.collection').append('<li class="collection-item">item<a href="#!" class="remove-item secondary-content"><i class="material-icons mat-red-text">remove_circle_outline</i></a></li>');
});
$('.collection').on('click', '.remove-item', function() {
  $(this).closest('li').remove();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section container">
  <ul class="collection">
    <li class="collection-item">
      item
      <a href="#!" class="remove-item secondary-content">
      <i class="material-icons mat-red-text">remove_circle_outline</i>
    </a>
    </li>
  </ul>
  <button class="btn add-item">add</button>
</div>

Фрагмент должен работать, он не завершен, но должен работать.

Я хочу отметить использование .on() метод для удаления части.Когда вы динамически добавляете в DOM элементы, которые имеют свои собственные события, вам нужно использовать .on (), иначе событие не сработает.Простое использование удаления с помощью .click () не будет работать для динамически добавляемых элементов;

Специально для materializecss существует небольшая проблема со стилем для последнего li в ul, вы заметите дополнительный нижнийграницы.Мне все еще нужно выяснить, как это решить.

...