В связи с тем, что CSS Framework Bulma не имеет никаких js зависимостей, то для того, чтобы заработали некоторые элементы фреймворка, потребуется написать немного js кода, чтобы заработали некоторые элементы фреймворка.
Например элементы - Tabs, Cards, Notifications, Navbar, Messages не будут работать как от них ожидается.
Накидал немного примеров, которые можно использовать совместно с Bulma.
// Mobile menu - nav
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
let $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
let target = $el.dataset.target;
let $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
// Allow all cards content and footers to be collapsed
let cardItems = Array.prototype.slice.call(document.querySelectorAll('.card-header-icon'), 0);
if (cardItems.length > 0) {
cardItems.forEach(function(el) {
el.addEventListener('click', () => {
let card = el.parentElement.parentElement;
let content = card.querySelector('.card-content');
let footer = card.querySelector('.card-footer');
if(content !== undefined) {
content.classList.toggle('is-hidden');
}
if(footer !== undefined) {
footer.classList.toggle('is-hidden');
}
});
});
}
// Allow tabs to be changed
let tabItems = Array.prototype.slice.call(document.querySelectorAll('.tabs > ul > li'), 0);
if (tabItems.length > 0) {
tabItems.forEach(function(el) {
el.addEventListener('click', () => {
let target = document.getElementById(el.dataset.target);
let currentActive = el.parentElement.querySelector('.is-active');
let currentTarget = document.getElementById(currentActive.dataset.target);
// Hide current tab and make current tab header not active
currentTarget.classList.toggle('is-hidden');
currentActive.classList.toggle('is-active');
// Highlight new tab and show content
el.classList.toggle('is-active');
target.classList.toggle('is-hidden');
});
});
}
// Message close button - hide message
let messageItems = Array.prototype.slice.call(document.querySelectorAll('.message > .message-header > .delete'), 0);
if (messageItems.length > 0) {
messageItems.forEach(function(el) {
el.addEventListener('click', () => {
// Message block
let message = el.parentElement.parentElement;
// Hide
message.classList.add('is-hidden');
});
});
}
// Notification close button - hide notification
let notificationItems = Array.prototype.slice.call(document.querySelectorAll('.notification > .delete'), 0);
if (notificationItems.length > 0) {
notificationItems.forEach(function(el) {
el.addEventListener('click', () => {
// Notification block
let notification = el.parentElement;
// Hide
notification.classList.add('is-hidden');
});
});
}
// File input
let fileInput = Array.prototype.slice.call(document.querySelectorAll('.file.has-name > .file-label > .file-input'), 0);
if (fileInput.length > 0) {
fileInput.forEach(function(el) {
el.addEventListener('change', () => {
let fileName = el.parentElement.querySelector('.file-name');
// add file name
fileName.innerHTML = el.files[0].name;
});
});
}
});
Код выложен на GitHubGist, изменения и дополнения добавляйте туда...
Войдите через социальную сеть
Или войдите в свой аккаунт
Забыли пароль? | Регистрация