Model Examples
No edit summary |
No edit summary |
||
| Line 132: | Line 132: | ||
<!-- Menu items --> | <!-- Menu items --> | ||
<a href="#complete-models" class="menu-item">Complete models</a> | <a href="#complete-models" class="menu-item">Complete models</a> | ||
<a href="#another-model" class="menu-item">Another model</a> | |||
<a href="#final-model" class="menu-item">Final model</a> | |||
</div> | </div> | ||
<main> | <main> | ||
| Line 411: | Line 411: | ||
e.preventDefault(); | e.preventDefault(); | ||
const targetId = this.getAttribute('href'); | const targetId = this.getAttribute('href'); | ||
const targetSection = document.querySelector(targetId); | |||
if (targetSection) { | |||
targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |||
} | |||
}); | |||
}); | |||
}); | |||
</script> | |||
<script> | |||
document.addEventListener('DOMContentLoaded', (event) => { | |||
const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="4" height="16" viewBox="0 0 4 16" fill="none"> | |||
<path d="M0 0C2.20914 0 4 1.79086 4 4L4 12C4 14.2091 2.20914 16 0 16L0 0Z" fill="#1A50AD"/> | |||
</svg>`; | |||
// Function to create a new SVG element | |||
const createSvgElement = (htmlString) => { | |||
const div = document.createElement('div'); | |||
div.innerHTML = htmlString.trim(); | |||
return div.firstChild; | |||
}; | |||
// Function to update active link style and SVG | |||
const updateActiveLink = (targetId) => { | |||
document.querySelectorAll('.sidebar a').forEach(link => { | |||
if (link.getAttribute('href') === targetId) { | |||
link.classList.add('active'); | |||
// Insert SVG for active link | |||
link.prepend(createSvgElement(svgMarkup)); | |||
} else { | |||
link.classList.remove('active'); | |||
// Remove SVG for non-active links | |||
if (link.querySelector('svg')) { | |||
link.removeChild(link.querySelector('svg')); | |||
} | |||
} | |||
}); | |||
}; | |||
document.querySelectorAll('.sidebar a').forEach(link => { | |||
link.addEventListener('click', function(e) { | |||
e.preventDefault(); | |||
const targetId = this.getAttribute('href'); | |||
updateActiveLink(targetId); | |||
const targetSection = document.querySelector(targetId); | const targetSection = document.querySelector(targetId); | ||
if (targetSection) { | if (targetSection) { | ||
Revision as of 22:13, 7 November 2023
Model Samples
MODEL SAMPLES
Get started with MDriven sample models.
Explore our models and choose what you want to build..
Complete Models
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Complete Models
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Complete Models
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Test
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip
Base App
You can use this as a starting point or you can merge it with most of the other examples and template models.
Download .zip