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>

            <i class="atm-icon form-input-error-icon far fa-times   "></i>

            <i class="atm-icon form-input-valid-icon far fa-check   "></i>

        </div>

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

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

                </span>
            </div>
        </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 bg-gray-50 rounded-full ;

    form {
        @apply flex justify-between outline-none;
    }

    .atm-form-input {

        .form-input {
            @apply border-none;
            @apply w-full rounded-full ;
            @apply bg-gray-50
        }

        .atm-form-label {
            @apply left-4;
            @apply text-gray-300;
        }
    }

    .atm-button {
        @apply rounded-none;
        @apply text-center m-0 p-0;
        background: transparent;

        .button-content-wrapper{
            @apply w-12;
        }
        .button-content{
            @apply w-full h-full;
        }

        .atm-icon {
            @apply text-black w-full;

            &::after{
                content: none;
            }
        }
    }
}
  • URL: /components/raw/inline-search/inline-search.css
  • Filesystem Path: src\components\03-molecules\inline-search\inline-search.css
  • Size: 831 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: 189 Bytes

No notes defined.