Gli amanti della documentazione avranno sicuramente notato che nella versione 4.6 di Bootstrap , tra gli esempi della sezione esperimenti si trovava l'utilizzo dello pseudo-element :placeholder-shown per creare un floating label, ossia una textbox con una label con l'effetto placeholder che si rimpiccioliva e si posizionava all'interno del controllo.
Dalla versione 5.0, l'interazione con i componenti è stata migliorata in quanto la transazione della label parte già al click sull'input e sono stati allineati i feedback di validazione. Tutto ciò è possibile utilizzando una sola classe: form-floating.
<div class="form-floating mb-3"> <input type="email" class="form-control" id="email" placeholder="email@email.com"> <label for="email">Email</label> </div>
Analizzando il codice si nota come la label venga posizionata sotto il controllo, questo perchè l'animazione è effettuata utilizzando solo CSS tramite il selettore ~.
La floating label presenta ancora alcuni problemi con i controlli textarea; problemi che il team di Bootstrap si è promesso di risolvere con i prossimi rilasci.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Load test di ASP.NET Core con k6
Gestire il colore CSS con HWB
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Reactive form tipizzati con modellazione del FormBuilder in Angular
Inizializzare i container in Azure Container Apps
Criptare la comunicazione con mTLS in Azure Container Apps
Gestione degli stili CSS con le regole @layer
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Ottimizzazione dei block template in Angular 17
Implementare il throttling in ASP.NET Core
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Creare un webhook in Azure DevOps
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Windows Server 2003 SP1 Italiano
- Creare un modulo e un controller con AngularJS
- Build 2014: tutte le novità per gli sviluppatori in diretta da San Francisco
- Rilasciata la versione RTM di Windows Vista SP1