[React+Tailwind] Flowbite で Dropdown を表示してみる | 心を無にして始める React
準備
Flowbite が使えるプロジェクトを準備します。
Dropdown コンポーネントをつくる
./src/components 配下に Dropdown.js を作ります。
Dropdown コンポーネントをつかう
いつものように App.js を編集していきます。
結果
はい、できました。
Flowbite が使えるプロジェクトを準備します。
./src/components 配下に Dropdown.js を作ります。
import { forwardRef } from 'react';
import { Dropdown as FlowbiteDropdown } from 'flowbite-react';
const Dropdown = forwardRef((
{
arrowIcon = true,
children,
floatingArrow = false,
inline = false,
label,
...otherProps
},
ref,
) => {
return (
<FlowbiteDropdown
arrowIcon={arrowIcon}
floatingArrow={floatingArrow}
inline={inline}
label={label}
ref={ref}
{...otherProps}
>
{children}
</FlowbiteDropdown>
);
});
const DropdownDivider = (
{
...otherProps
},
) => {
return (
<FlowbiteDropdown.Divider
{...otherProps}
/>
);
};
const DropdownHeader = forwardRef((
{
children,
...otherProps
},
ref,
) => {
return (
<FlowbiteDropdown.Header
ref={ref}
{...otherProps}
>
{children}
</FlowbiteDropdown.Header>
);
});
const DropdownItem = (
{
children,
icon,
onClick,
...otherProps
},
) => {
return (
<FlowbiteDropdown.Item
icon={icon}
onClick={onClick}
{...otherProps}
>
{children}
</FlowbiteDropdown.Item>
);
};
export default Object.assign(Dropdown, {
Divider: DropdownDivider,
Header: DropdownHeader,
Item: DropdownItem,
});
いつものように App.js を編集していきます。
import { CubeIcon } from '@heroicons/react/24/solid';
import Dropdown from './components/Dropdown';
import './App.css';
function App() {
return (
<div className="dark">
<div className="h-screen p-8 flex flex-col justify-center items-center dark:!bg-gray-900">
<div className="flex gap-3">
<Dropdown label="Dropdown button">
<Dropdown.Item>
Dashboard
</Dropdown.Item>
<Dropdown.Item>
Settings
</Dropdown.Item>
<Dropdown.Item>
Earnings
</Dropdown.Item>
<Dropdown.Item>
Sign out
</Dropdown.Item>
</Dropdown>
</div>
<div className="mt-4 flex gap-3 dark:text-white">
<Dropdown
label="Dropdown"
inline={true}
placement="bottom-start"
>
<Dropdown.Header>
<span className="block text-sm">
Bonnie Green
</span>
<span className="block text-sm font-medium truncate">
bonnie@example.com
</span>
</Dropdown.Header>
<Dropdown.Item icon={CubeIcon}>
Dashboard
</Dropdown.Item>
<Dropdown.Item icon={CubeIcon}>
Settings
</Dropdown.Item>
<Dropdown.Item icon={CubeIcon}>
Earnings
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item icon={CubeIcon}>
Sign out
</Dropdown.Item>
</Dropdown>
</div>
</div>
</div>
);
}
export default App;
はい、できました。
このサイトでも Google Search Console を使っているのですが ...
準備 書き直すベースはこちらの Button コンポーネントです。 JavaSc ...
準備 書き直すベースはこちらの Timeline コンポーネントです。 Java ...
準備 Flowbite が使えるプロジェクトを準備します。 Breadcrumb ...
Suspense サスペンスにより、コンポーネントツリーの一部がまだ表示できない ...
準備 Flowbite が使えるプロジェクトを準備します。 Button コンポ ...
Google Search Console Insight の通知(過去28日間でクリック数が〇〇クリックに到達しました。)
このサイトでも Google Search Console を使っているのですが ...[React+Tailwind] Tooltip を TypeScript に書き直してみた | 心を無にして始める React
準備 書き直すベースはこちらの Tooltip コンポーネントです。 JavaS ...[React+Tailwind] Flowbite で Tooltip を表示してみる | 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Tooltip コン ...[React+Tailwind] Toast を TypeScript に書き直してみた | 心を無にして始める React
準備 書き直すベースはこちらの Toast コンポーネントです。 JavaScr ...[React+Tailwind] Timeline を TypeScript に書き直してみた | 心を無にして始める React
準備 書き直すベースはこちらの Timeline コンポーネントです。 Java ...