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
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare un service principal per accedere a Azure Container Registry
Gestire liste di tipi semplici con Entity Framework Core
Evitare il flickering dei componenti nel prerender di Blazor 8
Usare le variabili per personalizzare gli stili CSS
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Creare gruppi di client per Event Grid MQTT
Usare il versioning con i controller di ASP.NET Core Web API
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON