[Pagination] how to Aligning 'Prev' and 'Next' Buttons to the Ends

[sonsu95]

Description

In the pagination component, I want to move the prev and next slots to the left and right ends of the component by default.

However, since they are listed on the same layer as the regular page number buttons, I can't think of any other way to do this other than to control the DOM directly.

Is there any way to do it differently?

Here is my code

<u-pagination
        v-model="page"
        class="w-full justify-between"
        :page-count="itemsPerPage"
        :total="items.length"
        :ui="paginationUi"
      >
        <template #prev="{ onClick }">
          <u-button color="white" variant="ghost" size="md" @click="onClick">
            <template #leading>
              <div class="flex gap-x-2">
                <u-icon
                  class="w-5 h-5"
                  :name="isDark ? 'i-custom-arrow-left' : 'i-custom-arrow-left-solid'"
                />
                <div class="text-sm font-medium text-smokey-gray dark:text-light-silver">
                  Previous
                </div>
              </div>
            </template>
          </u-button>
        </template>

        <template #next="{ onClick }">
          <u-button color="white" variant="ghost" size="md" @click="onClick">
            <template #trailing>
              <div class="flex gap-x-2">
                <div class="text-sm font-medium text-smokey-gray dark:text-light-silver">Next</div>
                <u-icon
                  class="w-5 h-5"
                  :name="isDark ? 'i-custom-arrow-right' : 'i-custom-arrow-right-solid'"
                />
              </div>
            </template>
          </u-button>
        </template>
      </u-pagination>

const page = ref(1);
const itemsPerPage = ref(6);

const paginatedItems = computed(() => {
  const start = (page.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return items.value.slice(start, end);
});

const colorMode = useColorMode();
const isDark = computed(() => colorMode.value === 'dark');

const paginationUi = ref({
  default: {
    inactiveButton: {
      variant: 'soft',
      class:
        'w-10 h-10 flex items-center justify-center rounded-lg text-smokey-gray dark:text-light-silver text-sm',
    },
    activeButton: {
      variant: 'soft',
      size: 'xl',
      class:
        'w-10 h-10 flex items-center justify-center rounded-lg hover:bg-soft-lilac hover:dark:bg-soft-lilac bg-soft-lilac dark:bg-soft-lilac text-deep-violet dark:text-dark-green font-medium text-sm',
    },
  },
});

i want like this

[sandros94]

Sorry for the late reply.

Did you find any solution to this? If not, could you describe what you are aiming for? (even a simple drawing on that screenshot could help)