Revision 3c65367b
Von Sven Schöling vor fast 4 Jahren hinzugefügt
| SL/Controller/MaterializeTest.pm | ||
|---|---|---|
|
use strict;
|
||
|
use parent qw(SL::Controller::Base);
|
||
|
|
||
|
sub action_test {
|
||
|
sub action_components {
|
||
|
$_[0]->render("test/components");
|
||
|
}
|
||
|
|
||
|
sub action_modal {
|
||
|
$_[0]->render("test/modal");
|
||
|
}
|
||
|
|
||
|
1;
|
||
| menus/mobile/00-erp.yaml | ||
|---|---|---|
|
name: Component Test
|
||
|
order: 200
|
||
|
params:
|
||
|
action: MaterializeTest/test
|
||
|
action: MaterializeTest/components
|
||
|
- id: modal_test
|
||
|
name: Modal Test
|
||
|
order: 300
|
||
|
params:
|
||
|
action: MaterializeTest/modal
|
||
| templates/mobile_webpages/test/modal.html | ||
|---|---|---|
|
[% USE P %]
|
||
|
|
||
|
<h1>Material Modal Tests</h1>
|
||
|
|
||
|
|
||
|
<div>
|
||
|
|
||
|
Button triggered modal, no close/agree button:<br>
|
||
|
|
||
|
[% P.M.button_tag("", "Modal", class="modal-trigger", href="#modal1") %]
|
||
|
<!-- Modal Structure -->
|
||
|
<div id="modal1" class="modal">
|
||
|
<div class="modal-content">
|
||
|
<h4>Modal Header</h4>
|
||
|
<p>A bunch of text</p>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div>
|
||
|
Button triggered modal, close/agree button:<br>
|
||
|
|
||
|
[% P.M.button_tag("", "Modal", class="modal-trigger", href="#modal2") %]
|
||
|
<!-- Modal Structure -->
|
||
|
<div id="modal2" class="modal">
|
||
|
<div class="modal-content">
|
||
|
<h4>Modal Header</h4>
|
||
|
<p>A bunch of text</p>
|
||
|
</div>
|
||
|
<div class="modal-footer">
|
||
|
[% P.M.button_tag('', 'Cancel', class="modal-close", flat=1) %]
|
||
|
[% P.M.button_tag('', 'Agree', class="modal-close", flat=1) %]
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
Javascript triggered modal:<br>
|
||
|
[% P.M.button_tag("\$('#modal1').modal('open')", "Open!") %]
|
||
|
</div>
|
||
|
|
||
|
|
||
|
<div>
|
||
|
popup_dialog modal with given html:<br>
|
||
|
[% P.M.button_tag("kivi.popup_dialog({ html: 'Testtext'})", "Testtext") %]
|
||
|
</div>
|
||
Auch abrufbar als: Unified diff
MaterialComponents: modal test page