Skip to main content

Picker

styles in docs/styles/_forms.scss.

Autocomplete Picker (React Component)#

data: is requierd!

limitItems: default value is 5.

defaultPicked: is optional.

onChange: get picked value function.

تاریختجربه کاربریتحصیلی و آموزشی
    const AutocompletePickerApp = () => {
    const getPickedItems = (topics) => {
    console.log(topics);
    };
    const data = [
    { name: 'startup', id: 1, fa_name: 'استارتاپ' },
    { name: 'islam', id: 2, fa_name: 'مذهبی' },
    { name: 'economy', id: 3, fa_name: 'اقتصاد' },
    { name: 'cybersecurity', id: 4, fa_name: 'امنیت سایبری' },
    { name: 'iot', id: 5, fa_name: 'اینترنت اشیا' },
    { name: 'marketing', id: 6, fa_name: 'بازاریابی' },
    { name: 'computergame', id: 7, fa_name: 'بازی رایانه ای' },
    { name: 'programming', id: 8, fa_name: 'برنامه نویسی' },
    { name: 'productivity', id: 9, fa_name: 'بهره وری' },
    { name: 'cryptocurrency', id: 10, fa_name: 'پول رمزی' },
    { name: 'history', id: 11, fa_name: 'تاریخ' },
    { name: 'ux', id: 12, fa_name: 'تجربه کاربری' },
    { name: 'education', id: 13, fa_name: 'تحصیلی و آموزشی' },
    ];
    const defaultPicked = [
    { name: 'history', id: 11, fa_name: 'تاریخ' },
    { name: 'ux', id: 12, fa_name: 'تجربه کاربری' },
    { name: 'education', id: 13, fa_name: 'تحصیلی و آموزشی' },
    ];
    return (
    <AutocompletePicker
    data={data}
    defaultPicked={defaultPicked}
    limitItems={5}
    onChange={getPickedItems}
    placeholder={'دسته‌ای وارد کنید...'}
    />
    );
    };

    Picker (React Component)#







    پست مورد نظر خود را انتخاب کنید:

    const App = () => {
    const onChange = (value) => {
    console.log(value);
    };
    return (
    <>
    <Picker defaultValue="انتخاب ۱" onChange={onChange}>
    <PickerOption>انتخاب ۱</PickerOption>
    <PickerOption>انتخاب ۲</PickerOption>
    <PickerOption>انتخاب ۳</PickerOption>
    </Picker>
    <Picker onChange={onChange} fullWidth>
    <PickerOption>انتخاب ۱</PickerOption>
    <PickerOption>انتخاب ۲</PickerOption>
    <PickerOption>انتخاب ۳</PickerOption>
    </Picker>
    </>
    );
    };