Personnalisation des vues de pagination pour Tailwind
This commit is contained in:
parent
18086409af
commit
bd5d95803f
|
|
@ -6,6 +6,10 @@
|
||||||
per_page: number of items to fetch per page
|
per_page: number of items to fetch per page
|
||||||
remote: data-remote
|
remote: data-remote
|
||||||
-%>
|
-%>
|
||||||
<span class="first">
|
<%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||||
<%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
|
<span class="sr-only"><%= t('views.pagination.first').html_safe %></span>
|
||||||
</span>
|
<!-- Heroicon name: solid/chevron-double-left -->
|
||||||
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -5,4 +5,7 @@
|
||||||
per_page: number of items to fetch per page
|
per_page: number of items to fetch per page
|
||||||
remote: data-remote
|
remote: data-remote
|
||||||
-%>
|
-%>
|
||||||
<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span>
|
|
||||||
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
||||||
|
<%= t('views.pagination.truncate').html_safe %>
|
||||||
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,11 @@
|
||||||
per_page: number of items to fetch per page
|
per_page: number of items to fetch per page
|
||||||
remote: data-remote
|
remote: data-remote
|
||||||
-%>
|
-%>
|
||||||
<span class="last">
|
<%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||||
<%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
|
<span class="sr-only"><%= t('views.pagination.last').html_safe %></span>
|
||||||
</span>
|
<!-- Heroicon name: solid/chevron-double-right -->
|
||||||
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||||
|
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,10 @@
|
||||||
per_page: number of items to fetch per page
|
per_page: number of items to fetch per page
|
||||||
remote: data-remote
|
remote: data-remote
|
||||||
-%>
|
-%>
|
||||||
<span class="next">
|
<%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||||
<%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
|
<span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
|
||||||
</span>
|
<!-- Heroicon name: solid/chevron-right -->
|
||||||
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,4 @@
|
||||||
per_page: number of items to fetch per page
|
per_page: number of items to fetch per page
|
||||||
remote: data-remote
|
remote: data-remote
|
||||||
-%>
|
-%>
|
||||||
<span class="page<%= ' current' if page.current? %>">
|
<%= link_to page, url, { remote: false, rel: page.rel, class: "inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 #{"bg-gray-100" if page.current?}"} %>
|
||||||
<%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %>
|
|
||||||
</span>
|
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,21 @@
|
||||||
paginator: the paginator that renders the pagination tags inside
|
paginator: the paginator that renders the pagination tags inside
|
||||||
-%>
|
-%>
|
||||||
<%= paginator.render do -%>
|
<%= paginator.render do -%>
|
||||||
<nav class="pagination" role="navigation" aria-label="pager">
|
<div>
|
||||||
<%= first_page_tag unless current_page.first? %>
|
<nav class="relative z-0 inline-flex shadow-sm -space-x-px" role="navigation" aria-label="pager">
|
||||||
<%= prev_page_tag unless current_page.first? %>
|
<%= first_page_tag %>
|
||||||
<% each_page do |page| -%>
|
<%= prev_page_tag %>
|
||||||
<% if page.display_tag? -%>
|
<% each_page do |page| -%>
|
||||||
<%= page_tag page %>
|
<% if page.display_tag? -%>
|
||||||
<% elsif !page.was_truncated? -%>
|
<%= page_tag page %>
|
||||||
<%= gap_tag %>
|
<% elsif !page.was_truncated? -%>
|
||||||
|
<%= gap_tag %>
|
||||||
|
<% end -%>
|
||||||
<% end -%>
|
<% end -%>
|
||||||
<% end -%>
|
<% unless current_page.out_of_range? %>
|
||||||
<% unless current_page.out_of_range? %>
|
<%= next_page_tag %>
|
||||||
<%= next_page_tag unless current_page.last? %>
|
<%= last_page_tag %>
|
||||||
<%= last_page_tag unless current_page.last? %>
|
<% end %>
|
||||||
<% end %>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
<% end -%>
|
<% end -%>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,10 @@
|
||||||
per_page: number of items to fetch per page
|
per_page: number of items to fetch per page
|
||||||
remote: data-remote
|
remote: data-remote
|
||||||
-%>
|
-%>
|
||||||
<span class="prev">
|
<%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
|
||||||
<%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
|
<span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
|
||||||
</span>
|
<!-- Heroicon name: solid/chevron-left -->
|
||||||
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<% end %>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,9 @@
|
||||||
<%= javascript_include_tag "turbo", type: "module-shim" %>
|
<%= javascript_include_tag "turbo", type: "module-shim" %>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="bg-gray-100">
|
||||||
<%= yield %>
|
<div class="bg-white p-4 md:container md:mx-auto">
|
||||||
|
<%= yield %>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue