如何在尾风CSS中创建接近文本的栏？

Question

我是尾风CSS的初学者。我发现很难像顺风Css中所示的那样创建一个按钮设计。

​

因此，我想显示在右边的小条，当个别的部分喜欢。家庭，趋势，饲料是按下。所以你能帮我一下吗。我想要的答案在顺风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>

或者在代码框中选中。