I was curious if there is a way to animate moving an item in a Grid (in Expression) from one cell to another.
I know that I can change the Row and Column for an item in the Grid, but that just makes the items appear in the new location. What I would like to do is when the Row or Column for the item changes, have the item smoothly move to the new location in the Grid (possibly with a transition effect like elasticity).
Thank you for you time.
Paul
Related
I'm working on a small project in React, where I have a list of five div's containing text. On the left slide I have a slider that should take the position of the item that is selected. In the initial state, the slider takes the position of the first element. If, for example, the third item is selected, the slider needs to move to the position of the third item. When item 2 is selected consequently, the slider needs to move to the position of the second item. I already tried something but this doesn't give me the desired result, as the slider always starts from the position of item 1. A minimal reproducible example can be found here:
https://codesandbox.io/s/stoic-tess-thcjp?file=/src/App.js
Any advice would be welcome.
Instead of using animation, you could use a combination of transition and transform css properties.
You can check the below example, might be what you are looking for.
https://codesandbox.io/s/black-mountain-wu2mb?file=/src/styles.css
So basically, I have a react app and I am trying to create a grid of square elements but:
i dont want to
shrink them below a certain size (meaning that when the page
shrinks, the last elements on a row are pushed to the next row
etc.).
I was also hoping to put in a few special 2x2 elements in the grid (realistically not
many, between 1-3)
I am looking to be able input a series of objects (ordered by priority) and have the page dynamically allocate them into the grid space as best it can.
I have done bootstrap grids in the past, 1. could be achieved fairly easily by changing the .col-x value at certain screen widths so the elements wrap
But 2. seems really hard:
making a static row with a 2x2 element and some 1x1 elements seems
easy, but then it will all break when the above row tries to wrap, or
when i have to wrap elements in this static row.
I was also thinking of offsetting 2 consecutive rows and just placing a div with the 2x2 boxes over the offset, but then i would have to change the row elements that are being offset on the fly, and i dont know how to get an element to tell me what row and column it is in.
Any ideas?
I have a list of lets say 20 buttons (this number can change dynamically) in a listView which I want to display using a grid on a swipeView or gridView. Only 6 buttons should be visible at once. In addition, it should be possible to exchange the position of buttons via drag and drop (see http://doc.qt.io/qt-5/qtquick-draganddrop-example.html). In case gridView is the way to go, is it possible to have it behave like swipeView, so that the buttons can not be moved to an arbitrary position but lock onto their column?
You might want to give snapMode a try.
You have the choice of:
GridView.NoSnap (default) - the view stops anywhere within the visible area.
GridView.SnapToRow - the view settles with a row (or column for GridView.FlowTopToBottom flow) aligned with the start of the view.
GridView.SnapOneRow - the view will settle no more than one row (or column for GridView.FlowTopToBottom flow) away from the first visible row at the time the mouse button is released. This mode is particularly useful for moving one page at a time.
You need to make sure, that the size of the GridView really fits your desired amount of delegates, for it will only make sure, that the first element is aligned, not that there is no element paritally protruding the view.
I have three lists stuck together horizontally in Flex that I would like to act like columns of the same list. I've put a method on change to make the same index on all three lists in sync with each other when an item is selected in any list. I want to do the same for hover; that is, when you hover over an item and the light blue background appears, and I want the same index on the other two lists to also show that light blue background.
Is there a way to get and set the "hovered-over item" in a list, or create a visually analogous effect?
I have two spark lists and want to drag items from one list to the other. When im dragging an item and over the other list item, i want the target item to change the background coloer.
Basically instead of showing the black line indicating that I will drop between elements, I want to see the target item highlight.
Thanks in advance.
Edit: Something that would look similar to this drag and drop:
(source: blogspot.com)
I would ask you to point out a UI precedent where this is standard / expected behavior.
When you drag an itemA onto itemB; and itemB is highlighted somehow, it usually means you're dragging into ItemB. But, in this case you are not dragging item from List1 into the item from List2. [I assume at least].
You'd have to override the list code drag and drop features to make this happen.