<!-- toast$$.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Bulma Project</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>
<script
defer
src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"
></script>
<script src="/src/js/shortBulma$$.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<div class="columns has-background-white-bis">
<div class="column"></div>
<div class="column is-8 content">
<article class="message is-primary">
<div class="message-header">
<p>Toast [<strong>Bulma-Extension</strong>] の表示</p>
</div>
<div
class="message-body has-background-white-bis"
style="border-bottom: inset 2px #aaaa88"
>
<p><strong>Toast</strong> を使って短いメッセージ・表示位置とHTMLによる修飾</p>
</div>
</article>
<main>
<div
class="has-background-info mx-6 mb-1 py-1 has-text-grey-darker has-text-centered"
>
ボタンの配置には、Level を使っています。
</div>
<h2 class="subtitle has-text-weight-bold">表示位置</h2>
<nav class="level is-mobile" class="level is-mobile">
<div class="level-item">
<button class="button is-info" id="toastTopLeft">左上</button>
</div>
<div class="level-item">
<button class="button is-success" id="toastTopCenter">
中央上
</button>
</div>
<div class="level-item">
<button class="button is-warning" id="toastTopRight">
右上
</button>
</div>
</nav>
<nav class="level is-mobile" class="level is-mobile">
<div class="level-item">
<button class="button is-danger" id="toastCenter">
中央
</button>
</div>
</nav>
<nav class="level is-mobile" class="level is-mobile">
<div class="level-item">
<button class="button is-info" id="toastBottomLeft">
左下
</button>
</div>
<div class="level-item">
<button class="button is-success" id="toastBottomCenter">
中央下
</button>
</div>
<div class="level-item">
<button class="button is-warning" id="toastBottomRight">
右下
</button>
</div>
</nav>
<!-- ~~~~~~~~~~~~~~~~~~~ -->
<hr />
<h2 class="subtitle has-text-weight-bold">HTML表示</h2>
<button class="button is-primary" id="toastHTML">
HTML Message
</button>
<hr />
</main>
<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>Toast Bulma-Extension</strong> を利用<small
>（<a href="#Extensions"> 説明は下部に </a>）</small
>~~
</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">
使い方の例：<script
src="/src/js/shortBulma$$.js"></script><br />
headタグ内に挿入。但し、pathは状況によって変わります。
</li>
<li class="pt-2">
上記のpathの設定の確認をしておいてください。
<p class="pt-3 px-3">
例えば、notification$$.htmlとshortBulma$$.jsが同じフォルダにある時は<br />
<script
src="./shortBulma$$.js"></script>
または<br />
<script
src="shortBulma$$.js"></script>
となります。
</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>$$oe = (o, f)</dt>
<dd class="py-2">
オブジェクトにイベントリスナーを設定
</dd>
<dt>$$Id('toastTopLeft')</dt>
<dd class="py-2">idが'toastTopLeft'である要素を取得</dd>
</dl>
</li>
</ul>
</div>
</div>
<hr />
<a id="Extensions"></a>
<h1 class="is-size-4">Extension: Toast 資料</h1>
<p class="is-size-6 ml-4">
ドキュメント:
<a href="https://rfoel.github.io/bulma-toast/" target="_blank"
>https://rfoel.github.io/bulma-toast/</a
>
</p>
<p class="is-size-6 ml-4">
bulma-toast (GitHub):
<a href="https://github.com/rfoel/bulma-toast" target="_blank"
>https://github.com/rfoel/bulma-toast</a
>
</p>
<hr />
<dl class="mt-3">
<p>
<strong>bulma-toast</strong
>をCDNで利用するための記事を見つけることが出来なかったので
</p>
<dt>
<strong
>npmで<strong>bulma-toast</strong>をインストール</strong
>して使う。
</dt>
<dd>npm install bulma-toast</dd>
<dt>
インストール後、次の設定で変数<strong>bulmaToast</strong>が利用できるようになる。
</dt>
<dd>
<script
src="/src/js/bulma-toast.min.js"></script>
または <br /><script
src="/node_modules/bulma-toast/dist/bulma-toast.min.js"></script>等<br />
パスは適宜調整してください。
</dd>
<dt>確認事項</dt>
<dd>
Toast
Bulma-Extensionを設定する前に、Bulmaの設定を忘れないこと！
</dd>
</dl>
</div>
</div>
<div class="column"></div>
</div>
</div>
</section>
<script src="/src/js/bulma-toast.min.js"></script>
<!-- <script src="/node_modules/bulma-toast/dist/bulma-toast.min.js"></script> -->
<script type="text/javascript">
$$codeS('#pre1');
// Position
$$oe($$Id('toastTopLeft'), () => {
bulmaToast.toast({
message: 'Top Left',
position: 'top-left',
type: 'is-info',
});
});
$$oe($$Id('toastTopCenter'), () => {
bulmaToast.toast({
message: 'Top Center',
position: 'top-center',
type: 'is-success',
});
});
$$oe($$Id('toastTopRight'), () => {
bulmaToast.toast({
message: 'Top Right',
position: 'top-right',
type: 'is-warning',
});
});
$$oe($$Id('toastCenter'), () => {
bulmaToast.toast({
message: 'Center',
position: 'center',
type: 'is-danger',
});
});
$$oe($$Id('toastBottomLeft'), () => {
bulmaToast.toast({
message: 'Bottom Left',
position: 'bottom-left',
type: 'is-info',
});
});
$$oe($$Id('toastBottomCenter'), () => {
bulmaToast.toast({
message: 'Bottom Center',
position: 'bottom-center',
type: 'is-success',
});
});
$$oe($$Id('toastBottomRight'), () => {
bulmaToast.toast({
message: 'Bottom Right',
position: 'bottom-right',
type: 'is-warning',
});
});
// HTML 表示
$$oe($$Id('toastHTML'), () => {
bulmaToast.toast({
message:
'<strong class="has-text-primary">HTML <em>toast</em></strong>',
type: 'has-background-warning-light',
});
});
</script>
</body>
</html>