如何更改高山颜色选择器中的项目数量？

Question

我将 https://codepen.io/mithicher/pen/LYpXxmX 中的颜色选择器添加到我的 tailwindcss 2 / Alpinejs 2.8 应用程序中它有效，但它在 1 行中显示 3 个圆圈的颜色项目，我没有找到如何在代码中更改它：

    <di v class="rounded-md bg-white shadow-xs px-4 py-3">
        <div class="flex flex-wrap -mx-2">
            <template x-for="(color, index) in colorPickerColors" :key="index">
                <div
                    class="px-2"
                >
                    <template x-if="colorSelected === color">
                        <div
                            class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white"
                            :style="`background: ${color}; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);`"
                        ></div>
                    </template>

                    <template x-if="colorSelected != color">
                        <div
                            @click="colorSelected = color"
                            @keydown.enter="colorSelected = color"
                            role="checkbox"
                            tabindex="0"
                            :aria-checked="colorSelected"
                            class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white focus:outline-none focus:shadow-outline"
                            :style="`background: ${color};`"
                        ></div>
                    </template>
                </div>
            </template>
        </div>
    </div>

因为我在 colorPickerColors 数组中有 18 个项目，所以我需要在 3 行中的任何一行中显示 6 个项目。

任何提示我如何在上面的代码中做到这一点？

谢谢！

Answer 1

根据 codepen link，将宽度更改为 w-56 而不是 w-40 以创建更多 space 6 个圆圈。

然后使用 grid grid-cols-6

而不是 flex flex-wrap

编辑：

我强烈推荐 Kevin Powell 的 CSS Grid videos。
请检查Tailwind Grid Template。

如何更改高山颜色选择器中的项目数量？

How to change number of items in alpine color picker?

javascript

tailwind-css

alpine.js