-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
demo.vue
36 lines (31 loc) · 1.36 KB
/
demo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script setup lang="ts">
import { ref } from 'vue-demi'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const smWidth = breakpointsTailwind.sm
const reactiveStuff = ref<keyof typeof breakpointsTailwind>('sm')
const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveStuff.value)
const current = breakpoints.current()
const active = breakpoints.active()
const xs = breakpoints.smaller('sm')
const xse = breakpoints.smallerOrEqual('sm')
const sm = breakpoints.between('sm', 'md')
const md = breakpoints.between('md', 'lg')
const lg = breakpoints.between('lg', 'xl')
const xl = breakpoints.between('xl', '2xl')
const xxl = breakpoints['2xl']
</script>
<template>
<div class="font-mono">
<div> Current breakpoints: {{ current }} </div>
<div> Active breakpoint: {{ active }} </div>
<div> xs(<{{ smWidth }}px): <BooleanDisplay :value="xs" /></div>
<div> xs(<={{ smWidth }}px): <BooleanDisplay :value="xse" /></div>
<div> sm: <BooleanDisplay :value="sm" /></div>
<div> md: <BooleanDisplay :value="md" /></div>
<div> lg: <BooleanDisplay :value="lg" /></div>
<div> xl: <BooleanDisplay :value="xl" /></div>
<div>2xl: <BooleanDisplay :value="xxl" /></div>
<div>greaterThanBreakPoint: <BooleanDisplay :value="isGreaterThanBreakpoint" /></div>
</div>
</template>