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
DevSecOps per .NET: dalla teoria alla pratica
Personalizzare i parametri del CSS Scroll Snap
Ridurre il reflow cambiando il CSS
Ciclo di vita risorse con .NET Aspire
Impostare automaticamente l'altezza del font tramite CSS
Utilizzo del persistent state di Blazor nel prerendering
Configurare OpenTelemetry per Application Insights su ASP.NET Core
Definire il metodo di rilascio in .NET Aspire
Semplificare la gestione dei modelli con Azure AI Foundry Model Router
Referenziare un package NuGet in una file based app .NET
Raggruppamento degli aggiornamenti di dipendenze tra directory in un monorepo con Dependabot
Configuratione e utilizzo .NET Aspire CLI




