【Tailwind CSS】検索フィールドとオブジェクトの一体化
ソース
検索フィールドコンポーネント
export default function SearchBox() {
return (
<div className='flex justify-center'>
<input
placeholder='検索'
className='h-8 w-48 rounded-e-none rounded-s-3xl border-y border-l border-gray-700 px-3 transition-colors dark:bg-slate-800'
/>
<button
className='flex h-8 w-10 items-center justify-center rounded-e-3xl border-y border-r border-gray-700 bg-gray-700 px-2 transition-colors hover:border-gray-800 hover:bg-gray-800'
>
<span className='i-tabler-zoom size-4 bg-white transition-colors dark:bg-slate-200' />
</button>
</div>
);
}
rounded=border-radius
をそれぞれで制御し,justify-center
で繋げると1つの要素のように振る舞うことができます.そのため,このdiv
をまとめてコンポーネント化することで自由な場所に貼り付けても分離しないようにします.
メモ
rounded-s
のs
は start, e は end
上のコードによって下の結果が得られます.
使用したアイコン
アイコン名
i-tabler-zoom
導入方法
次を参照してください.
コメント
自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.