Частая задача, если данных очень много, показывать их частями, так как контента может быть слишком много. Обычно для этого используется постраничный вывод(пагинация) с возможностью переключения страниц и выбором количества элементов на странице. В этом упражнении вам надо добавить пагинацию для списка задач.
src/components/Tasks.jsx
Добавьте получение списка задач для текущей страницы через селектор. Добавьте к списку задач aria-label="Список задач"
Добавьте выбор количества задач на странице: 5, 10, 20 или 50 задач на страницу. Используйте для этого селектор, добавьте к нему aria-label="Размер страницы"
Изменение количества задач на странице должно приводить к открытию первой страницы.
Добавьте кнопки для переключения страниц.
Пример страницы:
<div id="container" class="container m-3">
<div class="col-5">
<form action="" class="form-inline">
<div class="form-group mx-sm-3">
<input type="text" data-testid="input" required="" value="" />
</div>
<input
type="submit"
data-testid="submit"
class="btn btn-primary btn-sm"
value="Add"
/>
</form>
<div class="mt-3">
<ul class="list-group" aria-label="Список задач">
<li class="list-group-item d-flex">
<span class="mr-auto">Задача № 1</span
><button type="button" class="close"><span>×</span></button>
</li>
<li class="list-group-item d-flex">
<span class="mr-auto">Задача № 2</span
><button type="button" class="close"><span>×</span></button>
</li>
<li class="list-group-item d-flex">
<span class="mr-auto">Задача № 3</span
><button type="button" class="close"><span>×</span></button>
</li>
<li class="list-group-item d-flex">
<span class="mr-auto">Задача № 4</span
><button type="button" class="close"><span>×</span></button>
</li>
<li class="list-group-item d-flex">
<span class="mr-auto">Задача № 5</span
><button type="button" class="close"><span>×</span></button>
</li>
</ul>
<div class="mt-3">
<span>Показывать по </span
><select
aria-label="Размер страницы"
class="form-select form-select-lg"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
<ul class="mt-3 pagination">
<li class="page-item active"><span class="page-link">1</span></li>
<li class="page-item">
<a class="page-link" role="button" tabindex="0">2</a>
</li>
<li class="page-item">
<a class="page-link" role="button" tabindex="0">3</a>
</li>
<li class="page-item">
<a class="page-link" role="button" tabindex="0">4</a>
</li>
<li class="page-item">
<a class="page-link" role="button" tabindex="0">5</a>
</li>
</ul>
</div>
</div>
</div>
Подсказки
- Для формирования кнопок страниц можно воспользоваться компонентом из bootstrap Pagination
- При создании задачи, сервер сгенерирует
id
и вернёт объект с присвоенным идентификатором - При удалении последнего элемента на странице, должен быть переход на предыдущую страницу
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.