/
para buscarBase
Estructura
La estructura básica detrás de cada form es armar un row con cada input.
Mobile
Tablet
Desktop
<form class="eb-form">
<div class="title-h6 mb:200">Editar perfil</div>
<div class="eb-grid gap:100 mb:100">
<div class="col:6">
<div class="eb-form__row">
<input type="text" class="eb-form__input" placeholder="Nombre">
<%= content_tag :div, 'Nombre', class: 'eb-form__label' %>
</div>
</div>
<div class="col:6">
<div class="eb-form__row col:6">
<input type="text" class="eb-form__input" placeholder="Apellido">
<%= content_tag :div, 'Apellido', class: 'eb-form__label' %>
</div>
</div>
</div>
<div class="eb-form__row">
<input type="text" class="eb-form__input" placeholder="Teléfono">
<%= content_tag :div, 'Teléfono', class: 'eb-form__label' %>
</div>
<div class="eb-form__row">
<input type="text" class="eb-form__input" placeholder="Email">
<%= content_tag :div, 'Email', class: 'eb-form__label' %>
<span class="eb-form__sublabel">
<%= icon(:fal, 'info-circle') %>
<%= t('something.good') %>
</span>
</div>
<div class="title-h6 mb:200 mt:300">Cambiar contraseña</div>
<div class="eb-form__row">
<input type="password" class="eb-form__input" placeholder="Contraseña">
<%= content_tag :div, 'Nueva contraseña', class: 'eb-form__label' %>
<span class="eb-form__sublabel">
<%= icon(:fal, 'info-circle') %>
<%= t('something.good') %>
</span>
</div>
<div class="eb-form__row">
<input type="password" class="eb-form__input" placeholder="Confirmar contraseña">
<%= content_tag :div, 'Confirmar contraseña', class: 'eb-form__label' %>
</div>
<div class="eb-form__footer">
<div class="button --primary">Guardar cambios</div>
</div>
</form>
Composición
Representación básica de input.
Se sugiere respetar el correcto uso del atributo type para una óptima usabilidad mobile.
Label
Este campo es obligatorio.
Estados
Presentamos cinco diferentes estados de los inputs de texto simple.
Para deshabilitar un input usamos el atributo HTML disabled y disabled: true para la versión Rails.
Label
Label
Label
Label
Label
Error en el input
Inputs
Text
Label
Html
Rails
<div class="eb-form">
<div class="eb-form__row">
<input type="text" class="eb-form__input">
<div class="eb-form__label">Label</div>
</div>
</div>
<%= content_tag :div, class: 'eb-form' do %>
<%= content_tag :div, class: 'eb-form__row' do %>
<%= text_field_tag '', '', class: 'eb-form__input' %>
<%= content_tag :div, 'Label', class: 'eb-form__label' %>
<% end %>
<% end %>
Textarea
Label
extra small
small
medium
large
Html
Rails
<div class="eb-form">
<div class="eb-form__row">
<textarea class="eb-form__input"><textarea>
<div class="eb-form__label">Label</div>
</div>
</div>
<div class="eb-form">
<div class="eb-form__row">
<textarea class="eb-form__input --xl"><textarea>
<div class="eb-form__label">Label</div>
</div>
</div>
<%= content_tag :div, class: 'eb-form' do %>
<%= content_tag :div, class: 'eb-form__row' do %>
<%= text_area_tag '', '', class: 'eb-form__input' %>
<%= content_tag :div, 'Label', class: 'eb-form__label' %>
<% end %>
<% end %>
<%= content_tag :div, class: 'eb-form' do %>
<%= content_tag :div, class: 'eb-form__row' do %>
<%= text_area_tag '', '', class: 'eb-form__input --xl' %>
<%= content_tag :div, 'Label', class: 'eb-form__label' %>
<% end %>
<% end %>
El modificador --xs|sm|md|lg agrega altura mínima al textarea. Por defecto usa el valor de medium
Checkbox
Html
Rails
<div class="eb-checkbox">
<label>
<input type="checkbox">
Label
</label>
</div>
<%= tag.div class: 'eb-checkbox' do %>
<%= label_tag :something do %>
<%= check_box_tag 'Label', :something %>
Label
<% end %>
<% end %>
Para deshabilitar un checkbox agregamos la clase disabled eb-checkbox disabled.
Radio
Html
Rails
<div class="eb-radio">
<label for="id">
<span class="flex:1">Label</span>
<input type="radio" id="id" name="name">
</label>
</div>
<%= tag.div class: 'eb-radio' do %>
<%= label_tag 'id' do %>
<%= tag.span 'Label', class: "flex:1" %>
<%= radio_button_tag 'id', 'something' %>
<% end %>
<% end %>
Para deshabilitar un radio agregamos la clase disabled eb-radio disabled.
Toggler
Html
Rails
<div class="eb-toggle">
<label for="id">
Label
<input type="checkbox" id="id" name="name">
</label>
</div>
<%= tag.div class: 'eb-toggle' do %>
<%= label_tag 'id' do %>
<%= 'Label' %>
<%= check_box_tag 'id', 'something' %>
<% end %>
<% end %>
Para deshabilitar un toggle agregamos la clase disabled eb-toggle disabled.
Segmentados
<div class="segmented-control" data-filter-toggle-btn-group>
<%= link_to 'A', '#', class: 'segmented-control__button selected' %>
<%= link_to 'B', '#', class: 'segmented-control__button' %>
<%= link_to 'C', '#', class: 'segmented-control__button' %>
</div>
Select
Usamos easyselect para construir nuestro propio select. Este componente toma de base los dropdowns pero con vitaminas.
En easy_select.rb puedes encontrar la configuración completa del dropdown.
Idioma
Rails
<div class="eb-form__row">
<div class="eb-form__dropdown">
<%= easy_select_tag(
value: value,
choices: choices,
placeholder: t('title'),
mobile_header_title: t('.mobile_title'),
id: :some_id,
search: {
placeholder: t('.placeholder'),
}
)
%>
</div>
<div class="eb-form__label">Idioma</div>
</div>
Phone
Teléfono
<div class="eb-form__split --phone">
<div class="eb-form__row">
<%= form.easy_select(
:something,
choices: @something,
empty_results_text: '',
mobile_header_title: '',
selected_choice_text_key: :calling_code
)
%>
</div>
<div class="eb-form__row">
<%= form.phone_field(
:something,
class: 'eb-form__input',
autocomplete: 'off',
autofocus: true,
placeholder: '',
minlength: UserMobilePhone::MIN_LOCAL_MOBILE_PHONE_LENGTH,
maxlength: UserMobilePhone::MAX_LOCAL_MOBILE_PHONE_LENGTH,
pattern: '\d+',
data: { pattern_restriction: true },
title: t('account.phone.input_only_digits')
)
%>
<%= content_tag :span, class: 'eb-form__sublabel' do %>
<%= icon(:fal, 'info-circle') %>
<%= t('something.good') %>
<% end %>
</div>
</div>
Code
Label
Html
Rails
<div class="eb-form">
<div class="eb-form__row">
<input class="eb-form__input --code" maxlength="5">
<div class="eb-form__label">Label</div>
</div>
</div>
<%= content_tag :div, class: 'eb-form' do %>
<%= content_tag :div, class: 'eb-form__row' do %>
<%= text_area_tag '', '', class: 'eb-form__input --code', maxlength: '5' %>
<%= content_tag :div, 'Label', class: 'eb-form__label' %>
<% end %>
<% end %>
Agrupación
Append
Cuando necesitamos agregar un separador que sea parte de row podemos usar la estructura --append.
Tamaño
m²
<div class="eb-form">
<div class="eb-form__row --append">
<div class="--left">
<input type="text" class="eb-form__input" placeholder="Placeholder">
<%= content_tag :div, 'Label', class: 'eb-form__label' %>
</div>
<div class="--right">
<%= content_tag :div, 'Append', class: 'eb-form__append' %>
</div>
</div>
</div>
Si solo queremos poner texto plano en la sección de la derecha debemos usar el div eb-form__append.
Select
<div class="eb-form">
<div class="eb-form__row --append">
<div class="--left">
<input type="text" class="eb-form__input" placeholder="Placeholder">
<%= content_tag :div, 'Label', class: 'eb-form__label' %>
</div>
<div class="--right">
<div class="eb-form__dropdown">
<div class="dropdown --bottom-sheet --select">
<div class="button --outline --icon dropdown-toggle" data-toggle="dropdown">
USD
<i class="far fa-angle-down"></i>
</div>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-content">
<div class="dropdown-header">
<div class="dropdown-title">
<div>Moneda</div>
</div>
</div>
<section>
<a class="dropdown-item selected" href="#">USD</a>
<a class="dropdown-item" href="#">MXN</a>
<a class="dropdown-item" href="#">CLP</a>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>