[RUBY] [Persönliche Entwicklung des Einkaufsagenturservices - Nr. 008] Führen Sie ActionView :: Component ein und passen Sie die Navigationsleiste an den Vollbildmodus an
github/view_component [Rails 6.1] Über ActionView :: Component " Einführung von ActionView :: Component
Überblick
Führen Sie ActionView :: Component ein, um die Navigationsleiste an den Vollbildmodus anzupassen
ToDo Details
--Installation von ActionView :: Component
Gemfile
gem "view_component", require: "view_component/engine"
Terminal
bundle install
--Komponieren Sie den Navbar-Teil
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
- Wenden Sie die Navbar-Komponente auf app / views / orders / ordering_org_sides / index.html.slim an
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
|Best.-Nr
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Produktbild
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Verteilerseite
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Zielseite kaufen
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Farbe, Größe usw.
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Menge
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Adressat
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Anschaffungskosten
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Status
th.px-6.py-3.bg-gray-200.text-left.text-xs.leading-4.font-medium.text-gray-500.uppercase.tracking-wider
|Bearbeiten
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
|Produktbild
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
a.text-indigo-600.hover:text-indigo-900 href="#"Verteilerseite
td.px-6.py-4.whitespace-no-wrap.text-sm.leading-5.text-gray-500
a.text-indigo-600.hover:text-indigo-900 href="#"Zielseite kaufen
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
- Wenden Sie die Navbar-Komponente auf app / views / orgs / index.html.slim an
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:Machen Sie es möglich, Fälle mit Sass zu unterscheiden
- 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
- Wenden Sie die Navbar-Komponente auf app / views / orgs / show.html.slim an
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
|Firmendetails
p.mt-1.max-w-2xl.text-sm.leading-5.text-gray-500
|Ich werde die Firmendetails erklären.
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
|Name der Firma
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
|Firmenart
dd.mt-1.text-sm.leading-5.text-gray-900.sm:mt-0.sm:col-span-2
/ TODO:Aufzählung
= @org.org_type
Funktionsprüfung
Vorbereitung
bin/rails db:migrate:reset
bin/rails db:reset
Akzeptanzkriterium
- Die Navigationsleiste [x] wird wie unten gezeigt auf den Vollbildmodus angewendet
- Der Link ist durcheinander.
- Dropdown-JS wird zu einem späteren Zeitpunkt unterstützt.
Recommended Posts