CSS personalizado con kaminari con bootstrap

Solución:

Después de publicar esta pregunta, encontré la solución: kaminari: un paginador limpio, potente, personalizable y sofisticado basado en Scope & Engine para Rails 3.

Simplemente vaya a la consola y escriba:

rails generate kaminari:views bootstrap4

Descargará algunos archivos Haml a su aplicación y se cambiarán las vistas. También es compatible con bootstrap 2 y 3, por ejemplo.

rails generate kaminari:views bootstrap3

Aquí hay algunos temas para las vistas de Kaminari: https://github.com/amatsuda/kaminari_themes

simplemente agregue el siguiente css a su application.css

.pagination a, .pagination span.current, .pagination span.gap {
    float: left;
    padding: 0 14px;
    line-height: 38px;
    text-decoration: none;
    background-color: white;
    border: 1px solid #DDD;
    border-left-width: 0;
}

.pagination {
    border-left: 1px solid #ddd;
    .first{
        padding : 0;
        float: none;
        border: none;
    }
    .prev {
        padding : 0;
        float: none;
        border: none;
    }
    .page{
        padding : 0;
        float: none;
        border: none;
    }
    .next{
        padding : 0;
        float: none;
        border: none;
    }
    .last{
        padding : 0;
        float: none;
        border: none;
    }
}

Casi me rindo hasta que encontré “Paginación con Kaminari”.

En resumen, después rails g kaminari:default vaya a las vistas que se crean en app / views / kaminari y cambie las etiquetas para que se adapten a su estilo.

Entré en _paginator.html.erb y cambió el <nav> a un <div> y reemplazó todos los <span> etiquetas con <li>.

Para obtener el estilo de arranque que se adapta a mi aplicación, cambié el <div> etiqueta en _paginator.html.erb para <div class="pagination pull-right"> y el <span class="page"> etiquetas a simple <li>.

Hay un par de trampas con las que quizás alguien más pueda ayudar:

1. Hay erb en _page.html.erb que cambia la clase de la página actual cuando está activa. Desordena la alineación, así que para evitar eso, cambie el <%= link_to_unless page.current? ... %> para <%= link_to page ... %>.

2. los _gap.html.erb La vista que inserta el bloque “…” también se estropea. Reemplazarlo con <li><%= link_to '...' %></li> para que se asiente bien en línea.

Comencé a programar hace 8 semanas, así que seguro que hay mejores formas de abordar esto y formas de limpiar 1 y 2, pero si solo quieres que las cosas se vean bien y funcionen como se espera, inténtalo y ajústalo más tarde.

---

---

Utiliza Nuestro Buscador