如何使用tailwind css在reactjs中设计折叠组件答案

【问题标题】：How to design a collapse component in reactjs with tailwind css如何使用tailwind css在reactjs中设计折叠组件
【发布时间】：2022-07-15 02:01:12
【问题描述】：

我正在尝试使用 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>

截图 1

我试过这样

      <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>

但是，输出显示如下：我希望信息部分显示在编辑信息按钮下方，就像上面的屏幕截图一样。

【问题讨论】：

标签： javascript css reactjs flexbox tailwind-css

【解决方案1】：

如果您希望信息部分显示在按钮下方。你不需要lg:flex-row 所以你的代码将是

<div className="flex items-center flex-col">
[...]
</div>

tailwind 还使用移动优先断点系统。所以你不需要将sm:添加到sm:flex-col。

<div className="flex flex-col lg:flex-row md:flex-row items-center"> 也一样。添加md:flex-row 后，您无需添加lg:flex-row。任何大于 md 的大小都将遵循定义为 md: 的同一类

更多信息可以在这里找到mobile-first-breakpoint-system

【讨论】：

【解决方案2】：

您可以使用详细标签。随意修改动画，或者隐藏默认图标并指定自定义图标。

<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>

【讨论】：