Quickview

Quickviewを使ってメッセージを表示　[Bulma-Extensions]

Quickview [Bulma-Extensions]

Quickviewが右側から現れます。

quickview 表示

クイックビュー Quickview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

フッター

上記のソースコード

<!-- quickview$$.html -->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Bulma入門 javascript Handlebars Electron Angular Quickview"
    />

    <title>Bulma Project Quickview</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma-extensions@6.2.7/dist/css/bulma-extensions.min.css"
    />
    <!-- <link rel="stylesheet" href="../../css/bulma-quickview.min.css" /> -->

    <script
      defer
      src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"
    ></script>

    <script src="/src/js/shortBulma$$.js"></script>
    <!-- <script src="./js/shortBulma$$.js"></script> -->

    <script src="https://cdn.jsdelivr.net/npm/bulma-extensions@6.2.7/dist/js/bulma-extensions.min.js"></script>
  </head>

  <body>
    <section class="section">
      <div class="container">
        <div class="notification is-primary is-bold mb-1">
          <div class="container">
            <h1 class="title">Quickview</h1>
            <h2 class="subtitle is-5">
              Quickviewを使ってメッセージを表示　[<strong class="has-text-grey"
                >Bulma-Extensions</strong
              >]
            </h2>
          </div>
        </div>

        <div class="columns mt-3 has-background-white-bis">
          <div class="column"></div>
          <div class="column is-8 content">
            <section class="section">
              <div class="container">
                <main class="has-background-primary-light">
                  <h2
                    class="subtitle has-text-warning has-text-weight-bold mx-6 pt-6"
                  >
                    quickview 表示
                  </h2>

                  <button
                    class="button is-primary is-medium mx-6 mb-3"
                    id="quick"
                  >
                    quickview 表示トグル
                  </button>

                  <div id="quickT" class="quickview">
                    <div class="box has-background-primary p-3">
                      <header class="quickview-header">
                        <p class="is-size-4">クイックビュー Quickview</p>
                      </header>
                      <div class="quickview-body">
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing
                          elit. Pellentesque risus mi, tempus quis placerat ut,
                          porta nec nulla. Vestibulum rhoncus ac ex sit amet
                          fringilla. Nullam gravida purus diam, et dictum felis
                          venenatis efficitur.
                        </p>
                        <p>
                          Aenean ac eleifend lacus, in mollis lectus. Donec
                          sodales, arcu et sollicitudin porttitor, tortor urna
                          tempor ligula, id porttitor mi magna a neque. Donec
                          dui urna, vehicula et sem eget, facilisis sodales sem.
                        </p>
                      </div>
                      <footer
                        class="quickview-footer has-background-primary-light mt-4"
                      >
                        <span class="has-text-centered">フッター</span>
                      </footer>
                    </div>
                  </div>
                </main>
              </div>
            </section>

            <hr />
            <div class="box">

              <div class="box">
                <h2 class="is-size-4 has-background-white-ter p-2 km">解説</h2>
                <div class="is-size-5-tablet lh7">
                  ~~ <strong>Quickview Bulma-Extensions</strong> を利用（<a
                    href="#Extensions"
                    ><strong> 説明は下部 </strong> </a
                  >）~~
                </div>
                <div class="content">
                  <ul>
                    <li>
                      BulmaでJavascriptを利用するために、このWebサイトでは<br />
                      　<a href="shortBulma.html"
                        ><strong>shortBulma$$.js</strong> または
                        <strong>shortBulma.js</strong></a
                      ><br />
                      というライブラリを使います。
                    </li>
                    <li class="pt-2">
                      使い方の例：&lt;script
                      src=&quot;/src/js/shortBulma$$.js&quot;&gt;&lt;/script&gt;<br />
                      headタグ内に挿入。但し、pathは状況によって変わります。
                    </li>
                    <li class="pt-2">
                      上記のpathの設定の確認をしておいてください。
                      <p class="pt-3 px-3">
                        例えば、notification$$.htmlとshortBulma$$.jsが同じフォルダにある時は<br />
                        &lt;script
                        src=&quot;./shortBulma$$.js&quot;&gt;&lt;/script&gt;
                        または<br />
                        &lt;script
                        src=&quot;shortBulma$$.js&quot;&gt;&lt;/script&gt;
                        となります。
                      </p>
                    </li>
                    <hr />
                    <li class="pt-1">
                      <dl>
                        <dt>$$bulmaMenu('#burger', '#nav-links');</dt>
                        <dd class="py-2">
                          狭い画面で表示されるBulmaのburgerメニューをコントロールします。<br />burgerアイコンとbodyにそれぞれイベントを設定して、
                          <ul>
                            <li>
                              [burgerアイコン]のクリックでburgerメニューを開閉
                            </li>
                            <li>
                              [body]のクリックでburgerメニューを閉じます。
                            </li>
                          </ul>
                        </dd>
                        <dt>$$codeS('#pre1')</dt>
                        <dd class="py-2">
                          コードの全コピーを準備するため、コードをクリックしたときにそれを選択状態にします。
                        </dd>

                        <dt>$$qcLm('#quick', {selT: '#quickT'})</dt>
                        <dd class="py-2">
                          ボタン'#quick'をクリックすると、セレクター'#quickT'を持つ要素のクラス'is-active'をトグルします。
                        </dd>
                        <dt>bulmaQuickview.attach()</dt>
                        <dd class="py-2">Quickview機能を装着します。</dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </div>
              <hr />

              <a id="Extensions"></a>

              <h1 class="title">Extensions: Quickview 資料</h1>
              <p class="is-size-6 ml-4">
                ドキュメント:
                <a
                  href="https://wikiki.github.io/components/quickview/"
                  target="_blank"
                  >https://wikiki.github.io/components/quickview/</a
                >
              </p>
              <p class="is-size-6 ml-4">
                bulma-quickview (GitHub):
                <a
                  href="https://github.com/Wikiki/bulma-quickview"
                  target="_blank"
                  >https://github.com/Wikiki/bulma-quickview</a
                >
              </p>
              <hr />

              <dl class="mt-3">
                <p>
                  <strong>bulma-quickview</strong>
                </p>
                <dt>
                  <strong
                    >npmで<strong>bulma-quickview</strong>をインストール</strong
                  >して使う。
                </dt>
                <dd>npm install bulma-quickview</dd>
                <dt>
                  インストール後、次の設定で変数<strong>bulmaQuickview</strong>が利用できるようになり、bulmaQuickview.attach();
                  を実行します。
                </dt>
                <dd>
                  &lt;script
                  src=&quot;/src/js/bulma-quickview.min.js&quot;&gt;&lt;/script&gt;
                  または <br />&lt;script
                  src=&quot;/node_modules/bulma-quickview/dist/bulma-quickview.min.js&quot;&gt;&lt;/script&gt;<br />
                  パスは適宜調整してください。
                </dd>
                <dt>確認事項</dt>
                <dd>
                  Quickview
                  Bulma-Extensionを設定する前に、Bulmaの設定を忘れないこと！
                </dd>
              </dl>
            </div>
          </div>
          <div class="column"></div>
        </div>
        　
      </div>
    </section>

    <script
      type="text/javascript"
      src="/src/js/bulma-quickview.min.js"
    ></script>

    <script type="text/javascript">
      // $$bulmaMenu('#burger', '#nav-links');
      $$codeS('#pre1');

      $$qcLm('#quick', { selT: '#quickT' });

      // Quickview extension
      bulmaQuickview.attach();
    </script>
  </body>
</html>

解説

~~ Quickview Bulma-Extensions を利用（ 説明は下部 ）~~
  • BulmaでJavascriptを利用するために、このWebサイトでは
    　shortBulma$$.js または shortBulma.js
    というライブラリを使います。
  • 使い方の例：<script src="/src/js/shortBulma$$.js"></script>
    headタグ内に挿入。但し、pathは状況によって変わります。
  • 上記のpathの設定の確認をしておいてください。

    例えば、notification$$.htmlとshortBulma$$.jsが同じフォルダにある時は
    <script src="./shortBulma$$.js"></script> または
    <script src="shortBulma$$.js"></script> となります。

  • shortBulma$$.jsのより詳しい説明は、 shortBulma$$.js をご覧ください。
  • $$bulmaMenu('#burger', '#nav-links');
    狭い画面で表示されるBulmaのburgerメニューをコントロールします。
    burgerアイコンとbodyにそれぞれイベントを設定して、
    • [burgerアイコン]のクリックでburgerメニューを開閉
    • [body]のクリックでburgerメニューを閉じます。
    $$codeS('#pre1')
    コードの全コピーを準備するため、コードをクリックしたときにそれを選択状態にします。
    $$qcLm('#quick', {selT: '#quickT'})
    ボタン'#quick'をクリックすると、セレクター'#quickT'を持つ要素のクラス'is-active'をトグルします。
    $$qcLm('#quick', {selT: '.quickT'})
    ボタン'#quick'をクリックすると、セレクター'.quickT'を持つ要素のクラス'is-active'をトグルします。
    bulmaQuickview.attach()
    Quickview機能を装着します。

Extensions: Quickview 資料

ドキュメント: https://wikiki.github.io/components/quickview/

bulma-quickview (GitHub): https://github.com/Wikiki/bulma-quickview

bulma-quickview

npmでbulma-quickviewをインストールして使う。
npm install bulma-quickview
インストール後、次の設定で変数bulmaQuickviewが利用できるようになり、bulmaQuickview.attach(); を実行します。
<script src="/src/js/bulma-quickview.min.js"></script> または
<script src="/node_modules/bulma-quickview/dist/bulma-quickview.min.js"></script>
パスは適宜調整してください。
確認事項
Quickview Bulma-Extensionを設定する前に、Bulmaの設定を忘れないこと！