First commit
This commit is contained in:
146
src/components/app.vue
Normal file
146
src/components/app.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<f7-app v-bind="f7params">
|
||||
|
||||
<!-- Left panel with cover effect-->
|
||||
<f7-panel left cover dark>
|
||||
<f7-view>
|
||||
<f7-page>
|
||||
<f7-navbar title="Left Panel"></f7-navbar>
|
||||
<f7-block>Left panel content goes here</f7-block>
|
||||
</f7-page>
|
||||
</f7-view>
|
||||
</f7-panel>
|
||||
|
||||
|
||||
<!-- Right panel with reveal effect-->
|
||||
<f7-panel right reveal dark>
|
||||
<f7-view>
|
||||
<f7-page>
|
||||
<f7-navbar title="Right Panel"></f7-navbar>
|
||||
<f7-block>Right panel content goes here</f7-block>
|
||||
</f7-page>
|
||||
</f7-view>
|
||||
</f7-panel>
|
||||
|
||||
|
||||
<!-- Your main view, should have "view-main" class -->
|
||||
<f7-view main class="safe-areas" url="/"></f7-view>
|
||||
|
||||
|
||||
<!-- Popup -->
|
||||
<f7-popup id="my-popup">
|
||||
<f7-view>
|
||||
<f7-page>
|
||||
<f7-navbar title="Popup">
|
||||
<f7-nav-right>
|
||||
<f7-link popup-close>Close</f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
<f7-block>
|
||||
<p>Popup content goes here.</p>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</f7-view>
|
||||
</f7-popup>
|
||||
|
||||
<f7-login-screen id="my-login-screen">
|
||||
<f7-view>
|
||||
<f7-page login-screen>
|
||||
<f7-login-screen-title>Login</f7-login-screen-title>
|
||||
<f7-list form>
|
||||
<f7-list-input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="Your username"
|
||||
v-model:value="username"
|
||||
></f7-list-input>
|
||||
<f7-list-input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Your password"
|
||||
v-model:value="password"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-list>
|
||||
<f7-list-button title="Sign In" @click="alertLoginData"></f7-list-button>
|
||||
<f7-block-footer>
|
||||
Some text about login information.<br>Click "Sign In" to close Login Screen
|
||||
</f7-block-footer>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</f7-view>
|
||||
</f7-login-screen>
|
||||
</f7-app>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { f7, f7ready } from 'framework7-vue';
|
||||
import { getDevice } from 'framework7/lite-bundle';
|
||||
import cordovaApp from '../js/cordova-app.js';
|
||||
|
||||
import routes from '../js/routes.js';
|
||||
import store from '../js/store';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const device = getDevice();
|
||||
// Framework7 Parameters
|
||||
const f7params = {
|
||||
name: 'ALVINN', // App name
|
||||
theme: 'auto', // Automatic theme detection
|
||||
colors: {
|
||||
primary: '#002f65',
|
||||
},
|
||||
|
||||
|
||||
|
||||
// App store
|
||||
store: store,
|
||||
// App routes
|
||||
routes: routes,
|
||||
|
||||
// Register service worker (only on production build)
|
||||
serviceWorker: process.env.NODE_ENV ==='production' ? {
|
||||
path: '/service-worker.js',
|
||||
} : {},
|
||||
|
||||
// Input settings
|
||||
input: {
|
||||
scrollIntoViewOnFocus: device.cordova,
|
||||
scrollIntoViewCentered: device.cordova,
|
||||
},
|
||||
// Cordova Statusbar settings
|
||||
statusbar: {
|
||||
iosOverlaysWebView: true,
|
||||
androidOverlaysWebView: false,
|
||||
},
|
||||
};
|
||||
// Login screen data
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
|
||||
const alertLoginData = () => {
|
||||
f7.dialog.alert('Username: ' + username.value + '<br>Password: ' + password.value, () => {
|
||||
f7.loginScreen.close();
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
f7ready(() => {
|
||||
// Init cordova APIs (see cordova-app.js)
|
||||
if (device.cordova) {
|
||||
cordovaApp.init(f7);
|
||||
}
|
||||
|
||||
// Call F7 APIs here
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
f7params,
|
||||
username,
|
||||
password,
|
||||
alertLoginData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
6
src/css/app.css
Normal file
6
src/css/app.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* iOS Cordova Tweak */
|
||||
.device-cordova.device-ios {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Your app custom styles here */
|
||||
56
src/css/icons.css
Normal file
56
src/css/icons.css
Normal file
@@ -0,0 +1,56 @@
|
||||
/* Material Icons Font (for MD theme) */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'),
|
||||
url(../fonts/material-icons.woff2) format('woff2'),
|
||||
url(../fonts/material-icons.woff) format('woff');
|
||||
}
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
/* Framework7 Icons Font (for iOS theme) */
|
||||
@font-face {
|
||||
font-family: 'Framework7 Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/Framework7Icons-Regular.woff2') format('woff2'),
|
||||
url('../fonts/Framework7Icons-Regular.woff') format('woff');
|
||||
}
|
||||
.f7-icons {
|
||||
font-family: 'Framework7 Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-moz-font-feature-settings: 'liga=1';
|
||||
-moz-font-feature-settings: 'liga';
|
||||
font-feature-settings: 'liga';
|
||||
text-align: center;
|
||||
}
|
||||
BIN
src/fonts/Framework7Icons-Regular.ttf
Normal file
BIN
src/fonts/Framework7Icons-Regular.ttf
Normal file
Binary file not shown.
BIN
src/fonts/Framework7Icons-Regular.woff
Normal file
BIN
src/fonts/Framework7Icons-Regular.woff
Normal file
Binary file not shown.
BIN
src/fonts/Framework7Icons-Regular.woff2
Normal file
BIN
src/fonts/Framework7Icons-Regular.woff2
Normal file
Binary file not shown.
55
src/fonts/_mixins.scss
Normal file
55
src/fonts/_mixins.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
|
||||
@function material-icons-str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace +
|
||||
material-icons-str-replace(
|
||||
str-slice($string, $index + str-length($search)),
|
||||
$search,
|
||||
$replace
|
||||
);
|
||||
}
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@mixin material-icons-font-class($font-family) {
|
||||
font-family: $font-family;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: $material-icons-font-size;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased; // Support for all WebKit browsers
|
||||
-moz-osx-font-smoothing: grayscale; // Support for Firefox
|
||||
text-rendering: optimizeLegibility; // Support for Safari and Chrome
|
||||
font-feature-settings: 'liga'; // Support for IE
|
||||
}
|
||||
|
||||
@mixin material-icons-font($font-family) {
|
||||
$class-name: to-lower-case($font-family);
|
||||
$class-name: material-icons-str-replace($class-name, ' ', '-');
|
||||
$font-file: $material-icons-font-path + $class-name;
|
||||
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $material-icons-font-display;
|
||||
src: url('#{$font-file}.woff2') format('woff2'),
|
||||
url('#{$font-file}.woff') format('woff');
|
||||
}
|
||||
|
||||
.#{$class-name} {
|
||||
@include material-icons-font-class($font-family);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin material-icons() {
|
||||
@warn "material-icons() Sass mixin has been deprecated as of 1.0. Use '@extend .material-icons;' instead of '@include material-icons();'.";
|
||||
@include material-icons-font-class('Material Icons');
|
||||
}
|
||||
3
src/fonts/_variables.scss
Normal file
3
src/fonts/_variables.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
$material-icons-font-path: './' !default;
|
||||
$material-icons-font-size: 24px !default;
|
||||
$material-icons-font-display: block !default;
|
||||
24
src/fonts/filled.css
Normal file
24
src/fonts/filled.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
|
||||
}
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/filled.scss
Normal file
4
src/fonts/filled.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons');
|
||||
BIN
src/fonts/material-icons-outlined.woff
Normal file
BIN
src/fonts/material-icons-outlined.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-outlined.woff2
Normal file
BIN
src/fonts/material-icons-outlined.woff2
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-round.woff
Normal file
BIN
src/fonts/material-icons-round.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-round.woff2
Normal file
BIN
src/fonts/material-icons-round.woff2
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-sharp.woff
Normal file
BIN
src/fonts/material-icons-sharp.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-sharp.woff2
Normal file
BIN
src/fonts/material-icons-sharp.woff2
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-two-tone.woff
Normal file
BIN
src/fonts/material-icons-two-tone.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons-two-tone.woff2
Normal file
BIN
src/fonts/material-icons-two-tone.woff2
Normal file
Binary file not shown.
124
src/fonts/material-icons.css
Normal file
124
src/fonts/material-icons.css
Normal file
@@ -0,0 +1,124 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff");
|
||||
}
|
||||
.material-icons {
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
|
||||
}
|
||||
.material-icons-outlined {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
|
||||
}
|
||||
.material-icons-round {
|
||||
font-family: "Material Icons Round";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
|
||||
}
|
||||
.material-icons-sharp {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
|
||||
}
|
||||
.material-icons-two-tone {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
5
src/fonts/material-icons.scss
Normal file
5
src/fonts/material-icons.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import 'filled';
|
||||
@import 'outlined';
|
||||
@import 'round';
|
||||
@import 'sharp';
|
||||
@import 'two-tone';
|
||||
BIN
src/fonts/material-icons.woff
Normal file
BIN
src/fonts/material-icons.woff
Normal file
Binary file not shown.
BIN
src/fonts/material-icons.woff2
Normal file
BIN
src/fonts/material-icons.woff2
Normal file
Binary file not shown.
24
src/fonts/outlined.css
Normal file
24
src/fonts/outlined.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff");
|
||||
}
|
||||
.material-icons-outlined {
|
||||
font-family: "Material Icons Outlined";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/outlined.scss
Normal file
4
src/fonts/outlined.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Outlined');
|
||||
24
src/fonts/round.css
Normal file
24
src/fonts/round.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Round";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff");
|
||||
}
|
||||
.material-icons-round {
|
||||
font-family: "Material Icons Round";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/round.scss
Normal file
4
src/fonts/round.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Round');
|
||||
24
src/fonts/sharp.css
Normal file
24
src/fonts/sharp.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff");
|
||||
}
|
||||
.material-icons-sharp {
|
||||
font-family: "Material Icons Sharp";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/sharp.scss
Normal file
4
src/fonts/sharp.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Sharp');
|
||||
24
src/fonts/two-tone.css
Normal file
24
src/fonts/two-tone.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff");
|
||||
}
|
||||
.material-icons-two-tone {
|
||||
font-family: "Material Icons Two Tone";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
4
src/fonts/two-tone.scss
Normal file
4
src/fonts/two-tone.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@include material-icons-font('Material Icons Two Tone');
|
||||
36
src/index.html
Normal file
36
src/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<!--
|
||||
Customize this policy to fit your own app's needs. For more guidance, please refer to the docs:
|
||||
https://cordova.apache.org/docs/en/latest/
|
||||
Some notes:
|
||||
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
|
||||
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
|
||||
* Enable inline JS: add 'unsafe-inline' to default-src
|
||||
-->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: content:">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
|
||||
|
||||
<meta name="theme-color" content="#fff">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="msapplication-tap-highlight" content="no">
|
||||
<title>ALVINN</title>
|
||||
<% if (TARGET === 'web') { %>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
|
||||
<link rel="icon" href="icons/favicon.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<% } %>
|
||||
<!-- built styles file will be auto injected -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<% if (TARGET === 'cordova') { %>
|
||||
<script src="cordova.js"></script>
|
||||
<% } %>
|
||||
<script type="module" src="./js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
src/js/app.js
Normal file
30
src/js/app.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// Import Vue
|
||||
import { createApp } from 'vue';
|
||||
|
||||
// Import Framework7
|
||||
import Framework7 from 'framework7/lite-bundle';
|
||||
|
||||
// Import Framework7-Vue Plugin
|
||||
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';
|
||||
|
||||
// Import Framework7 Styles
|
||||
import 'framework7/css/bundle';
|
||||
|
||||
// Import Icons and App Custom Styles
|
||||
import '../css/icons.css';
|
||||
import '../css/app.css';
|
||||
|
||||
// Import App Component
|
||||
import App from '../components/app.vue';
|
||||
|
||||
// Init Framework7-Vue Plugin
|
||||
Framework7.use(Framework7Vue);
|
||||
|
||||
// Init App
|
||||
const app = createApp(App);
|
||||
|
||||
// Register Framework7 Vue components
|
||||
registerComponents(app);
|
||||
|
||||
// Mount the app
|
||||
app.mount('#app');
|
||||
161
src/js/cordova-app.js
vendored
Normal file
161
src/js/cordova-app.js
vendored
Normal file
@@ -0,0 +1,161 @@
|
||||
var cordovaApp = {
|
||||
f7: null,
|
||||
/*
|
||||
This method hides splashscreen after 2 seconds
|
||||
*/
|
||||
handleSplashscreen: function () {
|
||||
var f7 = cordovaApp.f7;
|
||||
if (!window.navigator.splashscreen) return;
|
||||
setTimeout(() => {
|
||||
window.navigator.splashscreen.hide();
|
||||
}, 2000);
|
||||
},
|
||||
/*
|
||||
This method prevents back button tap to exit from app on android.
|
||||
In case there is an opened modal it will close that modal instead.
|
||||
In case there is a current view with navigation history, it will go back instead.
|
||||
*/
|
||||
handleAndroidBackButton: function () {
|
||||
var f7 = cordovaApp.f7;
|
||||
const $ = f7.$;
|
||||
|
||||
document.addEventListener(
|
||||
'backbutton',
|
||||
function (e) {
|
||||
if ($('.actions-modal.modal-in').length) {
|
||||
f7.actions.close('.actions-modal.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.dialog.modal-in').length) {
|
||||
f7.dialog.close('.dialog.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.sheet-modal.modal-in').length) {
|
||||
f7.sheet.close('.sheet-modal.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.popover.modal-in').length) {
|
||||
f7.popover.close('.popover.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.popup.modal-in').length) {
|
||||
if ($('.popup.modal-in>.view').length) {
|
||||
const currentView = f7.views.get('.popup.modal-in>.view');
|
||||
if (currentView && currentView.router && currentView.router.history.length > 1) {
|
||||
currentView.router.back();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
f7.popup.close('.popup.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
if ($('.login-screen.modal-in').length) {
|
||||
f7.loginScreen.close('.login-screen.modal-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.page-current .searchbar-enabled').length) {
|
||||
f7.searchbar.disable('.page-current .searchbar-enabled');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.page-current .card-expandable.card-opened').length) {
|
||||
f7.card.close('.page-current .card-expandable.card-opened');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
const currentView = f7.views.current;
|
||||
if (currentView && currentView.router && currentView.router.history.length > 1) {
|
||||
currentView.router.back();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.panel.panel-in').length) {
|
||||
f7.panel.close('.panel.panel-in');
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
false,
|
||||
);
|
||||
},
|
||||
/*
|
||||
This method does the following:
|
||||
- provides cross-platform view "shrinking" on keyboard open/close
|
||||
- hides keyboard accessory bar for all inputs except where it required
|
||||
*/
|
||||
handleKeyboard: function () {
|
||||
var f7 = cordovaApp.f7;
|
||||
if (!window.Keyboard || !window.Keyboard.shrinkView) return;
|
||||
var $ = f7.$;
|
||||
window.Keyboard.shrinkView(false);
|
||||
window.Keyboard.disableScrollingInShrinkView(true);
|
||||
window.Keyboard.hideFormAccessoryBar(true);
|
||||
window.addEventListener('keyboardWillShow', () => {
|
||||
f7.input.scrollIntoView(document.activeElement, 0, true, true);
|
||||
});
|
||||
window.addEventListener('keyboardDidShow', () => {
|
||||
f7.input.scrollIntoView(document.activeElement, 0, true, true);
|
||||
});
|
||||
window.addEventListener('keyboardDidHide', () => {
|
||||
if (document.activeElement && $(document.activeElement).parents('.messagebar').length) {
|
||||
return;
|
||||
}
|
||||
window.Keyboard.hideFormAccessoryBar(false);
|
||||
});
|
||||
window.addEventListener('keyboardHeightWillChange', (event) => {
|
||||
var keyboardHeight = event.keyboardHeight;
|
||||
if (keyboardHeight > 0) {
|
||||
// Keyboard is going to be opened
|
||||
document.body.style.height = `calc(100% - ${keyboardHeight}px)`;
|
||||
$('html').addClass('device-with-keyboard');
|
||||
} else {
|
||||
// Keyboard is going to be closed
|
||||
document.body.style.height = '';
|
||||
$('html').removeClass('device-with-keyboard');
|
||||
}
|
||||
});
|
||||
$(document).on(
|
||||
'touchstart',
|
||||
'input, textarea, select',
|
||||
function (e) {
|
||||
var nodeName = e.target.nodeName.toLowerCase();
|
||||
var type = e.target.type;
|
||||
var showForTypes = ['datetime-local', 'time', 'date', 'datetime'];
|
||||
if (nodeName === 'select' || showForTypes.indexOf(type) >= 0) {
|
||||
window.Keyboard.hideFormAccessoryBar(false);
|
||||
} else {
|
||||
window.Keyboard.hideFormAccessoryBar(true);
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
},
|
||||
init: function (f7) {
|
||||
// Save f7 instance
|
||||
cordovaApp.f7 = f7;
|
||||
|
||||
document.addEventListener('deviceready', () => {
|
||||
// Handle Android back button
|
||||
cordovaApp.handleAndroidBackButton();
|
||||
|
||||
// Handle Splash Screen
|
||||
cordovaApp.handleSplashscreen();
|
||||
|
||||
// Handle Keyboard
|
||||
cordovaApp.handleKeyboard();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default cordovaApp;
|
||||
83
src/js/routes.js
Normal file
83
src/js/routes.js
Normal file
@@ -0,0 +1,83 @@
|
||||
|
||||
import HomePage from '../pages/home.vue';
|
||||
import AboutPage from '../pages/about.vue';
|
||||
import FormPage from '../pages/form.vue';
|
||||
|
||||
|
||||
import DynamicRoutePage from '../pages/dynamic-route.vue';
|
||||
import RequestAndLoad from '../pages/request-and-load.vue';
|
||||
import NotFoundPage from '../pages/404.vue';
|
||||
|
||||
var routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: HomePage,
|
||||
},
|
||||
{
|
||||
path: '/about/',
|
||||
component: AboutPage,
|
||||
},
|
||||
{
|
||||
path: '/form/',
|
||||
component: FormPage,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: '/dynamic-route/blog/:blogId/post/:postId/',
|
||||
component: DynamicRoutePage,
|
||||
},
|
||||
{
|
||||
path: '/request-and-load/user/:userId/',
|
||||
async: function ({ router, to, resolve }) {
|
||||
// App instance
|
||||
var app = router.app;
|
||||
|
||||
// Show Preloader
|
||||
app.preloader.show();
|
||||
|
||||
// User ID from request
|
||||
var userId = to.params.userId;
|
||||
|
||||
// Simulate Ajax Request
|
||||
setTimeout(function () {
|
||||
// We got user data from request
|
||||
var user = {
|
||||
firstName: 'Vladimir',
|
||||
lastName: 'Kharlampidi',
|
||||
about: 'Hello, i am creator of Framework7! Hope you like it!',
|
||||
links: [
|
||||
{
|
||||
title: 'Framework7 Website',
|
||||
url: 'http://framework7.io',
|
||||
},
|
||||
{
|
||||
title: 'Framework7 Forum',
|
||||
url: 'http://forum.framework7.io',
|
||||
},
|
||||
]
|
||||
};
|
||||
// Hide Preloader
|
||||
app.preloader.hide();
|
||||
|
||||
// Resolve route to load page
|
||||
resolve(
|
||||
{
|
||||
component: RequestAndLoad,
|
||||
},
|
||||
{
|
||||
props: {
|
||||
user: user,
|
||||
}
|
||||
}
|
||||
);
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '(.*)',
|
||||
component: NotFoundPage,
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
35
src/js/store.js
Normal file
35
src/js/store.js
Normal file
@@ -0,0 +1,35 @@
|
||||
|
||||
import { createStore } from 'framework7/lite';
|
||||
|
||||
const store = createStore({
|
||||
state: {
|
||||
products: [
|
||||
{
|
||||
id: '1',
|
||||
title: 'Apple iPhone 8',
|
||||
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Apple iPhone 8 Plus',
|
||||
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Apple iPhone X',
|
||||
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
|
||||
},
|
||||
]
|
||||
},
|
||||
getters: {
|
||||
products({ state }) {
|
||||
return state.products;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addProduct({ state }, product) {
|
||||
state.products = [...state.products, product];
|
||||
},
|
||||
},
|
||||
})
|
||||
export default store;
|
||||
42
src/manifest.json
Normal file
42
src/manifest.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "ALVINN",
|
||||
"short_name": "ALVINN",
|
||||
"description": "ALVINN",
|
||||
"lang": "en-US",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#002f65",
|
||||
"theme_color": "#002f65",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/128x128.png",
|
||||
"sizes": "128x128",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/152x152.png",
|
||||
"sizes": "152x152",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
12
src/pages/404.vue
Normal file
12
src/pages/404.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar title="Not found" back-link="Back"></f7-navbar>
|
||||
<f7-block strong inset>
|
||||
<p>Sorry</p>
|
||||
<p>Requested content not found.</p>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
23
src/pages/about.vue
Normal file
23
src/pages/about.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<f7-page name="about">
|
||||
<f7-navbar title="About" back-link="Back"></f7-navbar>
|
||||
<f7-block-title>About My App</f7-block-title>
|
||||
<f7-block>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium
|
||||
dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe
|
||||
iste consectetur in repellat ut minus quibusdam!
|
||||
</p>
|
||||
<p>
|
||||
Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis,
|
||||
aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius,
|
||||
velit corrupti reprehenderit dignissimos consequatur!
|
||||
</p>
|
||||
<p>
|
||||
Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam
|
||||
eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto
|
||||
doloribus a at! Ea molestiae ullam delectus!
|
||||
</p>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
40
src/pages/dynamic-route.vue
Normal file
40
src/pages/dynamic-route.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar title="Dynamic Route" back-link="Back"></f7-navbar>
|
||||
<f7-block strong inset>
|
||||
<ul>
|
||||
<li><b>Url:</b> {{ f7route.url }}</li>
|
||||
<li><b>Path:</b> {{ f7route.path }}</li>
|
||||
<li><b>Hash:</b> {{ f7route.hash }}</li>
|
||||
<li>
|
||||
<b>Params:</b>
|
||||
<ul>
|
||||
<li v-for="(value, key) in f7route.params" :key="key">
|
||||
<b>{{ key }}:</b> {{ value }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<b>Query:</b>
|
||||
<ul>
|
||||
<li v-for="(value, key) in f7route.query" :key="key">
|
||||
<b>{{ key }}:</b> {{ value }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><b>Route:</b> {{ f7route.route.path }}</li>
|
||||
</ul>
|
||||
</f7-block>
|
||||
<f7-block strong inset>
|
||||
<f7-link @click="f7router.back()">Go back via Router API</f7-link>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
f7route: Object,
|
||||
f7router: Object,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
86
src/pages/form.vue
Normal file
86
src/pages/form.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<f7-page name="form">
|
||||
<f7-navbar title="Form" back-link="Back"></f7-navbar>
|
||||
|
||||
<f7-block-title>Form Example</f7-block-title>
|
||||
<f7-list strong-ios dividers-ios outline-ios>
|
||||
<f7-list-input label="Name" type="text" placeholder="Your name"></f7-list-input>
|
||||
|
||||
<f7-list-input label="E-mail" type="email" placeholder="E-mail"></f7-list-input>
|
||||
|
||||
<f7-list-input label="URL" type="url" placeholder="URL"></f7-list-input>
|
||||
|
||||
<f7-list-input label="Password" type="password" placeholder="Password"></f7-list-input>
|
||||
|
||||
<f7-list-input label="Phone" type="tel" placeholder="Phone"></f7-list-input>
|
||||
|
||||
<f7-list-input label="Gender" type="select">
|
||||
<option>Male</option>
|
||||
<option>Female</option>
|
||||
</f7-list-input>
|
||||
|
||||
<f7-list-input
|
||||
label="Birth date"
|
||||
type="date"
|
||||
placeholder="Birth day"
|
||||
defaultValue="2014-04-30"
|
||||
></f7-list-input>
|
||||
|
||||
<f7-list-item title="Toggle">
|
||||
<template #after>
|
||||
<f7-toggle />
|
||||
</template>
|
||||
</f7-list-item>
|
||||
|
||||
<f7-list-input label="Range" :input="false">
|
||||
<template #input>
|
||||
<f7-range :value="50" :min="0" :max="100" :step="1" />
|
||||
</template>
|
||||
</f7-list-input>
|
||||
|
||||
<f7-list-input type="textarea" label="Textarea" placeholder="Bio"></f7-list-input>
|
||||
<f7-list-input type="textarea" label="Resizable" placeholder="Bio" resizable></f7-list-input>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>Buttons</f7-block-title>
|
||||
<f7-block strong-ios outline-ios class="grid grid-cols-2 grid-gap">
|
||||
<f7-button>Button</f7-button>
|
||||
<f7-button fill>Fill</f7-button>
|
||||
|
||||
<f7-button raised>Raised</f7-button>
|
||||
<f7-button raised fill>Raised Fill</f7-button>
|
||||
|
||||
<f7-button round>Round</f7-button>
|
||||
<f7-button round fill>Round Fill</f7-button>
|
||||
|
||||
<f7-button outline>Outline</f7-button>
|
||||
<f7-button round outline>Outline Round</f7-button>
|
||||
|
||||
<f7-button small outline>Small</f7-button>
|
||||
<f7-button small round outline>Small Round</f7-button>
|
||||
|
||||
<f7-button small fill>Small</f7-button>
|
||||
<f7-button small round fill>Small Round</f7-button>
|
||||
|
||||
<f7-button large raised>Large</f7-button>
|
||||
<f7-button large fill raised>Large Fill</f7-button>
|
||||
|
||||
<f7-button large fill raised color="red">Large Red</f7-button>
|
||||
<f7-button large fill raised color="green">Large Green</f7-button>
|
||||
</f7-block>
|
||||
|
||||
<f7-block-title>Checkbox group</f7-block-title>
|
||||
<f7-list strong-ios outline-ios dividers-ios>
|
||||
<f7-list-item checkbox name="my-checkbox" value="Books" title="Books"></f7-list-item>
|
||||
<f7-list-item checkbox name="my-checkbox" value="Movies" title="Movies"></f7-list-item>
|
||||
<f7-list-item checkbox name="my-checkbox" value="Food" title="Food"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>Radio buttons group</f7-block-title>
|
||||
<f7-list strong-ios outline-ios dividers-ios>
|
||||
<f7-list-item radio name="radio" value="Books" title="Books"></f7-list-item>
|
||||
<f7-list-item radio name="radio" value="Movies" title="Movies"></f7-list-item>
|
||||
<f7-list-item radio name="radio" value="Food" title="Food"></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</template>
|
||||
56
src/pages/home.vue
Normal file
56
src/pages/home.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<f7-page name="home">
|
||||
<!-- Top Navbar -->
|
||||
<f7-navbar large :sliding="false">
|
||||
<f7-nav-left>
|
||||
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
|
||||
</f7-nav-left>
|
||||
<f7-nav-title sliding>ALVINN</f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
|
||||
</f7-nav-right>
|
||||
<f7-nav-title-large>ALVINN</f7-nav-title-large>
|
||||
</f7-navbar>
|
||||
<!-- Toolbar-->
|
||||
<f7-toolbar bottom>
|
||||
<f7-link>Left Link</f7-link>
|
||||
<f7-link>Right Link</f7-link>
|
||||
</f7-toolbar>
|
||||
<!-- Page content-->
|
||||
<f7-block>
|
||||
<p>Here is your blank Framework7 app. Let's see what we have here.</p>
|
||||
</f7-block>
|
||||
<f7-block-title>Navigation</f7-block-title>
|
||||
<f7-list strong inset dividersIos>
|
||||
<f7-list-item link="/about/" title="About"></f7-list-item>
|
||||
<f7-list-item link="/form/" title="Form"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-block-title>Modals</f7-block-title>
|
||||
<f7-block class="grid grid-cols-2 grid-gap">
|
||||
<f7-button fill popup-open="#my-popup">Popup</f7-button>
|
||||
<f7-button fill login-screen-open="#my-login-screen">Login Screen</f7-button>
|
||||
</f7-block>
|
||||
|
||||
<f7-block-title>Panels</f7-block-title>
|
||||
<f7-block class="grid grid-cols-2 grid-gap">
|
||||
<f7-button fill panel-open="left">Left Panel</f7-button>
|
||||
<f7-button fill panel-open="right">Right Panel</f7-button>
|
||||
</f7-block>
|
||||
|
||||
<f7-list strong inset dividersIos>
|
||||
<f7-list-item
|
||||
title="Dynamic (Component) Route"
|
||||
link="/dynamic-route/blog/45/post/125/?foo=bar#about"
|
||||
></f7-list-item>
|
||||
<f7-list-item
|
||||
title="Default Route (404)"
|
||||
link="/load-something-that-doesnt-exist/"
|
||||
></f7-list-item>
|
||||
<f7-list-item
|
||||
title="Request Data & Load"
|
||||
link="/request-and-load/user/123456/"
|
||||
></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</template>
|
||||
25
src/pages/request-and-load.vue
Normal file
25
src/pages/request-and-load.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar :title="`${user.firstName} ${user.lastName}`" back-link="Back"></f7-navbar>
|
||||
<f7-block strong inset>
|
||||
{{ user.about }}
|
||||
</f7-block>
|
||||
<f7-list strong inset dividers-ios>
|
||||
<f7-list-item
|
||||
v-for="(link, index) in user.links"
|
||||
:key="index"
|
||||
:link="link.url"
|
||||
:title="link.title"
|
||||
external
|
||||
target="_blank"
|
||||
></f7-list-item>
|
||||
</f7-list>
|
||||
</f7-page>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
user: Object,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user