Pickers

Playground

Label Input

colordatetime

Label

Append

Helper Text

Requerido

Disabled

Ruby

  
<%= simple_form_for(@tipo_sueldo_base, url: url) do |f| %>
  <%= f.input :color,
              as: :color,
              label: 'Label Input',
              
              
              wrapper_html: {
                class: 'col-3'
              }
  %>
<% end %>
  
  
                  

Html

<div class="form-group col-md-3">
  <label class="control-label">Label Input</label>
  <div class="input-group">
    <input class="form-control" type="color"  >
  </div>
</div>
  


                

Groovy

<link href="<g:resource dir='css' />/components/components.css" rel="stylesheet">


                

Lista de parámetros

Ruby

Parámetro

Tipo

Detalle

wrapper_html	Array	Propiedades html para el exterior del input
input_html	Array	Propiedades html para el input
wrapper	Array	:horizontal_form Propiedades html para el exterior del input que lo hace ver inline
label	String	Label que indica el titulo del input
required	Boolean, default: false	Indica si el input es obligatorio para continuar
disabled	Boolean, default: false	Indica si el input estara desabilitado para su uso
placeholder	String	Indica el placeholder del input

Groovy

Parámetro

Tipo

Detalle

id	String	Determina el ID dentro del DOM del componente
class	String	Determina el CLASS dentro del DOM del componente
label	String	Label que indica el titulo del input
hint	String	Indica el texto debajo del input
name	string	Indica el atributo name del input tag
value	string	Indica el atributo value del input tag
required	Boolean, default: false	Indica si el input es obligatorio para continuar
disabled	Boolean, default: false	Indica si el input estara desabilitado para su uso
placeholder	String	Indica el placeholder del input
variant	active | success | warning, opcional	Indica el estado del input, cambia el color del borde y los iconos

Color picker

Se utiliza un color picker para navegar y seleccionar colores. De forma predeterminada, permite al usuario navegar a través de los colores en un espectro de color o especificar un valor de color rojo-verde-azul (RGB), tono-saturación-valor (HSV) o valor de color hexadecimal en un cuadro de texto. En Buk, se utiliza principalmente en la siguiente ruta: https://staging.buk.cl/admin/generals

para: cambiar el fondo del Navbar y el color de su contenido, Fondo del menu y su contenido y color del encabezado del modal.

Anatomía

1. Contenedor

Contiene solo el color seleccionado.

2. Label text

Debe llevar siempre el label “ elegir color”.

3. Color select

Visualización del color seleccionado.

---

Date Picker

Los selectores de fecha ayudan a los usuarios a navegar por fechas pasadas, presentes y futuras. Los usuarios pueden seleccionar una fecha en particular a través del campo, adicionalmente pueden elegir entre año, mes y día.

El selector de fecha se usa comúnmente en formularios

Anatomía

1. Label

Las etiquetas deben indicar qué información requiere el campo. La etiqueta está alineada a la izquierda sobre el área de entrada.

2. Date input field

Al seleccionar este campo, se abre el componente de calendario. Los usuarios también pueden ingresar fechas en el campo. Una vez que se selecciona una fecha, la opción se mostrará en el input field. Este ejemplo muestra la fecha con el correcto formato de seleccion: Día-Mes-Año'.

3. Icon Right

Siempre debe llevar el icono “event” al tratarse de fechas.

3. Calendario abierto

Contiene la lista de todas las fechas. Al seleccionar las flechas anterior o siguiente, el calendario se mueve a través de los meses. El área de fecha seleccionada se resalta con un relleno de color diferente.

---

Time Picker

Los selectores de hora y minutos ayudan a los usuarios a definir horas y minutos en formato militar, ejemplo: 18:00. Los usuarios pueden seleccionar una hora y minutos en particular a través del campo.

El selector de fecha se usa comúnmente en formularios para agendar entrevistas.

Anatomía

1. Label

Las etiquetas deben indicar qué información requiere el campo. La etiqueta está alineada a la izquierda sobre el área de entrada.

2. Time input field

al seleccionar este campo, se abre el componente de calendario. Los usuarios también pueden ingresar horas en el campo. Una vez que se selecciona una hora, la opción se mostrará en el input field.

3. Icon Right

Siempre debe llevar el icono “acces_time” para la selección de horas.

3. Calendario de horas abierto

Contiene la lista de todas las horas disponbles. El área de fecha seleccionada se resalta con un relleno de color diferente.