Les affichages temporaires sont des composants affichés pour un temps limité.
En général, ils apparaissent et disparaissent après une action de l'utilisateur.
En général également, les affichage temporaires ont deux états : l'un qui les cache et l'un qui les montre.
Une bulle est un composant assez simple avec :
On peut insérer dedans un autre composant comme un sous-menu (voir exemple 2 ci-dessous).
Plusieurs options sont rajoutables pour étoffer les possibilité de l'outil :
<div class="bubble-wrap">
<a class="button">*
<div class="bubble is-visible right fluid **">
<div class="bubble__container">
<h4 class="bubble__title*">
<div class="bubble__scrollable-wrap **">
<div class="bubble__scrollable **">
<p class="bubble__content **">
<p class="bubble__content **">
* bouton déclancheur de la bulle
** facultatif
See the Pen bubble - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
bubble bubble__container left* right* fluid* * facultatif
⚠️ La classe fluid se règlera sur la largeur du bouton. D'autres réglages de largeurs seront à réaliser par vos soins.
See the Pen bubble right mobile - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
bubble__scrollable-wrap bubble__scrollable
bubble__title bubble__content
Une Pop in peut contenir les même composants qu'une page.
On peut définir des Pop in qui n'apparaissent que sur des écrans grands ou petits à l'aide des classes popin_big-screens et popin_small-screens.
<div class="popin is-visible popin_big-screens ou popin_small-screens">
<div class="popin__container">
<div class="popin__close">
<button class="button round small primary">
<div class="popin__content">
<button class="popin__veil"></button>
See the Pen popin - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
popin is-visible popin_small-screens popin_big-screens popin__close popin__content popin__veil
See the Pen pop in small screens - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
Ils peuvent contenir de nombreux autres composants : tuiles, éléments de layout, texte...
<div class="tabs-wrap">
<ul class="list tabs">
<li>
<a class="tab__link is-active">
<div class="tab__container">
See the Pen Tabs - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
tabs-wrap tabs + list tab__link tab__container
Ils sont surtout destiné à accueillir des composants de texte et d'illustration, mais ils peuvent contenir de nombreux autres composants : tuiles, éléments de layout, texte...
<ul class="accordeon list list_v"> <li class="is-expanded"> <button class="accordeon__button button basic primary"> <span class="accordeon__title button__label"> <span class="button icon expand"> <div class="accordeon__container"> <div class="accordeon__content">
See the Pen RwWzXZj by Margot Nadot (@MagNadAnn) on CodePen.
accordeon list list_v is-expanded / is-shrinked accordeon__button button basic primary accordeon__title button__label button icon expand button__icon accordeon__container accordeon__content
Le carousel peut accueillir des composants de texte et d'illustration, mais il peut aussi contenir de nombreux autres composants : tuiles, éléments de layout, texte...
Les flèches du carousel sortent de la cheminée, il est donc important que le carousel en soit bien entouré.
<div class="carousel">
<div class="carousel__container">
<ul class="carousel__slides list">
<li class="carousel__slide">
<nav class="carousel__nav">
<ul class="carousel__nav__arrows">
<li class="carousel__nav__previous">
<span class="button round secundary">
<span class="button__icon"><i class="fas fa-arrow-left"></i>
<li class="carousel__nav__next">
<span class="button round secundary">
<span class="button__icon"><i class="fas fa-arrow-right">
<ul class="carousel__nav__dots list">
<li class="carousel__nav__dot is-active">
<button class="button icon x-small primary">
<span class="button__icon"><i class="fas fa-circle">
L'architecture HTML proposée est prévue pour un défilement horizontal d'un long container carousel__slides à compléter en Js en jouant sur :
See the Pen Carousel - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.
carousel carousel__container carousel__slides carousel__slide carousel__nav carousel__nav__arrows carousel__nav__previous / carousel__nav__next carousel__nav__dots carousel__nav__dot