Comments (6)
@kalnode I used the following setup in Nuxt. (will work in Vue too). It's sort-of responsive, but with this composable I can set a size for each of the breakpoints in my app.
<ve-progress
:progress="99"
:size="breakpoints.is === 'xs' ? 130 : 200"
>
<script>
const { breakpoints } = useBreakpoint()
</script>
The breakpoints composable is copied from somewhere
import { onMounted, reactive } from 'vue'
const screens = {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280
}
const breakpoints = reactive({ w: 0, h: 0, is: 'xs' })
const xs = (val) => val >= screens.xs && val < screens.sm
const sm = (val) => val >= screens.sm && val < screens.md
const md = (val) => val >= screens.md && val < screens.lg
const lg = (val) => val >= screens.lg && val < screens.xl
const xl = (val) => val >= screens.xl
const getBreakpoint = (w) => {
if (xs(w)) return 'xs'
else if (sm(w)) return 'sm'
else if (md(w)) return 'md'
else if (lg(w)) return 'lg'
else if (xl(w)) return 'xl'
else return 'all'
}
const setBreakpoint = () => {
breakpoints.w = window.innerWidth
breakpoints.h = window.innerHeight
breakpoints.is = getBreakpoint(window.innerWidth)
}
const useBreakpoint = () => {
onMounted(() => {
setBreakpoint()
window.addEventListener('resize', () => {
setBreakpoint()
})
})
return {
breakpoints
}
}
export default useBreakpoint
from vue-ellipse-progress.
This is a good "work around" @notflip, thanks for sharing. Probably the front end framework of your choice will already have similar composable, like useDisplay
from Vuetify, or you could even use useBreakpoints
provided by Vueuse.
@kalnode let me know if you find something
from vue-ellipse-progress.
At the moment, unfortunately, only fixed values work. The circumference is calculated based on different parameters (e.g. thickness of the line, the size of the dot, etc.). Relative size would make this calculation much more complex.
But I don't say that I exclude it completely. Maybe in the future I will give it a try, I also think that would be a useful feature
from vue-ellipse-progress.
@setaman That makes sense, I understand! Thanks for this plugin, I love it.
from vue-ellipse-progress.
I'm glad it is useful
from vue-ellipse-progress.
Not being responsive is the primary reason I'm looking elsewhere =(.
from vue-ellipse-progress.
Related Issues (20)
- this project cant be used with typescript HOT 2
- How can I go around and then go around again
- What event triggered it? HOT 1
- Gradient not applying correctly HOT 2
- ssr aware HOT 4
- when I use it in iphone6s with ios9οΌit Abnormal display HOT 4
- I guess I cant installed it tell me why and pls help me fixing HOT 6
- Can i define `:progress = (value)` HOT 3
- Typescript support HOT 2
- Create non-pluggin version of the library HOT 2
- $ref is undefined when 'data' is specified on [email protected] HOT 1
- Usage with vue3 + composition API HOT 2
- Trying to display legend on a multiple line ("data" driven chart) HOT 2
- Can't import on Vue 3 HOT 3
- confused on using slot property on vue3 HOT 3
- legendClass example HOT 2
- Animation Triggers Twice upon Mounting in Safari and Ionic App HOT 3
- Remove unused space for half circle HOT 1
- Add circle slot HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-ellipse-progress.