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>
</>
);
};