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
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Routing statico e PreRendering in una Blazor Web App
Miglioramenti nell'accessibilità con Angular CDK
Eseguire i worklow di GitHub su runner potenziati
Gestione degli stili CSS con le regole @layer
C# 12: Cosa c'è di nuovo e interessante
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Paginare i risultati con QuickGrid in Blazor
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
I più letti di oggi
- Operazioni di selezione su una DataTable
- annunciato #windowsazure pack: consente di far girare su #windowsserver 2012 e system center on premise i servizi di azure! #msteched
- Aggiungere servizi esterni al ciclo di vita di un'applicazione Silverlight 4.0
- Inviare notifiche toast da background agent con Windows Phone 7.1