如何在 Tailwind CSS 中创建靠近文本的栏？

Question

我是 Tailwind 的初学者 CSS。而且我发现很难创建如图所示的按钮设计 tailwind Css

所以我想在单个部分（例如）时在右侧显示那个小栏。 主页、趋势、Feed 已按下。那么你能帮我解决一下吗？我想要顺风 css.

中的答案

代码如下：

<div className="flex">
      <div className="w-72 bg-white text-gray-100 shadow-lg">
        <div class="flex h-full flex-col p-7 pl-8 text-sm">
          <div class="relative flex w-full items-center justify-between">
            <a class="flex space-x-5 py-5 text-slate-800">
              <MusicNoteIcon class="h-5 w-5"></MusicNoteIcon>
              <p class="font-semibold">Sovereignty Kingdom</p>
            </a>
            <button class="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
              <SwitchHorizontalIcon class="h-5 w-5"></SwitchHorizontalIcon>
            </button>
          </div>

          <nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
            <HomeIcon className="h-5 w-5" />
            <p>Home</p>
          </nav>
          <nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
            <TrendingUpIcon className="h-5 w-5" />
            <p>Trends</p>
          </nav>
          <nav className="delay-50 duration-2 cursor-pointer00 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
            <RssIcon className="h-5 w-5" />
            <p>Feed</p>
          </nav></div>
      </div>




</div>```

Answer 1

我不确定这是否是唯一的解决方案，但这对我有用：

我做的第一件事是为按钮组定义一个数组：

const elements=[
        {name:'Home',ico:faHome},    //I'm using font awesome Icons,you can use yours
        {name:'Trend',ico:faFireAlt},   
        {name:'Feed',ico:faFeed}    
    ]

然后我定义了一个状态，这样我就知道哪个按钮被点击了，比如

 //(-1) is the button id, default (-1) so that the bar won't render by default 
const [clickedId, setClickedId] = useState(-1);

完整代码如下：

<div className='flex m-14 w-72   '>
  <div className="w-full  bg-white text-gray-100 shadow-lg">
    <div className="flex h-full flex-col p-7 pl-8 text-sm">
      <div className="relative flex w-full items-center justify-between">
        <a className="flex space-x-5 py-5 text-slate-800">
          <div className="h-5 w-5 bg-teal-800 rounded-full"></div>
          <p className="font-semibold">Sovereignty Kingdom</p>
        </a>
        <button className="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
          <div className="h-5 w-5 bg-teal-800 rounded-full"></div>
        </button>
        
      </div>
      {/* map over the buttons array to render them  */}

      {elements.map((el,id)=>(
     {/* give every button a key */}
        <button key={id} name={el.name}

      {/* when a button is clicked assign clickedId to the current button id */}
        onClick={() => setClickedId(id)} 
      {/* based on the button id append classes to make the sidebar */}
        className={`relative delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 
                text-slate-800 transition duration-75 ease-in-out hover:-translate-y-1
                 hover:scale-110 hover:bg-black hover:text-white
                 ${(id === clickedId) ?`after:w-1 after:h-12  after:bg-black after:rounded-full after:absolute after:-right-7
                  hover:after:transition hover:after:duration-75 hover:after:-right-4 hover:after:ease-in-out`:'' }`}>

            
            <FontAwesomeIcon className='h-5 w-5 ' icon={el.ico}/>
            <p>{el.name}</p>
        </button>
      ))}
      </div>
   </div>
</div>

或在 codesandbox 上查看 Live。

如何在 Tailwind CSS 中创建靠近文本的栏？

How to create a bar near to text in Tailwind CSS?

animation

tailwind-css