Vebego Component Library

Inline Search 

<div class="mol-inline-search">
    <form action="#" method="get">
        <div class="atm-form-input  ">
            <input class="form-input" type="search" id="input" name="input">
            <label class="atm-form-label form-label " for="input">Verhalen zoeken</label>

            <span class="atm-icon form-input-error-icon far fa-times   "></span>
            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
        </div>

        <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
            <span class="button-content">

                <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
            </span>
        </button>

    </form>
</div>
 
<div class="mol-inline-search">
    <form action="{{formAction}}" method="{{formMethod}}">
        {{#if docType}}
        <input type="hidden" name="dt" value="{{docType}}">
        {{/if}}
        {{ render '@input' input merge=true }}
        {{ render '@button-primary--icon-only-md' button merge=true }}
    </form>
</div>
 
{
  "input": {
    "type": "search",
    "label": {
      "text": "Verhalen zoeken"
    }
  },
  "button": {
    "element": "button",
    "type": "submit",
    "modifier": "button-md",
    "icon": {
      "style": "far",
      "icon": "fa-search",
      "size": "fa-lg"
    },
    "showTriangle": false
  },
  "formMethod": "get",
  "formAction": "#",
  "docType": ""
}
  • Content: 
    .mol-inline-search {
    @apply md:border-b border-gray-300;
    @apply bg-gray-50 md:bg-white pl-4 md:pl-0;

    form {
        @apply flex;
    }

    .atm-form-input {
        @apply w-full;

        .form-input {
            @apply border-none;
            @apply pl-0;
            @apply rounded-none;
            @apply w-full bg-gray-50 md:bg-white;
        }

        .atm-form-label {
            @apply pl-0;
            @apply text-gray-300;
        }
    }

    .atm-button {
        @apply bg-gray-50 md:bg-white;
        @apply rounded-none;
        @apply w-12;
        @apply text-center mr-0 md:mr-4;

        .atm-icon {
            @apply text-black;
        }
    }
}
  • URL: /components/raw/inline-search/inline-search.css
  • Filesystem Path: src\components\03-molecules\inline-search\inline-search.css
  • Size: 723 Bytes
  • Content: 
    (function () {


    'use strict';

    $('.mol-inline-search form').on('submit', function(e) {

        return $(this).find('input[type="search"]').val().trim() !== '';
    });
})();
  • URL: /components/raw/inline-search/inline-search.js
  • Filesystem Path: src\components\03-molecules\inline-search\inline-search.js
  • Size: 192 Bytes

No notes defined.