Framework7-action-button-morph
提供：Dev Guides
Framework7-ポップオーバーへのモーフ
説明
フローティングアクションボタンをクリックしてポップオーバーを開きたい場合は、_floating-button-to-popover_クラスを使用できます。
例
次の例では、ポップオーバーでモーフ遷移を使用してコンテンツのプレゼンテーションを指定します（滑らかなアニメーションでコンテンツの外観を作成します）-
<!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>Morph To Popover</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"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Morph To Popover</div>
</div>
</div>
<a href = "#" class = "floating-button floating-button-to-popover open-popover color-orange"><i class = "icon icon-form-email"></i></a>
<div class = "page-content">
<div class = "content-block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt.Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style = "width:250px%" class = "popover demo-popover">
<div class = "popover-inner">
<div class = "list-block">
<ul>
<li>
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title">Mail 1</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title">Mail 2</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-content item-link">
<div class = "item-inner">
<div class = "item-title">Mail 3</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7 ({
material: true
});
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを action_button_morphl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/action_button_morphlとして開くと、出力は以下のように表示されます。
- フローティングアクションボタンをクリックすると、ポップオーバーするモーフはさまざまなタイプのリンクを開き、クリックすると関連情報を表示します。 このコードは、UIでフローティングアクションボタンをタップしてポップオーバーを開く方法を示しています。これにより、遷移が追加されます。
