Collapse

Là loại component click vào sẽ ẩn hiện nội dung.

Ví dụ

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

export const Demo = () => {
  return (
    <Collapse>
      <Collapse.Item label="Collapse 1">
        <div>Content 1</div>
      </Collapse.Item>
      <Collapse.Item label="Collapse 2">
        <div>Content 2</div>
      </Collapse.Item>
      <Collapse.Item label="Collapse 3">
        <div>Content 3</div>
      </Collapse.Item>
    </Collapse>
  )
}

Collapse Props

Name	Type	Default	Description
accordion	boolean	false	Có phải là accordion hay không
children	ReactNode	-	Nội dung của component

Collapse.Item Props

Name	Type	Default	Description
isOpen	boolean	false	Trạng thái mở rộng của item
variant	default | bordered	default	Kiểu style của item
label	ReactNode	-	Label của item
children	ReactNode	-	Nội dung của item
renderRight	(isOpen: boolean) => ReactNode	-	Render phần bên phải của item