Card Selector
Playground
- Ruby
- Html
<%= card_selector_widget enable_search: true, search_label_text: 'Buscar Importador',categories: [
{name: 'Todos', value: 'all'},
{name: 'Empleados', value: 'categoria-1'},
{name: 'Organizacion', value: 'categoria-2'}
],enable_form: false do |widget| %>
<% widget.item do |item|
item.title = 'Empleados'
item.icon = :plus
item.action_path = new_recruiting_selection_process_survey_path
item.category_value = 'all'
item.action_method = :get
item.color = primary
item.tag = 'Importador'
end %>
<% widget.item do |item|
item.title = "Cargos"
item.icon = :file
item.action_path = create_from_template_recruiting_selection_process_surveys_path
item.category_value = 'categoria-1'
item.action_method = :post
item.color = warning
item.tag = 'Modificador'
end %>
<% widget.item do |item|
item.title = "Tratos"
item.icon = :file
item.action_path = create_from_template_recruiting_selection_process_surveys_path
item.category_value = 'categoria-2'
item.action_method = :post
item.color = primary
item.tag = 'Importador'
end %>
<% end %>
<div class="card-selector-component">
<div class="card-selector-search-content row">
<div class="col-md-4">
<div class="input-group d-flex flex-wrap mb-2 input-prepend">
<div id="input-prepend" class="input-group-prepend">
<span class="input-group-text">
<span class=" material-icons notranslate " aria-hidden="true">search</span>
</span>
</div>
<input class="search-filter fuzzy-search mr-0 form-control" type="search" name="filter" placeholder="Buscar Importador">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 nav-tabs-pills-wrapper">
<div class="nav-tabs-pills mb-3">
<ul class="nav flex-column nav-pills" data-id="4153">
<li class="nav-item ">
<a href="#all" class="nav-link active" data-toggle="tab">
<div class="info">
<div class="title py-1" data-overflow-tooltip="Todos">Todos</div>
</div>
</a>
</li>
<li class="nav-item ">
<a href="#benefits" class="nav-link" data-toggle="tab">
<div class="info">
<div class="title py-1">Empleados</div>
</div>
</a>
</li>
<li class="nav-item ">
<a href="#organizacion" class="nav-link" data-toggle="tab">
<div class="info">
<div class="title py-1">Organización</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-8 tab-content-wrapper">
<div class="tab-content p-0" data-id="4153">
<div id="all" aria-labelledby="all" class="tab-pane active">
<div class="">
<div class="cards-container list">
<div class="bux-card bux-card-primary">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">badge</span>
</div>
<span class="head-info">
<div class="info-title">Empleados</div>
<div class="tag">
<span>Importador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-warning">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Trabajos</div>
<div class="tag">
<span>Modificador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-primary">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Tratos</div>
<div class="tag">
<span>Importador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-warning">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Cargos</div>
<div class="tag">
<span>Modificador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-primary">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Areas</div>
<div class="tag">
<span>Importador</span>
</div>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="benefits" aria-labelledby="benefits" class="tab-pane">
<div class="">
<div class="cards-container list">
<div class="bux-card bux-card-primary">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">badge</span>
</div>
<span class="head-info">
<div class="info-title">Empleados</div>
<div class="tag">
<span>Importador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-warning">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Trabajos</div>
<div class="tag">
<span>Modificador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-primary">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Tratos</div>
<div class="tag">
<span>Importador</span>
</div>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="organizacion" aria-labelledby="organizacion" class="tab-pane">
<div class="">
<div class="cards-container list">
<div class="bux-card bux-card-warning">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Cargos</div>
<div class="tag">
<span>Modificador</span>
</div>
</span>
</div>
</a>
</div>
<div class="bux-card bux-card-primary">
<a href="#">
<div class="bux-card-head px-3">
<div class="head-avatar mr-2">
<span class=" material-icons notranslate">loyalty</span>
</div>
<span class="head-info">
<div class="info-title">Areas</div>
<div class="tag">
<span>Importador</span>
</div>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
lista de parámetros
Parámetro | Tipo | Detalle |
items | Block | Tiene subpropiedades que crean cards (title: String, subtitle: String, icon: Symbol, action_path: URL, action_method: type(:post, :get), action_params: [], message_tooltip: String) |
categories | Arrays | De igual forma tiene subpropiedades que generan los nav pills (name: String, description: String, value: String y define el id de la categorìa, color: type (:primary, :error)) |
enable_search | Boolean | Para habilitar el buscador |
search_label_text | String | Para agregar el texto del buscador |
enable_form | Boolean | Altura fija del componente |
title | String | El título del card |
subtitle | String | El subtítulo del card |
icono | String | Icono que debe aparecer en el card correspondiente a la opción |
color | String | Color de los cards si no tiene color la categoría |
action_path | String | Ruta de la acción que se debe ejecutar al seleccionar la opción |
action_method | String | Método de la solicitud http correspondiente a action_path |
action_params | String | Parámetros que se incluyen en la solicitud correspondiente a action_path |
message_tooltip | String | Parámetro que permite mostrar un mensaje en el tooltip, por defecto es nil |
category_value | String | Parámetro que permite identificar de que categoría forma parte, por defecto es nil |
data | String | Permite agregar opciones adicionales al card, por defecto es nil |
tag | String | Habilita el chip Escribiendo su texto |