หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

ส่วนประกอบ gov.uk สำหรับทับทิมบนราง

อัญมณีนี้มีชุดของส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้สำหรับระบบการออกแบบ gov.uk มันมีจุดประสงค์เพื่อให้ทางเลือกที่มีน้ำหนักเบาสำหรับไลบรารีส่วนประกอบการเผยแพร่ gov.uk และสร้างขึ้นด้วยกรอบ ViewComponent ของ GitHub

มันมีจุดมุ่งหมายที่จะใช้ฟังก์ชันการทำงานจากมาโคร Nunjucks ดั้งเดิมในแบบที่จะรู้สึกคุ้นเคยกับนักพัฒนา Rails มากขึ้น บล็อกเป็นที่ต้องการมากกว่าสตริงของ HTML ภายใต้พื้นผิวแต่ละองค์ประกอบเป็นเพียงวัตถุทับทิมทุกอย่างเป็นมรดกและ overridable

เอกสาร

อัญมณีมาพร้อมกับคู่มือเต็มรูปแบบที่ครอบคลุมด้านการใช้งานประจำวันส่วนใหญ่พร้อมกับรหัสและตัวอย่างผลลัพธ์ ตัวอย่างในคู่มือ (และคู่มือเอง) ถูกสร้างขึ้นโดยใช้ส่วนประกอบดังนั้นมันจะทันสมัยอยู่เสมอ

รวมอะไร?

ส่วนประกอบที่ไม่ใช่ฟอร์มทั้งหมดจากระบบการออกแบบ gov.uk ถูกนำมาใช้โดยไลบรารีนี้เป็น ViewComponents ส่วนประกอบแบบฟอร์มจะถูกนำไปใช้โดย Gov.uk Form Builder

ส่วนประกอบที่ให้คือ:

  • หีบเพลง
  • ลิงค์กลับ
  • เกล็ดขนมปัง
  • แบนเนอร์คุกกี้
  • รายละเอียด
  • ออกจากหน้านี้
  • ส่วนท้าย
  • ส่วนหัว
  • ข้อความที่ใส่เข้าไป
  • แบนเนอร์แจ้งเตือน
  • แผง
  • การปนเปื้อน
  • แบนเนอร์เฟส
  • แบ่งส่วน
  • ปุ่มเริ่มต้น
  • รายการสรุป
  • แท็บ
  • โต๊ะ
  • แท็ก
  • รายการงาน
  • ข้อความเตือน

ไลบรารีนี้ยังมีผู้ช่วยสำหรับการสร้างลิงก์ปุ่มข้ามลิงค์และลิงค์กลับไปด้านบน

ไวยากรณ์ทางเลือก

ส่วนประกอบทั้งหมดสามารถแสดงผลได้สองวิธี:

  • ใช้วิธี #render ของ Rails 'โดยตรง: 

      <%= render GovukComponent::WarningTextComponent.new do %>
    A serious warning
  <% end %>

  • ผ่านเสื้อคลุมตัวช่วย: 

      <%= govuk_warning_text do %>
    A serious warning
  <% end %>

    อนุสัญญาการตั้งชื่อสำหรับผู้ช่วยเหลือคือ govuk_ ตามด้วยชื่อของส่วนประกอบในกรณีงู คุณสามารถดูรายการทั้งหมดใน GovukComponentshelper

การใช้ตัวอย่าง

ห้องสมุดนี้ช่วยให้ส่วนประกอบสามารถแสดงผลด้วยวิธี render ของ Rails หรือผ่านผู้ช่วยที่ให้ไว้ ที่นี่เราจะใช้ govuk_tabs เพื่อแสดงผลสามส่วนแท็บ: 

 <%= govuk_tabs(title: 'Days of the week') do |component| %>
  <% component.with_tab(label: 'Monday') do %>
    < p > Monday’s child is fair of face </ p >
  <% end %>

  <% component . with_tab ( label : 'Tuesday' ) do %>
    < p > Tuesday’s child is full of grace </ p >
  <% end %>

  <% component . with_tab ( label : 'Wednesday' ) do %>
    < p > Wednesday’s child is full of woe </ p >
  <% end %>
<% end %>

นี่คือแท็บที่แสดงผล:

ตัวอย่างแท็บ

สำหรับตัวอย่างเกี่ยวกับการใช้งานดูหน้าคู่มือ

การตั้งค่า

เพิ่มบรรทัดนี้ใน config/application.rb ของคุณ: 

 require "govuk/components"

บริการที่ใช้ห้องสมุดนี้

  • สมัครฝึกอบรมครู
  • ค้นหาการฝึกอบรมครูระดับสูงกว่าปริญญาตรี
  • รับความช่วยเหลือเกี่ยวกับเทคโนโลยี
  • เผยแพร่หลักสูตรการฝึกอบรมครู
  • ลงทะเบียนครูฝึกหัด
  • การสอนตำแหน่งงานว่าง

ส้อม

  • betagouv système de design de l'état view ส่วนประกอบ

การติดตั้ง

เพิ่มบรรทัดนี้ใน Gemfile ของแอปพลิเคชันของคุณ: 

 gem 'govuk-components'

แล้วดำเนินการ: 

bundle

หรือติดตั้งด้วยตัวเองเป็น: 

gem install govuk-components

การบริจาค

รายงานข้อผิดพลาดและคำขอคุณลักษณะยินดีต้อนรับมากที่สุดโปรดยกประเด็นหรือส่งคำขอดึง

ขณะนี้เรากำลังใช้ Govuk Lint เพื่อให้แน่ใจว่ารหัสตรงตามแนวทางของ gov.uk โปรดตรวจสอบให้แน่ใจว่า PRS ใด ๆ ก็เป็นไปตามมาตรฐานนี้

เพื่อช่วยให้บันทึกสะอาดและเป็นระเบียบโปรดกำหนดค่า Git เพื่อใช้ชื่อเต็มของคุณ: 

git config --global user.name " Julius Hibbert "

ใบอนุญาต

อัญมณีมีให้เป็นโอเพ่นซอร์สภายใต้ข้อกำหนดของใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด