[RUBY] [Développement personnel du service d’achat de l’agence --No.008] Présentez ActionView :: Component et adaptez la barre de navigation en plein écran

github/view_component [Rails 6.1] À propos d'ActionView :: Component " Présentation d'ActionView :: Component

Issue PR

Tailwind

Aperçu

Introduisez ActionView :: Component pour adapter la barre de navigation en plein écran

Détails ToDo

--Installation d'ActionView :: Component

Gemfile


gem "view_component", require: "view_component/engine"

Terminal


bundle install

--Composer la partie de la barre de navigation

Terminal


-> % bin/rails generate component Layout::Navbar org          
Running via Spring preloader in process 30401
      create  app/components/layout/navbar_component.rb
      invoke  test_unit
      create    test/components/layout/navbar_component_test.rb
      invoke  slim
      create    app/components/layout/navbar_component.html.slim

--Appliquer le composant de la barre de navigation à l'application / vues / commandes / ordering_org_sides / index.html.slim

slim:app/views/orders/ordering_org_sides/index.html.slim


.bg-gray-100
  = render(::Layout::NavbarComponent.new(org: @org))
  .py-10
    .max-w-7xl.mx-auto.sm:px-6.lg:px-8
      .py-5
        .-my-2.overflow-x-auto(class="sm:-mx-6 lg:-mx-8")
        .py-2.align-middle.inline-block.min-w-full(class="sm:px-6 lg:px-8")
          .shadow.overflow-hidden.border-b.border-gray-200(class="sm:rounded-lg")
            table.min-w-full.divide-y.divide-gray-200
              thead
                tr
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |N ° de commande
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Image du produit
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Page du distributeur
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Page de destination d'achat
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Couleur, taille, etc.
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |quantité
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Destinataire
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Coût d'achat
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |statut
                  th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
                    |Éditer
              tbody.bg-white.divide-y.divide-gray-200
                - @orders.each do |order|
                  tr
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      = order.trade_no
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      |Image du produit
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      a.text-indigo-600.hover:text-indigo-900 href="#"Page du distributeur
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      a.text-indigo-600.hover:text-indigo-900 href="#"Page de destination d'achat
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      = order.color_size
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      = order.quantity
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      | 〒#{order.postal}
                      br
                      = order.address
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      | $100
                    td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
                      = order.status_i18n
                    td.px-6.py-4.whitespace-no-wrap.text-right.text-sm.leading-5.font-medium
                      a.text-indigo-600.hover:text-indigo-900 href="#"
                        i.fas.fa-edit

--Appliquer le composant de la barre de navigation à app / views / orgs / index.html.slim

slim:app/views/orgs/index.html.slim


= render(::Layout::NavbarComponent.new(org: @org))
.bg-white.shadow.m-auto.sm:rounded-md.mt-5(class="w-2/4")
  ul
    - @orgs.each do |org|
      / TODO:Rendre possible de distinguer les cas avec Sass
      - border_t = org == @orgs.first ? '' : 'border-t border-gray-200'
      li.(class=border_t)
        = link_to [org], class: 'block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out' do
          .flex.items-center.px-4.py-4.sm:px-6
            .min-w-0.flex-1.flex.items-center
              .min-w-0.flex-1.px-4.md:grid.md:grid-cols-2.md:gap-4
                div
                  .text-sm.leading-5.font-medium.text-indigo-600.truncate
                    = org.name
              div
                i.fas.fa-sign-in-alt.fa-lg.bg-gray-50.text-gray-500

--Appliquer le composant de la barre de navigation à app / views / orgs / show.html.slim

slim:app/views/orgs/show.html.slim


= render(::Layout::NavbarComponent.new(org: @org))
.bg-white.shadow.m-auto.mt-5.overflow-hidden.sm:rounded-lg(class="w-1/2")
  .px-4.py-5.border-b.border-gray-200.sm:px-6
    h3.text-lg.leading-6.font-medium.text-gray-900
      |Détails de l'entreprise
    p.mt-1.max-w-2xl.text-sm.leading-5.text-gray-500
      |Je vais expliquer les détails de l'entreprise.
  div
    dl
      .bg-gray-100.px-4.py-5.sm:grid.sm:grid-cols-3.sm:gap-4.sm:px-6
        dt.text-sm.leading-5.font-medium.text-gray-500
          |Nom de la compagnie
        dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
          = @org.name
      .bg-white.px-4.py-5.sm:grid.sm:grid-cols-3.sm:gap-4.sm:px-6
        dt.text-sm.leading-5.font-medium.text-gray-500
          |type de compagnie
        dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
          / TODO:énumération
          = @org.org_type

Contrôle de fonctionnement

Préparation

bin/rails db:migrate:reset
bin/rails db:reset

Critères d'acceptation

Recommended Posts

[Développement personnel du service d’achat de l’agence --No.008] Présentez ActionView :: Component et adaptez la barre de navigation en plein écran
[Développement individuel du service d’achat de l’agence - N ° 010] Accédez à l’écran de changement d’entreprise, à l’écran des détails de l’entreprise et à l’écran de commande après le changement d’entreprise
[Développement individuel du service d’achat de l’agence - N ° 010] Accédez à l’écran de changement d’entreprise, à l’écran des détails de l’entreprise et à l’écran de commande après le changement d’entreprise
[Développement personnel du service d’achat de l’agence --No.008] Présentez ActionView :: Component et adaptez la barre de navigation en plein écran
J'ai essayé de résumer les points clés de la conception et du développement de gRPC
Thymeleaf a fait du HTML une partie commune pour unifier la conception et améliorer l'efficacité du développement.
[No.007] Écran de gestion de l'organisation et processus de connexion à l'organisation
[Développement d'applications Android] Comment afficher en plein écran (barre de notification masquée)