Bouton avancé. 2 styles proposés. Consigne d'utilisation : - Dans backgroundcolor, placer la couleur du fond sur lequel se trouve le bouton.
<a class ="AKL-btnAdvanced-amber" background-color ="hsl(252, 10%, 26%)" >
<label class ="AKL-label-btnAdvanced" > Bouton</label>
</a>
<a class ="AKL-btnAdvanced2-amber" background-color ="hsl(252, 10%, 26%)" >
<label class ="AKL-label-btnAdvanced" > Bouton</label>
</a> Bouton servant à copier un texte. Consignes d'utilisation : - Dans le for, placer l'id de la zone de texte à copier. - La zone de texte doit être un <textarea> ou un <input> Conseil d'utilisation : - Possibilité de rajouter une class d'un bouton AKL.
<label class ="AKL-btnCopy" for ="texteACopier" > Copier</label> Bouton servant sélectionner un fichier pour un formulaire. Conseil d'utilisation : - Possibilité de rajouter une class d'un bouton AKL au label.
<label for ="file1" class ="AKL-btnClassic-Border-amber" > Sélectionner</label>
<input hidden type ="file" id ="file1" class ="AKL-btnFile" > Menu déroulant pour proposer plusieurs choix, se déroule au survol de la souris. 2 styles proposés. Conseils d'utilisation : - Cette version est adapté pour mettre des liens (vers d'autres pages, etc.). - L'icon à côté du nom du menu peut être changé ou retiré en modifiant l'attribut icon.
<div class ="AKL-btnDropdown-blc-ocean" >
<span class ="AKL-btnDropdown-span" icon ="⯆" > Page</span>
<div class ="AKL-btnDropdown-list" >
<a class ="AKL-btnDropdown-list-btn" > Une</a>
<a class ="AKL-btnDropdown-list-btn" > Deux</a>
<a class ="AKL-btnDropdown-list-btn" > Trois</a>
</div>
</div>
<div class ="AKL-btnDropdown-Flat-blc-ocean" >
<span class ="AKL-btnDropdown-span" icon ="⯆" > Page</span>
<div class ="AKL-btnDropdown-list" >
<a class ="AKL-btnDropdown-list-btn" > Une</a>
<a class ="AKL-btnDropdown-list-btn" > Deux</a>
<a class ="AKL-btnDropdown-list-btn" > Trois</a>
</div>
</div> Menu déroulant sélecteur pour proposer plusieurs choix, se déroule au clic. 2 styles proposés. Consignes d'utilisation : - L'attribut type indique le type de valeur qui sera retourné dans l'attribut value, il en éxiste pour le moment 3 : -- val (valeur), retourne le texte du choix sélectionné. -- num (numéro), retourne le numéro de la position du choix sélectionné (commence à partir de 0). -- bin (binaire), retourne le numéro de la position en binaire du choix sélectionné. Conseils d'utilisation : - Cette version est adapté pour être utilisé dans des formulaires. - L'îcon à côté du nom du menu NE PEUT PAS être changé/retiré.
<div class ="AKL-btnDropdownSelect-blc-amber" type ="val" value ="" for ="id1" >
<span id ="id1" class ="AKL-btnDropdownSelect-span" icon ="⯆" > Choix</span>
<div class ="AKL-btnDropdownSelect-list" >
<div class ="AKL-btnDropdownSelect-list-btn" for ="id1" > Un</div>
<div class ="AKL-btnDropdownSelect-list-btn" for ="id1" > Deux</div>
<div class ="AKL-btnDropdownSelect-list-btn" for ="id1" > Trois</div>
</div>
</div>
<div class ="AKL-btnDropdownSelect-Flat-blc-amber" type ="val" value ="" for ="id1" >
<span id ="id1" class ="AKL-btnDropdownSelect-span" icon ="⯆" > Choix</span>
<div class ="AKL-btnDropdownSelect-list" >
<div class ="AKL-btnDropdownSelect-list-btn" for ="id1" > Un</div>
<div class ="AKL-btnDropdownSelect-list-btn" for ="id1" > Deux</div>
<div class ="AKL-btnDropdownSelect-list-btn" for ="id1" > Trois</div>
</div>
</div> Cases à cocher utilent pour les formulaires servant. 4 styles proposés. Conseils d'utilisation : - Le for correspond à l'id de l'input (1 seul for/id par checkbox). - Rajouter "checked" avant de fermer l'input pour que la checkbox soit validée par défaut.
<label for ="chekbox1" class ="AKL-checkbox--RG" ></label>
<input id ="chekbox1" type ="checkbox" hidden >
<label for ="chekbox2" class ="AKL-checkbox--check" ></label>
<input id ="chekbox2" type ="checkbox" hidden >
<label for ="chekbox3" class ="AKL-checkbox--cross" ></label>
<input id ="chekbox3" type ="checkbox" hidden >
<label for ="chekbox4" class ="AKL-checkbox--circle" ></label>
<input id ="chekbox4" type ="checkbox" hidden > Cases à cocher pour les formulaire à choix multiples. 4 styles proposés. Les styles disponibles sont les mêmes que pour les checkboxs. Consigne d'utilisation : - Le name doit être identique pour chaque radio bouton faisait parti du même groupe. Conseils d'utilisation : - Le for correspond à l'id de l'input (1 seul for/id par checkbox). - Rajouter "checked" avant de fermer l'input pour que le radio bouton soit validée par défaut (ne pas en mettre plus d'un par groupe).
<label for ="radio1" class ="AKL-radio--circle" ></label>
<input name ="a" id ="radio1" type ="radio" hidden > Bouton à 2 positions. 4 styles proposés. Conseils d'utilisation : - Dans la class, remplacer 'on' par 'off' pour que le bouton soit éteint par défaut. - Les évènement doivent être géré en javascript.
<div class ="AKL-onOff1--on" ></div>
<div class ="AKL-onOff2--on" ></div>
<div class ="AKL-onOff3--on" ></div>
<div class ="AKL-onOff4--on" ></div> Bouton à 2 positions désactivé. 2 styles proposés.
<div class ="AKL-onOff1-locked" ></div>
<div class ="AKL-onOff2-locked" ></div> Range slider au nombre de position paramétrable. Conseils d'utilisation : - min : valeur minimum sélectionnable - max : valeur maximum sélectionnable - value : valeur actuelle du curseur - step : écart entre deux valeur Lien vers un site permettant de réaliser son propre slider
<input type ="range" class ="AKL-range" min ="0" max ="100" value ="50" step ="1" > Créez votre bouton.
Nom
Class
Padding gauche-droite
Padding haut-bas
Couleur : H
S
L
A
Taille
Radius
Couleur : H
S
L
A
Couleur : H
S
L
A
Décallage gauche-droite
Décallage haut-bas
Flou
Taille
Couleur : H
S
L
A
Activer l'effet hover (au survol)
Reprendre les paramètres normaux
Padding gauche-droite
Padding haut-bas
Couleur : H
S
L
A
Taille
Radius
Couleur : H
S
L
A
Couleur : H
S
L
A
Décallage gauche-droite
Décallage haut-bas
Flou
Taille
Couleur : H
S
L
A