root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lint: format

Browse Source
This commit is contained in:
Seven
2025-12-11 00:26:27 +07:00
parent cfc4f4e0f7
commit 52415f91b0
22 changed files with 8297 additions and 10071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@@ -1,9 +1,9 @@
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script setup lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { IonApp, IonRouterOutlet } from "@ionic/vue";
</script>
<template>
<IonApp>
<IonRouterOutlet />
</IonApp>
</template>

12
src/components/ExploreContainer.vue
View File

@@ -1,3 +1,9 @@
<script setup lang="ts">
defineProps({
name: String,
});
</script>
<template>
<div id="container">
<strong>{{ name }}</strong>
@@ -5,12 +11,6 @@
</div>
</template>
<script setup lang="ts">
defineProps({
name: String,
});
</script>
<style scoped>
#container {
text-align: center;

34
src/main.ts
View File

@@ -1,24 +1,24 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import { IonicVue } from "@ionic/vue";
import { createApp } from "vue";
import App from "./App.vue";
import { IonicVue } from '@ionic/vue';
import router from "./router";
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';
import "@ionic/vue/css/core.css";
/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';
import "@ionic/vue/css/normalize.css";
import "@ionic/vue/css/structure.css";
import "@ionic/vue/css/typography.css";
/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';
import "@ionic/vue/css/padding.css";
import "@ionic/vue/css/float-elements.css";
import "@ionic/vue/css/text-alignment.css";
import "@ionic/vue/css/text-transformation.css";
import "@ionic/vue/css/flex-utils.css";
import "@ionic/vue/css/display.css";
/**
* Ionic Dark Mode
@@ -29,15 +29,15 @@ import '@ionic/vue/css/display.css';
/* @import '@ionic/vue/css/palettes/dark.always.css'; */
/* @import '@ionic/vue/css/palettes/dark.class.css'; */
import '@ionic/vue/css/palettes/dark.system.css';
import "@ionic/vue/css/palettes/dark.system.css";
/* Theme variables */
import './theme/variables.css';
import "./theme/variables.css";
const app = createApp(App)
.use(IonicVue)
.use(router);
router.isReady().then(() => {
app.mount('#app');
app.mount("#app");
});

42
src/router/index.ts
View File

@@ -1,39 +1,39 @@
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import TabsPage from '../views/TabsPage.vue'
import type { RouteRecordRaw } from "vue-router";
import { createRouter, createWebHistory } from "@ionic/vue-router";
import TabsPage from "../views/TabsPage.vue";
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/tabs/tab1'
path: "/",
redirect: "/tabs/tab1",
},
{
path: '/tabs/',
path: "/tabs/",
component: TabsPage,
children: [
{
path: '',
redirect: '/tabs/tab1'
path: "",
redirect: "/tabs/tab1",
},
{
path: 'tab1',
component: () => import('@/views/Tab1Page.vue')
path: "tab1",
component: () => import("@/views/Tab1Page.vue"),
},
{
path: 'tab2',
component: () => import('@/views/Tab2Page.vue')
path: "tab2",
component: () => import("@/views/Tab2Page.vue"),
},
{
path: 'tab3',
component: () => import('@/views/Tab3Page.vue')
}
]
}
]
path: "tab3",
component: () => import("@/views/Tab3Page.vue"),
},
],
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
routes,
});
export default router
export default router;

40
src/views/Tab1Page.vue
View File

@@ -1,23 +1,25 @@
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
import ExploreContainer from "@/components/ExploreContainer.vue";
</script>
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1</ion-title>
</ion-toolbar>
</ion-header>
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 1</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Tab 1
</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 1 page" />
</ion-content>
</ion-page>
</IonContent>
</IonPage>
</template>
<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
</script>

40
src/views/Tab2Page.vue
View File

@@ -1,23 +1,25 @@
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
import ExploreContainer from "@/components/ExploreContainer.vue";
</script>
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 2</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 2</ion-title>
</ion-toolbar>
</ion-header>
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 2</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Tab 2
</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 2 page" />
</ion-content>
</ion-page>
</IonContent>
</IonPage>
</template>
<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
</script>

40
src/views/Tab3Page.vue
View File

@@ -1,23 +1,25 @@
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
import ExploreContainer from "@/components/ExploreContainer.vue";
</script>
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 3</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 3</ion-title>
</ion-toolbar>
</ion-header>
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Tab 3</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent :fullscreen="true">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Tab 3
</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 3 page" />
</ion-content>
</ion-page>
</IonContent>
</IonPage>
</template>
<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
</script>

52
src/views/TabsPage.vue
View File

@@ -1,28 +1,28 @@
<template>
<ion-page>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" href="/tabs/tab1">
<ion-icon aria-hidden="true" :icon="triangle" />
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" href="/tabs/tab2">
<ion-icon aria-hidden="true" :icon="ellipse" />
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3" href="/tabs/tab3">
<ion-icon aria-hidden="true" :icon="square" />
<ion-label>Tab 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
<script setup lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';
import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
import { ellipse, square, triangle } from "ionicons/icons";
</script>
<template>
<IonPage>
<IonTabs>
<IonRouterOutlet />
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/tab1">
<IonIcon aria-hidden="true" :icon="triangle" />
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/tab2">
<IonIcon aria-hidden="true" :icon="ellipse" />
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/tab3">
<IonIcon aria-hidden="true" :icon="square" />
<IonLabel>Tab 3</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
</template>