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
Controllare gli accessi IP alle app con Azure Container Apps
Utilizzare i primary constructor di C# per inizializzare le proprietà
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Gestire undefined e partial nelle reactive forms di Angular
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Load test di ASP.NET Core con k6
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Cambiare la chiave di partizionamento di Azure Cosmos DB
Migrare una service connection a workload identity federation in Azure DevOps
Usare le variabili per personalizzare gli stili CSS
I più letti di oggi
- Nuova versione per jQuery e prima alpha per jQuery Mobile
- Paginare i risultati con QuickGrid in Blazor
- Utilizzare il trigger SQL con le Azure Function
- Eliminare una determinata proprietà da un oggetto JavaScript
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Modern web apps with Blazor