In Fluent UI's sample I see <List> supports dynamically rendering grid items.
https://developer.microsoft.com/en-us/fluentui#/controls/web/list
In our app we have grids in same width but different height and want them stack vertically in multiple columns, basically, masonry layout.
Exact the same layout in CSS-only masonry layout but preferably using Fluent UI.
Does <List> (or other Fluent UI component) support masonry?
Thanks
For build layout by standard Fluent UI equipment - use combination of Stack and StackItem components.
Related
I'm developing an Xamarin Android Mvx5-beta application. When running on a small-screen device, I want to show a drawer navigation using the Toolbar and the hamburger-icon. On larger devices, e.g. tablets, I want a different layout conaining three columns. No drawer navigation but a static panel with navigation options and two other panels for content.
I started with the examples XPlatformMenus and Fragments to get a drawer navigation layout combined with the use of activities (with fragments) in different layouts qualifiers, like:
Question:
Using this approach, Android automaticly looks for an activity with the same name (e.g. main_activity.axml) in the appropriate layout-qualifier folders. But on the larger screens I don't need a drawer layout and I do need an extra column. The Mvx-viewmodel does not yet know what layout to render, so it just calls:
ShowViewModel<HomeViewModel>();
ShowViewModel<MenuViewModel>();
These ViewModels, for example MenuViewModel, are registered for fragments that require a navigation_frame, as shown in here:
[MvxFragment(typeof(MainViewModel), Resource.Id.navigation_frame)]
[Register("mydemoapp.droid.views.fragments.MenuFragment")]
public class MenuFragment : MvxFragment<MenuViewModel>, NavigationView.IOnNavigationItemSelectedListener
{
<..>
}
So, rendering this same Activity in layout-sw600dp requires a navigation_frame. Which I don't want on these larger displays.
What would be the preferred design choise in this situation? I can think of two:
Show/hide elements in the Activity programmatically by querying the screen info
Don't make use of layout qualifiers, but design complete seperate Activities for larger screens and based on screen size let MVX Show ViewModel-A or ViewModel-B.
Any advice would be appreciated, many thanks in advance.
I think it depends how different your layout need to be between large screen and small screen form factors.
Few UI differences
In addition to using different layouts, you can define a bool property in your XML values resources that is different between standard and sw-600dp
values
<bool name="is_large_screen">false</bool>
values-sw600dp
<bool name="is_large_screen">true</bool>
You can then read this value in your Android views and prevent methods like ShowViewModel<MenuViewModel>(); firing when on large screens by altering the method calls from the view.
Many differences/Structural differences
If they share the same business logic but have very different UI requirements and you want to keep large screen code separate. Then I would suggest sharing the ViewModels but creating two separate Activites and layouts to handle the UI presentation. Using this method requires a bit more setup as you have to override some default MvvmCross behaviors as by default you can not register multiple Activities/Fragments to the same ViewModel. Overriding the MvxViewModelViewTypeFinder view lookup FindTypeOrNull you can intercept the lookup and filter types base on naming conventions. For example all large screen views end with "Tablet". Using the is_large_screen bool you can flag which views to register.
I wanted to know if I can control or customise the web part repeater with carousel properties using a JavaScript/jQuery ? such as speed or easing or the way the images aligned
If you are using a repeater web part for a carousel in Kentico and you want to be able to set the values for the carousel properties in the repeater configuration you can clone the repeater web part, add the carousel properties into the cloned repeater web part code, and into the Fields in the web part properties. Then you would pass those properties to the front end as javascript variables using RegisterClientScriptBlock
You can modify the speed in the initalization script property, just add something like speed: 500
You can read the documentation to see what all you can do with that carousel.
I have done this multiple times. This is what I would suggest you
Create Page type for your slides Bind it with a repeater (Not basic
repeater)
For markup use Slick slider. It's one of the best library
to create slider which are responsive too
You can do anything possible using this slider. I have done all sort of crazy things with slick slider. Let me know if you need any more help on this.
Slick Slider
The documentation and samples for the ScrollViewComponent just explain how to use the component with a data-bound template.
Isn't it intended to be used like a tabcontrol or wizard?
I.e.
<kendo-scrollview ...>
<kendo-scrollpage>
<my-component></my-component>
</kendo-scrollpage>
<kendo-scrollpage>
<p>And now for something completey different ...</p>
</kendo-scrollpage>
</kendo-scrollview>
The short answer is, no, this scenario is out of the scope of the ScrollView component. It is built around the idea of databound templates. Conceptually similar to the mobile Kendo ScrollView widget.
Is there a solution to put same built in pagination control on top and bottom of Angular UI Grid 3.x?
I know that solution is build own control like demonstrated on example
I would like to present XP application with Metro style UI.
I think of three unique styles:
1) App launcher (aka Navigator from LN client) showing boxed "links", what is common image of Metro: http://en.wikipedia.org/wiki/File:Windows_8_Consumer_Preview_Start_Screen.png.
2) List (aka View) - scrollable bars representing documents in view: http://www.brianbondy.com/static/img/blogpost_135/screenshot-filepicker.jpg
http://www.purplesquirrels.com.au/?p=940
3) Form - sorry, images of metro theme are not very common for this kind of usecase.
Options:
Wait for Dojo framework to include Metro styled mobile components (no signs of this plan at Dojo site).
Wait for IBM to include Metro on Extlib mobile themes (probably not going to happen).
Make own theme definition and/or controls (lot of work...)
Forget it, it is just waste of time.
Did any of you think about making metro.theme for XPages?
If I where you I would try to create it yourself. Its not that difficult. Its actualy a bunch of boxes ;) which is perfectly possible with html/css ( and thus with xpages ). The only thing you need to take or of is what to do after a user clicked on a box. I dont see the problem in creating it yourself...