28 lines
1.4 KiB
Vue
28 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import AppHeader from '../components/AppHeader.vue'
|
|
import { useDemoStore } from '../data'
|
|
|
|
const store = useDemoStore()
|
|
</script>
|
|
|
|
<template>
|
|
<main class="screen">
|
|
<AppHeader title="Navigation lab" subtitle="Runtime controls" back />
|
|
<section class="lab-intro">
|
|
<span>60</span>
|
|
<div><strong>FPS baseline</strong><p>Interactive layers use transform and opacity only.</p></div>
|
|
</section>
|
|
<section class="settings-group">
|
|
<h2>Simulation</h2>
|
|
<label><span><strong>Network latency</strong><small>{{ store.settings.simulatedLatency }} ms</small></span><input v-model.number="store.settings.simulatedLatency" type="range" min="0" max="1200" step="20" /></label>
|
|
<label><span><strong>Force message failures</strong><small>Test optimistic UI</small></span><input v-model="store.settings.simulateFailures" type="checkbox" /></label>
|
|
<div><span><strong>Connection</strong><small>Browser network state</small></span><b :class="{ offline: store.offline.value }">{{ store.offline.value ? 'Offline' : 'Online' }}</b></div>
|
|
</section>
|
|
<section class="settings-group">
|
|
<h2>Gesture recipes</h2>
|
|
<p>Hold an edge-back gesture at any progress, swipe between primary routes, drag a conversation, or open the compose sheet.</p>
|
|
</section>
|
|
<button class="reset-button" type="button" @click="store.reset">Reset offline demo data</button>
|
|
</main>
|
|
</template>
|