Can I achieve having table 'zoomed-out' on small screen using Vue2 and Vuetify?
I have a task where table needs to remain being full width on mobile screen where it can be zoomed in. To basically achieve img-like behavior.
I basically need to achieve this second screen from this image, but using v-data-table .
Even though "they both equally suck", I need the second solution.
Is there any Vuetify specific solution for this?
In vuetify you can use v-data-table and use prop mobile-breakpoint="0"
<v-data-table
...
mobile-breakpoint="0"
...
></v-data-table>
Related
I have a snack here where I want to take the scroll Y value and pass it to an animated view inside a sibling component and have that view animate as I scroll, for this example I just want to animate the height. Smaller when scrolling down, larger when scrolling up (doesn't matter). The snack currently passes it as state which I know is incorrect but I'm not sure how else I would achieve this.
How I can animate the component the correct way?
Turns out I'm overthinking it. Just use the useSharedValue hook and pass the scroll value in there then use it as a prop on the sibling component...
Here is the updated snack if anyone was wondering
Before I begin trying to build something I want to check my strategy.
I think the best way to define what I would like to achieve is to build a component using a FlatList that adjusts fontSize dynamically based on the size of the View (or other more appropriately defined size limiting area) in which it is being displayed.
For example, let's say I want a FlatList of items (of data returned from an API call) that displays full-screen on Screen 1 of my app, but in a small corner of Screen 2 of my app. Here's a quick mock of the behavior I would want:
It seems like the alignment of items, flex, other styles could be written so that the proportions/positions stay the same regardless of parent view in which the FlatList is displayed, so I might only have to adjust fontSize.
Can this behavior be achieved using a FlatList and a reference to a dynamic fontSize? If so, where should the "awareness" of the parent View be stored/passed?
I'm looking for general input as to how to achieve this simply, with or without FlatList. I like using FlatList because of how well it works off the shelf for my simple tasks. Hopefully I'm not trying to make it do something it cant.
Thanks!
I am trying to create a modal that is half screen but when the use slides up, it becomes full screen. Like google map or lyft's modal.
Thanks!
You can use react-native-bottom-action-sheet, it's the easiest solution if you have time and are willing to experiment you can create your own custom solution using PanResponder from react-native
I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.
So far so good it is done and it looks exactly as I wanted it.
The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.
I have tried with css but nothing happens. Does anyone have any hint on what I should do?
I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.
What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:
.scrollable{ height:100%; overflow:auto;}
I also tried this as it was the closest thing I could find to my problem
I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.
<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>
Navigation drawers should be scrollable if you add the app option as per the documentation
I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.
I just added this style to my drawer and it did the trick :
calc(100% - 48px); height: 100vh;
For me, the problem was that i did not put the app attribute on th v-navigation-drawer
I just change:<v-navigation-drawer absolute temporary ></v-navigation-drawer>
For:
<v-navigation-drawer absolute temporary app ></v-navigation-drawer>
The adittion of app allow scrolling on my v-navigation-drawer
Just add app attribute to v-navigation-drawer tag
<v-navigation-drawer
temporary
app
width="280"
height="100vh"
>
As shown above, I want to create this two-part screen where I can click onto both the A component and B component on the first view provided here. When a user scrolls B component, it may take up the entire screen and move over the A component. (A component does not move with the FlatList).
I'm new to react native and was wondering how I could create such behavior? I tried using absolute positioning and ListHeaderComponent inside the FlatList but didn't really get anywhere. Let me know if anyone has an idea.
Thanks!
I would try something like the following screen structure:
View
Image
ScrollView w/ trans background that goes to the top of screen
FlatList with top padding to push it below the image
Items in list
/FlatList
/ScrollView
/View
You could also see if react-native-parallax-scroll-view works for you as it looks somewhat similar to what you describe
https://github.com/jaysoo/react-native-parallax-scroll-view