items-contactos.yaml

name: Items Contactos
description: Muestra diferentes items de contacto (Ícono +  Texto).
type: particle
icon: fa fa-check-square-o

form:
  fields:
    enabled:
      type: input.checkbox
      label: Habilitar
      description: Habilitar esta partícula.
      default: true

    separador00:
      type: separator.note
      class: alert alert-info
      content: '<h4>Ajustes Generales</h4>'

    titulo:
      type: input.text
      label: Título
      description: 'Título de la partícula'

    etiquetatitulo:
      type: select.select
      label: Etiqueta del título
      description: Define la etiqueta HTML que envolverá el título.
      placeholder: 'h3'
      default: h3
      options:
        h1: h1
        h2: h2
        h3: h3
        h4: h4
        h5: h5
        h6: h6

    clasecsstitulo:
      type: input.text
      label: Clase CSS del título
      description: 'La clase CSS para el título de la partícula'
    
    pretexto:
      type: textarea.textarea
      label: Texto previo
      description: texto a mostrar antes de la lista. 

    orientacionitems:
      type: input.radios
      label: Orientación Items
      description: ¿Cómo deseas mostrar los items?
      default: g-item-dis-horizontal
      options:
        g-item-dis-horizontal: Horizontal
        g-item-dis-vertical: Vertical

    alineacion:
      type: input.radios
      label: Alineación horizontal
      description: Alineación horizontal de los Items
      default: g-item-cont-izq
      options:
        g-item-cont-izq: Izquierda
        g-item-cont-cen: Centrado
        g-item-cont-der: Derecha

    separacionitems:
      type: input.text
      label: Separación entre items
      description: 'Tamaño del ícono que acompaña al texto'
      placeholder: '1rem'

    clasecssgeneral:
      type: input.selectize
      label: Clases CSS
      description: Clases CSS para esta partícula.
      default:
    
    extrageneral:
      type: collection.keyvalue
      label: Atributos adicionales
      description: Ingrese atributos adicionales a la etiqueta.
      key_placeholder: Key (data-*, style, ...)
      value_placeholder: Value
      exclude: ['id', 'class']

    separador01:
      type: separator.note
      class: alert alert-info
      content: '<h4>Ajustes del ícono</h4>'

    tamanoicono:
      type: input.text
      label: Tamaño ícono
      description: 'Tamaño del ícono que acompaña al texto'
      placeholder: '1rem'
    
    coloricono:
      type: input.colorpicker
      label: Color del Ícono
      placeholder: 'Color del Ícono'

    alineacionicono:
      type: input.radios
      label: Posición del ícono
      description: Alineación del ícono con respecto al texto.
      default: g-item-ico-izqu
      options:
        g-item-ico-arri: Arriba
        g-item-ico-izqu: Izquierda
        g-item-ico-abaj: Abajo

    espaciadoicono:
      type: input.text
      label: Separación del ícono
      description: 'Distancia del ícono con respecto al texcto.'
      placeholder: '0.5rem'

    separador02:
      type: separator.note
      class: alert alert-info
      content: '<h4>Ajustes del texto</h4>'

    tamanotexto:
      type: input.text
      label: Tamaño texto
      description: 'Tamaño del texto'
      placeholder: '1rem'

    colortexto:
      type: input.colorpicker
      label: Color del texto
      placeholder: 'Color del texto'

    separador03:
      type: separator.note
      class: alert alert-info
      content: '<h4>Número de Items</h4>'

 
    items:
      type: collection.list
      array: true
      label: Items de contacto
      description: Crear tus items de contacto.
      value: name
      ajax: true

      fields:

        icon:
          type: input.icon
          label: Icono

        texto:
          type: textarea.textarea
          label: Texto

        link:
          type: input.text
          label: Enlace

        target:
          type: select.select
          label: Target
          description: Define si el enlace se abrirá en una nueva ventana. 
          placeholder: 'Seleccionar'
          default: _parent
          options:
            _parent: Misma ventana
            _blank: Nueva ventana

        class:
          type: input.selectize
          label: Clases CSS
          description: Clases CSS el item.