[英]In Rails, pagy style is not customizable
I am using Rails, Bulma css framework, and pagy gem.我正在使用 Rails、Bulma css 框架和 pagy gem。
<nav class="pagination">
<span class="" style=" margin-left:auto; margin-right:auto; font-weight:700;" >
<%== pagy_prev_link(@pagy, '‹ Previous', ' id="" class="pagination-link " style="" ') if @pagy.pages > 1 %>
</span>
<span class="" style="margin-left:auto; margin-right:auto; font-weight:700; ">
<%== pagy_next_link(@pagy, 'Next ›', 'id="" style="" class="pagination-link " ') if @pagy.pages > 1 %>
</span>
</nav>
The problem is that no matter what I try, I can't customize the look of the next and prev buttons.问题是无论我尝试什么,我都无法自定义下一个和上一个按钮的外观。 Right now the buttons show as bold-font Next and Prev, with Next in default blue, as there are more than 1 pages.
现在按钮显示为粗体下一个和上一个,下一个默认为蓝色,因为有超过 1 页。 I want to turn it into another color and also make it look like button with Bulma.
我想把它变成另一种颜色,也让它看起来像布尔玛的按钮。 I've tried inputting "pagination-link" to span;
我试过输入“分页链接”来跨越; to controller where the pagy is;
到pagy所在的controller; getting rid of span;
摆脱跨度; didn't work.
没用。
What can I do?我能做些什么? I'd really appreciate any help.
我真的很感激任何帮助。
You can custom the bulma pagy nav by create app/views/pagy/_bulma_nav.html.erb
with content:您可以通过使用以下内容创建
app/views/pagy/_bulma_nav.html.erb
定义 bulma pagy 导航:
<style>
.custom_color_green {
color: green !important;
background-color: yellow !important;
}
</style>
<%#
This template is i18n-ready: if you don't use i18n, then you can replace the pagy_t
calls with the actual strings ("‹ Prev", "Next ›", "…").
The link variable is set to a proc that returns the link tag.
Usage: link.call( page_number [, text [, extra_attributes_string ]])
-%>
<% link = pagy_link_proc(pagy) -%>
<%# -%><nav class="pagy-bulma-nav pagination is-centered" role="navigation" aria-label="pagination">
<% if pagy.prev -%> <%== link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'class="pagination-previous" aria-label="previous page"') %>
<% else -%> <a class="pagination-previous custom_color_green" disabled><%== pagy_t('pagy.nav.prev') %></a>
<% end -%>
<% if pagy.next -%> <%== link.call(pagy.next, pagy_t('pagy.nav.next'), 'class="pagination-next has-text-danger has-background-success" aria-label="next page"') %>
<% else -%> <a class="pagination-next" disabled><%== pagy_t('pagy.nav.next') %></a>
<% end -%>
<%# -%> <ul class="pagination-list">
<% pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] -%>
<% if item.is_a?(Integer) -%> <li><%== link.call item, item, %(class="pagination-link" aria-label="goto page #{item}") %></li>
<% elsif item.is_a?(String) -%> <li><%== link.call item, item, %(class="pagination-link is-current" aria-label="page #{item}" aria-current="page") %></li>
<% elsif item == :gap -%> <li><span class="pagination-ellipsis"><%== pagy_t('pagy.nav.gap') %></span></li>
<% end -%>
<% end -%>
<%# -%> </ul>
<%# -%></nav>
Then include it in view, example file app/views/pages/home.html.erb
:然后将其包含在视图中,例如文件
app/views/pages/home.html.erb
:
Welcome to project railstrace !
<% @records.each do |r| %>
<p>Name: <%= r.name %> Description: <%= r.description %> </p>
<% end %>
<%== render partial: 'pagy/bulma_nav', locals: {pagy: @pagy} %>
And simple controller such as app/controllers/pages_controller.rb
:和简单的 controller 例如
app/controllers/pages_controller.rb
:
class PagesController < ApplicationController
include Pagy::Backend
def home
Pagy::VARS[:max_items] = 10 # Set the value you want!
@pagy, @records = pagy(Trip.all)
end
end
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.