Skip to content

Latest commit

 

History

History
executable file
·
124 lines (94 loc) · 5.91 KB

README.md

File metadata and controls

executable file
·
124 lines (94 loc) · 5.91 KB
Raw

Search Bar

General

import React from "react";
import SearchBar from 'funda-ui/SearchBar';

export default () => {

    function handleChange(e, onComposition) {

        let temp = e.target.value;
        if (!onComposition) {
            console.log(temp);
        }
    }

    function handleSubmit() {
        console.log('submit');
    }

    return (
        <>

            <SearchBar
                placeholder="Search..."
                name="app-searchfiled"
            />


            <SearchBar
                btnId="app-submit-btn"
                name="app-searchfiled"
                appearance="pill"
                placeholder="Search..."
                onChange={handleChange}
                onSubmit={handleSubmit}
            />

        </>
    );
}

No spacing

import React from "react";
import SearchBar from 'funda-ui/SearchBar';

export default () => {


    return (
        <>

            <SearchBar
                ...
                wrapperClassName="position-relative"
                ...
            />

             <SearchBar
                ...
                wrapperClassName=""
                ...
            />

        </>
    );
}

API

Search Bar

import SearchBar from 'funda-ui/SearchBar';
Property Type Default Description Required
ref React.ForwardedRef - It is the return element of this component. -
wrapperClassName string mb-3 position-relative The class name of the control wrapper. -
controlClassName string form-control The class name of the control. -
controlExClassName string - The extended class name of controlClassName. -
controlGroupWrapperClassName string input-group The class name of the control group wrapper. -
controlGroupTextClassName string input-group-text The class name of the control group text. -
btnId string - ID of the specified button. -
appearance string - The overlay style of the control. The optional values are:
corners:
pill		 -
isSearchInput boolean false Whether to enable the search input, it will have an clear button -
value string - Set a default value for this control -
label string | ReactNode - It is used to specify a label for an element of a form.
Support html tags
 -
name string - Name is not deprecated when used with form fields. -
placeholder string - Specifies a short hint that describes. -
units string - Specify a unit identification string. Such as em, px, and so on. -
iconLeft ReactNode - Set the left icon of this control -
iconRight ReactNode - Set the right icon of this control -
maxLength number - Defines the maximum string length that the user can enter into it. -
minLength number - Defines the minimum string length that the user can enter into it. -
readOnly boolean false When present, it specifies that this component field is read-only. -
disabled boolean false Whether it is disabled -
required boolean false When present, it specifies that a field must be filled out before submitting the form. -
icon ReactNode <svg width="1.2em" height="1.2em" fill="#333" viewBox="0 0 16 16"><path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" /></svg> Set the icon of search -
autoComplete string off The autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control. -
autoCapitalize string off The autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input. -
spellCheck boolean false The spellcheck global attribute is an enumerated attribute that defines whether the element may be checked for spelling errors. -
onClick function - Call a function when the value of an HTML element is clicked. -
onKeyPressedCallback function - Return value from onKeyPressedCallback property to format the data of the control element, which will match the data structure of the component.
At the same time it returns the Control Event, you will use this function and use the return keyword to return a new value.
It fires when the keyboard is pressed. If return is not set, it will not return.
 -
onSubmit function - Call a function when a form is submitted. -
onChange function - Call a function when the value of an HTML element is changed. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The second is the composition event (Boolean)
 -
onBlur function - Call a function when a user leaves an form field. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The second is the composition event (Boolean)
 -
onFocus function - Call a function when an form field gets focus. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The second is the composition event (Boolean)
 -
onPressEnter function - The callback function that is triggered when Enter key is pressed. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The last is the composition event (Boolean)
 -

It accepts all props which this control support. Such as style, data-*, tabIndex, id, and so on.