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
Utilizzare Copilot con Azure Cosmos DB
Migliorare la sicurezza dei prompt con Azure AI Studio
Triggerare una pipeline su un altro repository di Azure DevOps
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Eseguire operazioni sui blob con Azure Storage Actions
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Effettuare il binding di date in Blazor
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Gestire la cancellazione di una richiesta in streaming da Blazor
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Hosting di componenti WebAssembly in un'applicazione Blazor static