forked from vueuse/vueuse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.vue
27 lines (23 loc) · 951 Bytes
/
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
<script setup lang="ts">
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const smWidth = breakpointsTailwind.sm
const sm = breakpoints.smaller('sm')
const sme = breakpoints.smallerOrEqual('sm')
const md = breakpoints.between('sm', 'md')
const lg = breakpoints.between('md', 'lg')
const xl = breakpoints.between('lg', 'xl')
const xxl = breakpoints.between('xl', '2xl')
const xxxl = breakpoints['2xl']
</script>
<template>
<div class="font-mono">
<div> sm(<{{ smWidth }}px): <BooleanDisplay :value="sm" /></div>
<div> sm(<={{ smWidth }}px): <BooleanDisplay :value="sme" /></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>3xl: <BooleanDisplay :value="xxxl" /></div>
</div>
</template>