52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Accordion from 'react-bootstrap/Accordion';
|
|
import FForm from '../components/form';
|
|
import Select from '../components/select';
|
|
import TToggleButton from '../components/toggle-button';
|
|
export default function AAcordion() {
|
|
const [checked, setChecked] = useState(false);
|
|
const handleChecked = (e) => {
|
|
setChecked((checked)=>e.target.checked);
|
|
};
|
|
return (
|
|
<Accordion >
|
|
<Accordion.Item eventKey="0">
|
|
<Accordion.Header>Accordion Item #1</Accordion.Header>
|
|
<Accordion.Body>
|
|
foo
|
|
<Select
|
|
id='id'
|
|
name='name'
|
|
defaultValue={42}
|
|
options={[23,42,360]}
|
|
title='title'
|
|
/>
|
|
bar
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
<Accordion.Item eventKey="1">
|
|
<Accordion.Header>Accordion Item #2</Accordion.Header>
|
|
<Accordion.Body>
|
|
<TToggleButton
|
|
id="toggle-check"
|
|
type="checkbox"
|
|
variant="outline-secondary"
|
|
name="name"
|
|
checked={checked}
|
|
value="1"
|
|
onChange={handleChecked}
|
|
title="title"
|
|
/>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
<Accordion.Item eventKey="2">
|
|
<Accordion.Header>Accordion Item #3</Accordion.Header>
|
|
<Accordion.Body>
|
|
<FForm
|
|
/>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
</Accordion>
|
|
);
|
|
}
|