Selector

Hiển thị icon selected khi select vào item

Ví dụ

import { Selector } from '@xobuilder/ui';

const Demo: FC = () => {
  const [selected, setSelected] = useState(false);

  return (
    <Selector
      selected={selected}
      onSelect={() => setSelected(!selected)}
    >
      Item
    </Selector>
  );
};

Props

Name	Type	Default	Description
children	ReactNode	-	Nội dung của selector
selected?	boolean	false	Trạng thái của selector
position?	'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center' | 'center-center'	'center-center'	Vị trí của selector
top?	string	0.6rem	Custom giá trị top
left?	string	0.6rem	Custom giá trị left
bottom?	string	0.6rem	Custom giá trị bottom
right?	string	0.6rem	Custom giá trị right
selectedComponent?	ReactNode	<Icon name="CircleTickMajor" size={28} />	Component khi selected
unselectedComponent?	ReactNode	null	Component khi unselected
onSelect	() => void	-	Callback khi click vào selector