我正在使用alpinejs x-for循环构建一个按钮组,其中第一个和最后一个按钮应该使用first:rounded-l-md
和last:rounded-r-md
具有roundd-l-md和roundd-r-md。last:rounded-r-md
工作良好,但first:rounded-l-md
不工作,因为我认为用于循环的<template>
被视为第一个元素。
我添加了一个jsfiddle:https://jsfiddle.net/20qega7d/
我认为这是因为模板标记中的第一个元素,但我做了一个转折来得到你想要的,我添加了一个key
,因为它在x-for
中是推荐的。现在,我在for in loop
中返回了数组索引,然后绑定一个类来检查索引是否为空,它应该向其中添加rounded-l-md
<!-- Include CDN JavaScript -->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Specify a custom TailwindCSS configuration -->
<script type="tailwind-config">
{
variants: {
extend: {
borderRadius: ['last, first'],
},
},
}
</script>
<div class="p-10" x-data="{ timeframes: [{id: 1, n: '1d'}, {id: 2, n: '1w'}, {id: 3, n: '1y'}] }">
<span class="relative z-0 inline-flex shadow-sm rounded-md">
<template x-for="(timeframe, index) in timeframes" :key="timeframe.id">
<button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 last:rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
:class="{'rounded-l-md' : !index}"
>
<span x-text="timeframe.n"></span>
</button>
</template>
</span>
</div>