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
La gestione della riconnessione al server di Blazor in .NET 9
Combinare Container Queries e Media Queries
Testare il failover sulle region in Azure Storage
Integrare SQL Server in un progetto .NET Aspire
Potenziare la ricerca su Cosmos DB con Full Text Search
Il nuovo controllo Range di Blazor 9
Rendere le variabili read-only in una pipeline di Azure DevOps
Creare una libreria CSS universale - Rotazione degli elementi
Integrare modelli AI in un workflow di GitHub
Supportare la crittografia di ASP.NET Core con Azure Container App
Utilizzare WhenEach per processare i risultati di una lista di task
I più letti di oggi
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Gli oggetti CallOut di Expression Blend 4.0
- Esaminare documenti XML con namespace utilizzando LINQ to XML
- Alleggerire le applicazioni WPF sfruttando gli oggetti Freezable
- Utilizzare dati in formato XML in XAML
- Le DirectInk API nella Universal Windows Platform
- Sfruttare una CDN con i bundle di ASP.NET


