![](/img/trans.png)
[英]How to design a ReactJS component that listens to a WebSocket and interacts with CSS animation
[英]How to design a collapse component in reactjs with tailwind css
我正在尝试使用 TailwindCSS 在 react JS 中创建折叠部分组件设计,在组件中,将有一个编辑按钮来打开和关闭信息部分,并且编辑信息按钮将在输入字段旁边。 设计已经完成(屏幕截图 1),但需要对样式进行一些调整,这会导致混淆如何将编辑信息按钮和信息部分代码放在单个组件中,以便设计看起来像下面的屏幕截图。
<div>
<div
className={[
'flex',
'justify-between',
'relative',
'lg:px-20',
'xl:px-40',
'py-6',
].join(' ')}
>
<div className="flex items-center sm:flex-col lg:flex-row ">
<div className="flex flex-col lg:flex-row md:flex-row items-center">
<StreamTokenInputField />
//EDIT INFO BUTTON
<button
className="button"
onClick={() => setIsCollapseTrue(!isCollapseTrue)}
>
{i18n.t(Edit Info)}
{isCollapseTrue ? (
<IoIosArrowUp className="font-extrabold ml-2 text-lg" />
) : (
<FiChevronDown className="font-extrabold ml-2 text-lg" />
)}
</button>
</div>
</div>
</div>
// INFO SECTION
<div
className={[
'container',
'mx-auto',
'md:w-full',
'w-96',
'py-8',
'my-4',
'lg:py-20',
'lg:px-40',
'bg-skin-card',
'rounded-3xl',
!isCollapseTrue && 'hidden',
].join(' ')}
>
{/* OTHER CODES */}
</div>
</div>
我试过这样
<div
className={[
'flex',
'justify-between',
'relative',
'lg:px-20',
'xl:px-40',
'py-6',
].join(' ')}
>
<div className="flex items-center sm:flex-col lg:flex-row ">
<div className="flex flex-col lg:flex-row md:flex-row items-center">
<StreamTokenInputField />
<button
className={[
'flex',
'button',
'button-green',
'xl:px-6',
'md:px-2',
'lg:px-10',
'lg:my-6',
'md:my-6',
'mx-4',
'justify-center',
'uppercase',
'font-semibold',
].join(' ')}
onClick={() => setIsCollapseTrue(!isCollapseTrue)}
>
{i18n.t(buttonName)}
{isCollapseTrue ? (
<IoIosArrowUp className="font-extrabold ml-2 text-lg" />
) : (
<FiChevronDown className="font-extrabold ml-2 text-lg" />
)}
</button>
<div
className={[
'container',
'mx-auto',
'md:w-full',
'w-96',
'py-8',
'my-4',
'lg:py-20',
'lg:px-40',
'bg-skin-card',
'rounded-3xl',
!isCollapseTrue && 'hidden',
].join(' ')}
>
{/* OTHER CODES */}
</div>
</div>
</div>
</div>
但是,输出显示如下:我希望信息部分显示在编辑信息按钮下方,就像上面的屏幕截图一样。
如果您希望信息部分出现在按钮下方。 你不需要lg:flex-row
所以你的代码将是
<div className="flex items-center flex-col">
[...]
</div>
顺风也使用移动优先断点系统。 所以你不需要添加sm:
到sm:flex-col
。
同样在这里<div className="flex flex-col lg:flex-row md:flex-row items-center">
。 添加md:flex-row
lg:flex-row
-row 。 任何大于 md 的大小都将遵循与md:
更多信息可以在这里找到mobile-first-breakpoint-system
您可以使用详细标签。 随意修改动画,或者隐藏默认图标并指定自定义图标。
<details className="open:bg-white border-b open:ring-1 open:ring-black/5 open:shadow-lg p-6 rounded-lg transform-gpu delay-75 duration-100 ease-in-out ">
<summary className="leading-6 text-slate-900 dark:text-white font-semibold select-none">
Why do they call it Ovaltine?
</summary>
<div className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
<p>The mug is round. The jar is round. They should call it Roundtine.</p>
</div>
</details>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.