Revision c2994c1a
Von Sven Schöling vor fast 3 Jahren hinzugefügt
| SL/Controller/MaterializeTest.pm | ||
|---|---|---|
| 3 | 3 |
use strict; |
| 4 | 4 |
use parent qw(SL::Controller::Base); |
| 5 | 5 |
|
| 6 |
sub action_test {
|
|
| 6 |
sub action_components {
|
|
| 7 | 7 |
$_[0]->render("test/components");
|
| 8 | 8 |
} |
| 9 | 9 |
|
| 10 |
sub action_modal {
|
|
| 11 |
$_[0]->render("test/modal");
|
|
| 12 |
} |
|
| 13 |
|
|
| 10 | 14 |
1; |
| menus/mobile/00-erp.yaml | ||
|---|---|---|
| 14 | 14 |
name: Component Test |
| 15 | 15 |
order: 200 |
| 16 | 16 |
params: |
| 17 |
action: MaterializeTest/test |
|
| 17 |
action: MaterializeTest/components |
|
| 18 |
- id: modal_test |
|
| 19 |
name: Modal Test |
|
| 20 |
order: 300 |
|
| 21 |
params: |
|
| 22 |
action: MaterializeTest/modal |
|
| templates/mobile_webpages/test/modal.html | ||
|---|---|---|
| 1 |
[% USE P %] |
|
| 2 |
|
|
| 3 |
<h1>Material Modal Tests</h1> |
|
| 4 |
|
|
| 5 |
|
|
| 6 |
<div> |
|
| 7 |
|
|
| 8 |
Button triggered modal, no close/agree button:<br> |
|
| 9 |
|
|
| 10 |
[% P.M.button_tag("", "Modal", class="modal-trigger", href="#modal1") %]
|
|
| 11 |
<!-- Modal Structure --> |
|
| 12 |
<div id="modal1" class="modal"> |
|
| 13 |
<div class="modal-content"> |
|
| 14 |
<h4>Modal Header</h4> |
|
| 15 |
<p>A bunch of text</p> |
|
| 16 |
</div> |
|
| 17 |
</div> |
|
| 18 |
|
|
| 19 |
</div> |
|
| 20 |
|
|
| 21 |
|
|
| 22 |
<div> |
|
| 23 |
Button triggered modal, close/agree button:<br> |
|
| 24 |
|
|
| 25 |
[% P.M.button_tag("", "Modal", class="modal-trigger", href="#modal2") %]
|
|
| 26 |
<!-- Modal Structure --> |
|
| 27 |
<div id="modal2" class="modal"> |
|
| 28 |
<div class="modal-content"> |
|
| 29 |
<h4>Modal Header</h4> |
|
| 30 |
<p>A bunch of text</p> |
|
| 31 |
</div> |
|
| 32 |
<div class="modal-footer"> |
|
| 33 |
[% P.M.button_tag('', 'Cancel', class="modal-close", flat=1) %]
|
|
| 34 |
[% P.M.button_tag('', 'Agree', class="modal-close", flat=1) %]
|
|
| 35 |
</div> |
|
| 36 |
</div> |
|
| 37 |
|
|
| 38 |
</div> |
|
| 39 |
|
|
| 40 |
<div> |
|
| 41 |
Javascript triggered modal:<br> |
|
| 42 |
[% P.M.button_tag("\$('#modal1').modal('open')", "Open!") %]
|
|
| 43 |
</div> |
|
| 44 |
|
|
| 45 |
|
|
| 46 |
<div> |
|
| 47 |
popup_dialog modal with given html:<br> |
|
| 48 |
[% P.M.button_tag("kivi.popup_dialog({ html: 'Testtext'})", "Testtext") %]
|
|
| 49 |
</div> |
|
Auch abrufbar als: Unified diff
MaterialComponents: modal test page