Thème Paris.fr
Exemple d'accordéon avec bouton radio
Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.
Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.
Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.
Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.
Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.
FreeMarker
<@cRow>
<@cCol>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc1' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc2' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc3' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc4' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
<@cRadio name='test' label='Accordéon du CE2 à 25 ans' class='radio-accordion' value='acc5' inline=false disabled=false readonly=false checked=false required=false >
<@cText class="radio-accordion-label">Tests entre le mercredi 2 et le samedi 5 septembre inclus (jour à préciser).vendredi 6 septembre à 17h.</@cText>
</@cRadio>
</@cCol>
</@cRow>
Style
.radio-accordion{
position: relative;
}
.custom-radio.radio-accordion:first-of-type:not( .custom-control-inline ){
padding-top: .75rem
}
.radio-accordion::after{
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 -6 32 45'%3e%3cpath fill='%23071F32' d='M16 16.172l4.586-4.586 2.828 2.828L16 21.828l-7.414-7.414 2.828-2.828z'/%3e%3c/svg%3e");
position: absolute;
width: 24px;
height: 24px;
right: 0;
top: 0;
}
.radio-accordion[aria-expanded="true"]::after{
transform: rotate(180deg) translateY(-15px);
transition: transform .3s ease;
}
.radio-accordion:hover{
cursor: pointer;
}
JS
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.radio-accordion-label').forEach(function(label) {
label.style.display = 'none';
});
document.querySelectorAll('.radio-accordion').forEach(function(radio) {
radio.setAttribute('aria-expanded', 'false');
radio.addEventListener('click', function() {
let label = radio.querySelector('.radio-accordion-label');
if (label.style.display === 'none') {
label.style.display = 'block';
radio.setAttribute('aria-expanded', 'true');
} else {
label.style.display = 'none';
radio.setAttribute('aria-expanded', 'false');
}
});
});
});
Exemple d'étapes avec images FC
FreeMarker
<#assign lstep = [
{"title":"Je m'informe sur le", "url":"images/fa-battery-0.png"},
{"title":"Je certifie mon identité", "url":"images/franceconnect-bouton.svg"},
{"title":"Je choisis ma demande", "url":"images/fa-battery-2.png"},
]>
...
<@cInfoStep lstep true true />
Style
.list-idx li:nth-child(2) figure .img-fluid{
max-width: 150%;
}
Exemple de Composant "Mise en avant"
Votre QF
Le quotient familial de votre attestation s'élève à 1045 € , vous faites partie de la tranche tarifaire 5 (T05)
Phosfluorescently predominate
Phosfluorescently predominate one-to-one expertise before bricks-and-clicks leadership skills. Monotonectally target intuitive total linkage for resource-leveling experiences. Synergistically innovate premium internal or "organic" sources for maintainable markets. Synergistically mesh best-of-breed products vis-a-vis front-end ROI. Assertively repurpose plug-and-play platforms vis-a-vis resource sucking best practices.
FreeMarker
<@cContentFrame title='Votre QF'>
Le quotient familial de votre attestation s'élève à 1045 € , vous faites partie de la tranche tarifaire 5 (T05)
</@cContentFrame>
<#list animals as animal>
Style
/* TODO */