สร้างหน้าเว็บที่มีแถบนำทางระดับบนสุด

 navbarPage ( title , ... , id = NULL , selected = NULL , position = c ( "static-top" , "fixed-top" , "fixed-bottom" ) , header = NULL , footer = NULL , inverse = FALSE , collapsible = FALSE , collapsable , fluid = TRUE , responsive = NULL , theme = NULL , windowTitle = title ) navbarMenu ( title , ... , icon = NULL )

title	ชื่อที่จะแสดงใน navbar
...	องค์ประกอบ tabPanel จะรวมไว้ในหน้า ฟังก์ชัน navbarMenu ยังรับสตริงซึ่งจะใช้เป็นส่วนหัวของเมนู หากสตริงเป็นชุดของเครื่องหมายขีดกลางเช่น "----" ตัวคั่นแนวนอนจะปรากฏในเมนู
id	หากมีให้คุณสามารถใช้ input$ id ในตรรกะเซิร์ฟเวอร์ของคุณเพื่อกำหนดว่าแท็บปัจจุบันใช้งานอยู่ได้อย่างไร ค่านี้จะสอดคล้องกับอาร์กิวเมนต์ value ที่ส่งผ่านไปยัง tabPanel
selected	value (หรือถ้าไม่มีให้ระบุ title ) ของแท็บที่ควรเลือกตามค่าเริ่มต้น ถ้าเป็น NULL แท็บแรกจะถูกเลือก
position	กำหนดว่าแถบ navbar ควรปรากฏที่ด้านบนของหน้าด้วยการเลื่อนแบบปกติ ( "static-top" ) และตรึงไว้ที่ด้านบน ( "fixed-top" ) หรือตรึงไว้ที่ด้านล่าง ( "fixed-bottom" ) โปรดทราบว่าการใช้ "fixed-top" หรือ "fixed-bottom"จะทำให้ navbar ซ้อนทับเนื้อหาเนื้อหาของคุณเว้นแต่คุณจะเพิ่ม padding เช่น: tags$style(type="text/css", "body {padding-top: 70px;}")
header	แท็กหรือรายการแท็กที่จะแสดงเป็นส่วนหัวที่ใช้ร่วมกันเหนือ tabPanels ทั้งหมด
footer	แท็กหรือรายการแท็กเพื่อแสดงเป็นส่วนท้ายร่วมกันด้านล่าง tabPanels ทั้งหมด
inverse	TRUE ใช้พื้นหลังที่มืดและข้อความสว่างสำหรับแถบนำทาง
collapsible	TRUE จะยุบองค์ประกอบการนำทางโดยอัตโนมัติลงในเมนูเมื่อความกว้างของเบราว์เซอร์น้อยกว่า 940 พิกเซล (มีประโยชน์สำหรับการดูบนอุปกรณ์หน้าจอสัมผัสขนาดเล็ก)
collapsable	เลิก; ใช้ collapsible แทน
fluid	TRUE ใช้รูปแบบของเหลว FALSE ใช้รูปแบบคงที่
responsive	ตัวเลือกนี้จะเลิกใช้งาน ไม่จำเป็นต้องใช้ Bootstrap 3 อีกต่อไป
theme	รูปแบบ Bootstrap ทางเลือก (ปกติเป็นไฟล์ css ภายในไดเรกทอรี www) ตัวอย่างเช่นในการใช้ชุดรูปแบบที่อยู่ที่ www/bootstrap.css คุณจะใช้ theme = "bootstrap.css"
windowTitle	ชื่อที่ควรจะแสดงโดยหน้าต่างเบราเซอร์ มีประโยชน์ถ้า title ไม่ได้เป็นสตริง
icon	ไอคอนตัวเลือกที่จะปรากฏบน navbarMenu

คำ จำกัดความ UI ที่สามารถส่งผ่านไปยังฟังก์ชัน shinyUI ได้

ลักษณะ

สร้างเพจที่มีแถบการนำทางระดับบนสุดที่สามารถใช้เพื่อสลับชุดขององค์ประกอบ tabPanel

รายละเอียด

คุณสามารถใช้ฟังก์ชัน navbarMenu เพื่อสร้างเมนูที่ฝังอยู่ภายในแถบนำทางซึ่งจะมีแท็บแท็บเพิ่มเติม (ดูตัวอย่างด้านล่าง)

ตัวอย่าง

navbarPage("App Title",
  tabPanel("Plot"),
  tabPanel("Summary"),
  tabPanel("Table")
)

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand">App Title</span>
    </div>
    <ul class="nav navbar-nav">
      <li class="active">
        <a href="#tab-6155-1" data-toggle="tab" data-value="Plot">Plot</a>
      </li>
      <li>
        <a href="#tab-6155-2" data-toggle="tab" data-value="Summary">Summary</a>
      </li>
      <li>
        <a href="#tab-6155-3" data-toggle="tab" data-value="Table">Table</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid">
  <div class="tab-content">
    <div class="tab-pane active" data-value="Plot" id="tab-6155-1"></div>
    <div class="tab-pane" data-value="Summary" id="tab-6155-2"></div>
    <div class="tab-pane" data-value="Table" id="tab-6155-3"></div>
  </div>
</div>


navbarPage("App Title",
  tabPanel("Plot"),
  navbarMenu("More",
    tabPanel("Summary"),
    "----",
    "Section header",
    tabPanel("Table")
  )
)

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand">App Title</span>
    </div>
    <ul class="nav navbar-nav">
      <li class="active">
        <a href="#tab-8571-1" data-toggle="tab" data-value="Plot">Plot</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          More
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#tab-9835-1" data-toggle="tab" data-value="Summary">Summary</a>
          </li>
          <li class="divider"></li>
          <li class="dropdown-header">Section header</li>
          <li>
            <a href="#tab-9835-2" data-toggle="tab" data-value="Table">Table</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid">
  <div class="tab-content">
    <div class="tab-pane active" data-value="Plot" id="tab-8571-1"></div>
    <div class="tab-pane" data-value="Summary" id="tab-9835-1"></div>
    <div class="tab-pane" data-value="Table" id="tab-9835-2"></div>
  </div>
</div>