Is there a recommended way to adjust the height of the Angular Material toolbar?
Here is an example of basic usage of the Angular Material toolbar as described here https://material.angular.io/components/toolbar/overview
<mat-toolbar color="primary">
<a class="title" [routerLink]="['']">Azure B2C App1</a>
</mat-toolbar>
This creates a toolbar that is nearly an inch high, which is no use for anything. It's far too big.
The Material documentation page that describes customizing components states that I shouldn't use CSS to override its height, as that might break it. https://material.angular.io/guide/customizing-component-styles
So how am I supposed to resize it to something usable?
I notice the Angular Material documentation doesn't itself use a mat-toolbar for its page header, it uses a hand-rolled custom app-nav component instead. What should I infer from that? That after having installed one of the most heavyweight themeable component libraries around that I'm expected to handroll a themeable and responsive custom toolbar just to get a usable page header?
No, there is no recommended way to adjust the toolbar size.
https://github.com/angular/components/issues/4597
According to this Github issue requests for Angular Material to properly support dense toolbars on desktop in line with Material Design go back to at least 2017, but there is no sign of anything coming soon.
Related
I am working in xamarin forms. I have some UX given by the designer. Now I want to create exactly same UI(same height of control, width of control, colors etc) in xamarin forms. My xaml view should be exactly xame like given UX.
Is there any tool that can guide me to create same UI like UX. I mean through that tool I can get the height, widths and colors of controls of screens and then can use it.
it's not good idea to use exact length of UI since the app will run on different screen and different devices. Xamarin forms uses native views for each platform which will also change the look of basic views.
What you need to do is to use grids or other layouts for sizing and control the height and the width of your views.
I also suggested that you always use scroll view incase if a mobile has a small screen size.
Finally, regarding the actual UI components and UX interactions, there are many ready components like calendars, custom checkboxes, sliders,... . If you can't find a component that cover what you need, you have 2 options:
combine different components and try to customize them with absolute
and Relative layouts.
Create the components yourself which will require some knowledge
on each platform to create the view component by drawing it and do
all the handling for each platform.
Regarding the UX, there are many libraries for animations and most components allow customizability.
Your question was very general so this answer is general. Please try to be more specific next time.
I have question - what is rightn and correct way to implement this design in Xamarin (Xamarin forms)
Design principle
I see here 2 ways for implementations:
First way - is TabbedPage. And right Custom Render (For IOS - move tabs to top, and for android - Icons)
Second way - is CarouselView - but not sure is good.
Additional requirements is - Animation switch between content of "tabs"
Switch by finger slide is NICE TO HAVE option.
There is no right and wrong way. There is only what meets your requirements and what is easiest to implement and maintain.
Your linked picture clearly shows a TabbedPage. However your additional requirements would make this an issue. iOS shows the tabs at the bottom. I'm not sure if it is easy to move them to the top. It would require a custom renderer if it is even possible. I think iOS allows you to swipe between tabbed pages but I'm not sure that Android does.
It would probably be easier to implement a CarouselView with buttons above. That way you will be able to place your buttons where you like, allow you to swipe between them and have animation. This meets all your requirements.
I've been struggling with app dialog and toolbar appearances in the social boo theme for some time. I recently discovered that my struggles are less with my code and more with the theme. In the GUI Builder switching the Native Themes from IOS6, IOS7, and Android (Gingerbread I believe) all create very different dialogs ranging from matching to illegible to ok. Also I found this demo:
https://www.codenameone.com/demos-SocialBoo.html
and ran it on my Android (S6) phone. The below image illustrates the problems:
Social Boo visualizations
Note the Dialog's appearances as they change in the first 3 images. Please note in the 3rd Android picture I'm clicking on the Cancel button to show how differently it paints with the pointer pressed. The 4th image is again from my phone, note the toolbar button on the top right with a square image placed oddly over a rectangular button. Ah finally, all the problems I'm seeing in my app happening elsewhere!
Hopefully my title question now makes more sense. Is the social boo theme being updated with CodenameOne releases or is it dead? Should I abandon using it as it'll have quite varied appearances on devices especially iOS? I'd love to have the theme maintain the IOS6 appearance on all devices - how can I achieve that goal? Thank you in advance for your help!
It's a bit out of date. Most developers just cut a PSD design from scratch which works best when based on a native theme.
You can easily fix these things if you want to work with that theme though. When we implement a theme we don't aim to implement every feature that might be needed as those are hard to predict and will increase the theme size. The original theme didn't include design for dialogs so some behaviors leaked out.
You can use theme constants and UIID's like the theme constant dlgButtonCommandUIID to determine the UIID of the buttons within the dialog.
I'm making a single page mobile app with Backbone.Marionette and would like to implement page slide transitions. I know how to achieve this via adding and removing the proper css classes for the animation but I'm having trouble with Marionette regions and managing when these classes are being added. I would like the current view in the region to slide out and the next view slide in. how can I accomplish this with regions or layouts in marionette? P.S i'm a newbie with marionette.
You'll need to write a custom Region implementation to facilitate the transition. There's an open ticket on Marionette that has the core code for making this work: https://github.com/marionettejs/backbone.marionette/issues/320#issuecomment-9746319
But you'll need to adjust this code for your specific needs. Be sure to read the comments and discussion around it. I've used this core code for similar needs many times, but haven't found the optimal way of integrating it in to marionette, yet.
Here is a custom region demonstrating view transitions: http://codepen.io/somethingkindawierd/pen/cpiEw
I like the new New Project templates included in the ASP.NET MVC3 tools update, as presented at MIX 11 recently.
A basic site can be seen here:
http://mix11.haacked.com/
When I view the above site in Chrome, the HTML5 styles are visible - rounded corners and text shadow.
When I view the site in IE8 those styles aren't visible.
My question is, isn't Modernizr supposed to make these styles work in older browsers?
-Matt
Modernizer won't actually add missing functionality to a browser. Basically, you use it as a guide to tell you whether a browser supports a certain feature. In your case, you could have a CSS file which will compensate for browsers that don't support border radius:
.no-borderradius div {
/* properties for browsers that don't support border-radius */
}
The above is a total made-up example, I'm not sure 100% if it's correct, but check the documentation here.
So for IE8, you would need to display rounded corners using a different technique.