Bulma es un marco CSS de código abierto y gratuito basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El componente ‘área de texto’ de un formulario no tiene un aspecto tan atractivo. Usando Bulma podemos diseñar elementos de área de texto del formulario de una manera mucho mejor simplemente agregando algunas clases simples de Bulma. Los elementos textarea de Bulma están disponibles en diferentes colores, diferentes estilos, diferentes tamaños y diferentes estados.
Ejemplo 1: Este ejemplo ilustra Bulma Textarea simple.
html
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder='Normal Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra un área de texto de diferentes colores.
html
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-primary"
placeholder='Primary Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-link"
placeholder='Link Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-info"
placeholder='Info Textarea'>
</textarea>
</div>
</div>
</div>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-success"
placeholder='Success Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-warning"
placeholder='Warning Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-danger"
placeholder='Danger Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo ilustra un área de texto de diferentes tamaños.
html
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-small"
placeholder='small Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder='Normal Textarea'>
</textarea>
</div>
</div>
</div>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-medium"
placeholder='Medium Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-large"
placeholder='Large Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo ilustra diferentes estados de textarea.
html
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder='Normal Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-focused"
placeholder='Focused Textarea'>
</textarea>
</div>
</div>
</div>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea is-hovered"
placeholder='Hovered Textarea'>
</textarea>
</div>
</div>
<div class="field">
<div class="control is-loading">
<textarea class="textarea"
placeholder='Loading Textarea'>
</textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo muestra un área de texto de solo lectura.
html
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea class="textarea"
placeholder=
"I am content of Readonly
Textarea, You can't write me" readonly></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: Este ejemplo muestra un área de texto deshabilitada.
html
<html>
<head>
<title>Bulma Textarea</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="field">
<div class="control">
<textarea col='20'
class="textarea"
placeholder='Disabled Textarea'
disabled>
</textarea>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA