Framework7-リンク付きのNavbar

説明

ナビゲーションバーの_left_および_right_部分でリンクを使用するには、クラス_link_で_ <a> _タグを追加するだけです。

例

次の例では、Framework7の左上および右隅にリンクを表示します-

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1,
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
      <meta name = "apple-mobile-web-app-capable" content = "yes"/>
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
      <title>Navbar With Links</title>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">

            <div class = "navbar">
               <div class = "navbar-inner">

                  <div class = "left">
                     <a href = "#" class = "link">Left Link</a>
                  </div>

                  <div class = "center">Center</div>

                  <div class = "right">
                     <a href = "#" class = "link">Right Link</a>
                  </div>

               </div>
            </div>

            <div class = "pages navbar-through ">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
                        sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
                        dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
                        dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
                        eu consectetur. Sed posuere a orci id imperdiet.</p>

                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                        at nibh felis. Nunc consequat diam et tellus tempor gravida. Donec hendrerit
                        aliquet risus, ut tempor purus dictum sit amet. Integer sit amet lacus eget ipsum
                        pulvinar interdum. Proin semper turpis sed placerat dapibus. Sed iaculis id nibh
                        a viverra. Sed vitae tellus sed purus lacinia dignissim. Aenean sagittis interdum
                        leo in molestie. Aliquam sodales in diam eu consectetur. Sed posuere a orci id
                        imperdiet.</p>
                  </div>
               </div>
            </div>

         </div>
      </div>

      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   </body>

</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを navbar_linksl ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/navbar_linkslとして開きます。出力は以下のように表示されます。
navbarは、ページの左右にリンクを提供します。

Framework7-navbar-links

目次

Framework7-リンク付きのNavbar

説明

例

出力