0.0.11 • Published 4 years ago
@ant-extensions/searchbar v0.0.11
Ant Extensions - Search Bar
Kibana style searchbar with filters
Install
# Using npm
npm install @ant-extensions/searchbar
# Using yarn
yarn add @ant-extensions/searchbar
Basic Usage
import React, { useState } from "react";
import { SearchBar } from "@ant-extensions/searchbar";
export const Tester = () => {
return <SearchBar collapsed={false} filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />;
};
import React, { useState } from "react";
import { FilterBar } from "@ant-extensions/searchbar";
export const Tester = () => {
return <FilterBar filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />;
};
Provide a default time filter
{ isTimeField: true, isRequired: true }
to enable time input
FieldSelect
Select input for fields, to maintain consistency throughout the applicationimport React, { useState } from "react"; import { Form } from "antd"; import { FieldSelect } from "@ant-extensions/searchbar"; export const Tester = () => { return ( <Form.Item name="field"> <FieldSelect value={"fieldKey"} onChange={(fieldKey) => "do something"} fields={[]} />; </Form.Item> ); };