Этот флажок почти аналогичен приложению списка дел и заметок, где идет правильный интервал и границы помогут вам легко прочитать содержимое на нем. Поскольку это концептуальная демонстрация, разработчик не дал возможность редактировать тексты. Но, тем не менее, вы можете отредактировать код, чтобы сделать его правильно работающим интерфейсом.
Установив флажок, вы получаете весь текст, как в приложении Google Keep. Если вы планируете использовать инструмент контрольного списка в своем приложении или на инструментальных панелях администратора, этот дизайн даст вам основную идею.
Так выглядит:
Установка:
HTML
Код
<div class="inbox">
<div class="item">
<input type="checkbox">
<p>Это макет почтового ящика.</p>
</div>
<div class="item">
<input type="checkbox">
<p>Отметьте один пункт</p>
</div>
<div class="item">
<input type="checkbox">
<p>Удерживайте клавишу Shift</p>
</div>
<div class="item">
<input type="checkbox">
<p>Проверить нижний пункт</p>
</div>
<div class="item">
<input type="checkbox">
<p>Все промежуточное также должно быть установлено на флажок</p>
</div>
<div class="item">
<input type="checkbox">
<p>Попробуйте сделать это без каких-либо библиотек</p>
</div>
<div class="item">
<input type="checkbox">
<p>Просто обычный JavaScript</p>
</div>
</div>
CSS
Код
html {
font-family: sans-serif;
background: #ffc600;
}
.inbox {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
}
.item {
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked + p {
background: #F9F9F9;
text-decoration: line-through;
}
input[type="checkbox"] {
margin: 20px;
}
p {
margin: 0;
padding: 20px;
transition: background 0.2s;
flex: 1;
font-family:'helvetica neue';
font-size: 20px;
font-weight: 200;
border-left: 1px solid #D1E2FF;
}
JS
Код
const checkboxes = document.querySelectorAll('input[type="checkbox"]')
let lastChecked; //keep track of last checked box
function handleCheck(e){
let inBetween = false;
if (e.shiftKey === true){
checkboxes.forEach(item => {
if (item === this || item === lastChecked){
inBetween = !inBetween;
}
//check every box in between
if (inBetween){
item.checked = true;
}
})
}
lastChecked = this //keep track of last checked box
}
checkboxes.forEach(item => item.addEventListener('click', handleCheck));
На этом установка завершена!
Демонстрация
