I have a component that have a v-tab list of items and, in certain resolutions, it works great. However, I saw that when it gets lower than 600px width, the tabs gets weird, they break a little and move off their space.
I'm thinking of displaying it in a vertical way for lower resolutions, however, I can't override the tabs style even putting everything with the !important attribute. I see that Vuetify has a prop called vertical, but, is it possible to use this kind of prop in a conditional way? Let's say, over 600px, I don't want the vertical prop and under it, I want.
Can we make something like this in Vue?
maybe the $vuetify breakpoints feature is useful for you. Set the prop with a computed property depending on current $vuetify breakpoint.
is it possible to use this kind of prop in a conditional way?
Yes, you could do something like this:
<v-tabs
:vertical="$vuetify.breakpoint.mobile"
>
</v-tabs>
or:
<v-tabs
:vertical="$vuetify.breakpoint.name === 'xs'"
>
</v-tabs>
More information here: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service
Related
I'm using a v-slider in a Vuetify context. The component has a message area that takes some space below the slider and makes it impossible to align the actual slider (the "line") in the vertical center to line up with other neighbouring components.
There seems to be a number of way to customize the message, but how do I get rid of that area completely? There will never be any messages to display there.
I've now resorted to adding a padding on top of the slider, align the components and then add a negative top padding on the group. But that seems just like a hack that I'd like to avoid.
Add the prop "hide-details" to the slider
<v-slider v-model="volume" label="Volume" hide-details></v-slider>
You can find all the possible props in the API-Section for the sliders.
I'm building a notes taking Vue app.
The note being edited is auto-saved every X secods.
Every time it auto saves, I want to show a small message on the bottom of the screen saying "Note Saved". This will fade in stay for 2 seconds and then fade out automatically.
I've done transitions in Vue before but not on-off transitions like this.
I can set a property linked to the element with v-if wrapped in a transition block. But then I need to change the property twice (true-false)? Would I need to set up a timer to wait the transition to be over before setting it to false again? Seems a bit hackish. What's the best way to approach this?
I think what you've described with v-if makes sense... you could change the property (or data) in a v-on:enter method on the related component. This would nicely isolate the behavior to the component and be pretty apparent to future-self.
A completely different approach would be defining a single animation with keyframes that transitions from hidden to display to hidden, but that might be somewhat confusing: what is the leave transition of an element with such an enter transition? Hmm.
I'm working a Vue project, and I'm using Vuex to manage the applications state. I've separated out the view of the app into many small layouts, as Vue components. For example I have a layout for a header and a floating stats panel.
I've written a custom directive for affixing the stats panel. Currently, this works similar to Bootstrap where you set a value, and when the page scrolls beyond that point an affix CSS class gets added to the element. This value is based on the height of the header. As app is responsive, I would rather have this value computed from the header outerHeight property.
Now, I can think of several ways on how to accomplish this, however I'm not sure the proper Vue way to do it.
I could listen for resize events and have the header update it's height in the Vuex store. However, it seems poor practice to have the store manage presentation data.
I could pass the id of the header to the affix directive, and use getElementById to check the height. But this is bypassing Vue completely.
I could add a method to the header to return its' height, and have the parent component that holds both the header and stats panel use that to update the affix value. This however, gets messy if header and stats don't share the same parent.
Are there any other options? What would be best practice? Thanks!
I would surely go with #1 - share it through Vuex. Keep in mind that Vuex is just a stage manager. There are no rules what kind of data you want to store. Furthermore, I think it would be best to use it, as more component may rely on this kind of data, and it will be the only source of truth, that is mutated in a predictable way. All other options include coupling components/instances/elements on the page, and therefore the bigger the connection between the height and the page gets, the more complex those connections will grow.
Plus it will be reactive, so just using actions/mutations you will have it updated everywhere, and therefore your page will look responsive.
Im new to react-native. I have just created a reusable component of text input as I want.
Im using that reusable component into a view. At one place Im adding reusable component 4 times, and at another place 7 times.
example :
<Textinput
style={styles.textInput}
secureTextEntry={false}
textInputName={'USERNAME'}
showBottomBorder={true}
height={45}
onTextChange={this.onTextChangeUsername}
/>
using above code 7 times in view , causes increase of size of the view.
But I dont want to allow this at it looks ugly on iPhone 4s screen.
So is there any way to disallow that ? Or rather can I give height to reusable component depending upon its parent view's height ?
Like , height={parentView.height/7} ?
I'm not sure exactly how to solve your problem, but if you wanted to add a custom width/height component that depended on the size of the div, you could do something like this with a class function:
resizeGraphs(){
var div = document.getElementsByClassName("yourcontainer")
if (div[0] != undefined){
var divWidth = document.getElementsByClassName("yourcontainer")[0].clientWidth //or .clientHeight
this.setState({
divWidth,
})}}
To explain, this will be called in componentDidMount (I guess you don't have to worry about window resizing). It gets the width of a given class and you can scale your inner elements appropriately as you suggested.
I guess warning flags should be going off if you see direct references to the DOM in react, but I wasn't sure how else to solve this. If anyone has a more "react-y" solution i'd love to see it..
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).