How can I style a picker to make it look like in form, but without it being nested in it?
In form picker looks like a navigation link which takes you to a separate screen where you can pick one option. I want such behaviour in list, but without changing list style to InsetGroupedListStyle or GroupedListStyle.
Now my picker looks like this:
But I want it to look somehow like that (I added GroupedListStyle for an example), but with the list style from previous screenshot
Related
I'm working on an app that involves inputting the amount of cards players ended up with, and ordering them in a list. But if theres a 2 or 3 way tie, I want the user to be able to have a menu that lets them select the order of who had the highest card to lowest card, that way I can organize the list. How do I get the user to order them, like what kind of Alert/Popup lets me do that?
Edit: Basically I was asking how to make a picker that lets you arrange multiple items into a specific order but it seems the best thing to do is just to have a stack appear with buttons for each item, where you can click them and go from there to create your order. Hope this helps for anyone in a similar situation!
For that kind of user interaction where they are doing more than just tapping an option (in your case, you want them to order the various cards), I would create your own custom view rather than use an alert or action sheet or similar.
The way you implement will depend on how you want it to look. If you want the view to appear on top of your current view (a bit like an alert does) where it only takes up the space needed for the content) then you can embed in a zStack. If you want it to slide up from the bottom as almost the same size as the full screen then you can use a sheet (sometimes also referred to as a modal).
A little difficult to explain how they look visually - if you google image search “SwiftUI sheet” then you’ll see what I mean (if you aren’t already familiar with them)
ZStack
you put your current view in a ZStack then create a new view which goes in the ZStack after it but you wrap it in an if statement so it’s conditionally shown based on a Boolean being true.
E.g.
if gameTied { ChooseSortOrderView() }
then when your game finishes - if it’s a tie, you set your Boolean to true and up pops the new view.
You can pass in the tied cards, get the user to sort them via drag and drop, form, picker (whatever you want), submit it. Then set the bool back to false to make the view go away.
sheet
The other alternative instead of using a zstack would be sheet so you get a modal view appear. Similar approach but instead of the ZStack, you use a .sheet modifier.
While I know I can use data-back-button to change the text on my drilldown menus, is it possible to change them to reflect whatever the parents of the drilldown is?
For example, the drilldown menu works as such:
And I'd like it to function as such:
I hope this makes sense and let me know if I can clarify. Thanks for any insight you can provide.
There are a couple of ways you could do this but the most straightforward seems to me to be something like this:
1) Use Foundations Drilldown options to set a new general back button. e.g. data-back-button='<li class="js-drilldown-back"><a class="new-back"></a></li>'
This takes care of the styling with .js-drilldown-back and makes it work as a back button without additional JavaScript. It also adds a new class to the a for later use setting the text.
2) To change the text you can use jQuery, perhaps something like this:
$('.new-back').each(function(){
var backTxt = $(this).parent().closest('.is-drilldown-submenu-parent').find('> a').text();
$(this).text(backTxt);
});
All this does is scurry up the menu structure to find out what the original link text was, and then copies it to the new back button.
This should work for all levels of a drilldown as in this example: http://codepen.io/tymothytym/pen/GWbXap
FYI: There are a few mild usability concerns with using the same labels to point forward and backwards in menus as users can find this confusing, particularly with many levels. You may have already considered this, I mention it only for completeness.
I could not change the menu structure in my project so I fixed it like this:
if (jQuery('.js-drilldown-back').length) {
jQuery('.js-drilldown-back').each(function () {
jQuery('.js-drilldown-back').find('a').text('Custom back text');
});
}
With this you don't need an extra html tag.
I'm working with Tabs (TabLayouts inside AppBarLayouts) and was wondering how to get the more dropdown in tabs like the one's shown in Google's design spec for Tabs
Something like this..
I'd really like to use grid view to render my content on a simple text page. I've got a grid view with the alias "content" set up. What do I type in the template to get it to show up? #CurrentPage.content does not work. I realize it probably uses those partials that 7.2 came with but I've got no idea how to use them.
It may help to know my knowledge level on this. I'm very new at wiring up templates to doctypes. The only ways of pulling data from my content I actually know how to use so far are these:
Get some text by typing something like #CurrentPage.content
Get a picture by typing something like #Umbraco.Media(CurrentPage.Picture)
Official documentation for the GridView can be found on the community website. For posterity's sake here is the relevant part:
Render grid in template
To display the grid on a site use:
#CurrentPage.GetGridHtml("propertyAlias")
This will by default use the view /views/partials/grid/bootstrap3.cshtml you can also use the built-in bootstrap2.cshtml view by overloading the method:
#CurrentPage.GetGridHtml("propertyAlias", "bootstrap2")
or point it a custom view, which by default looks in /views/partials/grid/ - or provide the method with a full path
#CurrentPage.GetGridHtml("propertyAlias", "mycustomview")
#CurrentPage.GetGridHtml("propertyAlias", "/views/mycustomfile.cshtml")
If you're working with a strongly typed model simply replace #CurrentPage with #Model.Content, so:
#Model.Content.GetGridHtml("propertyAlias")
The answer was to insert this into the template:
#CurrentPage.GetGridHtml("propertyalias")
In my case, content would go in place of propertyalias.
I'm working on a events board app. Events are displayed in columns at the height matching the start time and pack into the space if there is more then one overlapping. Each event is a view and I want to have a div next to the view that shows and hides on hover.
I know how to bind to mouseEnter and mouseLeave to show and hide part of the template but I want to show something adjacent to my view/template not within it.
I've already got some computed properties on the view to place the event with the correct height and width so I don't want to add the popover inside the view.
Here is something to mess with http://jsbin.com/osoner/1/edit
Seems like something simple but I want to make sure I'm doing things the Ember way.
After messing a little with your provided jsbin, here the results.
Basically what I've done was adding a new popup css declaration wich do position the popup so that it appears outside the parent view, and also moved the {{#if...}} helper into the originating view.
If you want to go more fancy, checkout this jsfiddle wich uses the twitter boostrap popover.
Hope it helps.