tag:crieit.net,2005:https://crieit.net/tags/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96/feed Crieitでタグ「レスポンシブ」に投稿された最近の記事 2019-05-02T00:01:36+09:00 https://crieit.net/tags/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96/feed tag:crieit.net,2005:PublicArticle/14962 2019-05-01T23:44:03+09:00 2019-05-02T00:01:36+09:00 https://crieit.net/posts/Laravel <p>Laravelではクエリ実行時に<code>get</code>じゃなくて<code>paginate</code>メソッドを呼んでデータを取得することで、テンプレート側で<code>$posts->links()</code>とするだけでBootstrap4のページネーションのリンク一覧を表示することができる。</p> <p>便利ではあるのだが、ページ数が増えると非常に横長になり、スマホ表示の場合は画面からはみ出しておかしくなってしまう。</p> <p>この対処として、Laravel5.7から</p> <pre><code class="php"><span>{</span><span>{</span> $users->onEachSide(5)->links() <span>}</span><span>}</span> </code></pre> <p>のようにすることで表示するページ番号数を調整することができるようになった。これは良いと思って試してみたのだが、最小の１にしてもたいして減らず、相変わらず画面からはみ出してしまう。このためだけに頑張って5.6から5.8に上げたのにもかかわらずだ。</p> <h2 id="レスポンシブ対応"><a href="#%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E5%AF%BE%E5%BF%9C">レスポンシブ対応</a></h2> <p>仕方がないのでレスポンシブ対応することにした。具体的には公式マニュアルに書いてあるように</p> <pre><code>php artisan vendor:publish --tag=laravel-pagination </code></pre> <p>としてテンプレートをアプリケーション側に吐き出し、それを修正することで表示を調整することができるようになっている。なのでページ番号と「…」のところのspanとaタグのクラスに<code>d-none d-md-block</code>を追加することで、スマホ表示の場合は前のページと次のページへのリンクだけを表示するようにすることで対処した。</p> <p>まあ、本来はCSS書いた方がスマートな気がするけど。</p> だら@Crieit開発者