I am using angularjs material tabs https://material.angularjs.org/latest/demo/tabs .
Firstly, how to set the color for the left and right arrows?
<md-toolbar >
<div class="md-toolbar-tools tb">
<md-tabs class="tab">
<md-tab ng-repeat = "item in toDoList track by $index" label="{{item.name}}" >
</md-tab>
</md-tabs>
</div>
</md-toolbar>
For example, set the color of the arrows from white to other colors(like red) in the image and fiddle below
jsfiddle 1
Next, how to make the arrows always visible? In the image and jsfiddle below, if there is no tab overflow, the left and right arrows will not appear.
jsfiddle 2
Lastly, is there any formal/specific name for the left and right arrows, like pagination arrow? Because I can't find much related topic about the md-tabs arrow, maybe I used the incorrect keyword for the arrow.
For arrows color you can use this rule :
md-toolbar:not(.md-menu-toolbar) md-icon{
fill:red;
}
jsfiddle 1
But to make them always visible, I don't think it's possible unless you modify the Angular Material source code
Related
I use XArrow component to draw lines between rectangles. I added some tooltip on the line and it works fine. However, I need to get my mouse right over the line in order to make the tooltip visible which is understandable but I need to make the tooltip visible when the mouse is near the line, let's say if cursor is 10 pixels on the left + right side of the arrow.
This is what my design looks like right now, working tooltip and inspect elements of the curved arrow. Now I found some trick that enables me to show a tooltip when the cursor is near the arrow. This works for straight lines but it doesn't work for curved line. For the first picture, the code I use is
<span key={'j.id'}>
<div key={`i.id-j.id`} data-for={`j.id-i.id`} data-tip>
<Xarrow
start={`i.id`}
end={`j.id`}
key={`i.id-j.id`}
/>
</div>
<ReactTooltip id={`j.id-i.id`}>{'tooltiptext'}</ReactTooltip>
</span>
Now if I add SVGCanvasStyle prop with pointerEvents: 'all'
<span key={'j.id'}>
<div key={`i.id-j.id`} data-for={`j.id-i.id`} data-tip>
<Xarrow
start={`i.id`}
end={`j.id`}
key={`i.id-j.id`}
SVGcanvasStyle={{ pointerEvents: 'all' }}
/>
</div>
<ReactTooltip id={`j.id-i.id`}>{'tooltiptext'}</ReactTooltip>
</span>
it looks like
or the tooltip is shown over the path element (Picture1, 3rd row). Is there a way to show the tooltip on ~10px+ left and right of the arrow (an svg element, non linear in the curved case)? If possible, how can I achieve it?
I am trying to show only the active tab in md-tabs on mobile view. I want the tab to be centered, and when I user swipes left or right, the tab title changes with the next or previous (somehow should be 100% width). Is this possible?
I have my tabs set up like this:
<md-toolbar>
<md-tabs md-swipe-content="true" md-selected="selectedDayIndex">
<md-tab ng-repeat="day in days | orderBy:predicate:reversed" md-on-select="openDay(day)"><p class="currentDay">{{day.day}}</p></md-tab>
</md-tabs>
</md-toolbar>
<md-content layout-padding>
<ng-switch on="selectedDay" class="tabpanel-container">
<div>
<p>{{selectedDayInfo.day}}</p>
</div>
</ng-switch>
</md-content>
Please see the following Plunkr: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
I would play around with 'hide' attributes - https://material.angularjs.org/latest/layout/options.
Also it would be fairly easy (without looking at your code) to just create logic that would detect screen size and from there just to create different DOM elements based on that (ng-show etc.).
I am using ionic to create a mobile app and on one of the pages, I have my header bar set to transparent and an image is the background.
I have a default back button which is white colored. However, if the image behind it is something like this https://newevolutiondesigns.com/images/freebies/white-wallpaper-8.jpg then the button won't show.
Here is the mark up in question:
<ion-header-bar align-title="left" class="bar-clear">
<div class="buttons">
<button class="button button-icon ion-arrow-left-c" ng-click="goBack()"></button>
</div>
</ion-header-bar>
<ion-content scroll="true" class="no-header my-view">
<ion-slide-box class="item-slide-box">
<ion-slide ng-repeat="post in vm.post.images" ng-cloak>
<img class="img-ng" ng-src="{{image}}">
</ion-slide>
</ion-slide-box>
For a start, you could try getting the dominant color of the background image like this.
Next, based on the color, if the color lies beyond a certain range (defined by you), you can set an appropriate class to the button. The class would specify if the background is white or black. This isn't specifically a LESS solution, but you can modify your LESS theme based on this. Like calling less.modifyVars() and reassigning the variables.
I use CSS speech bubble (http://nicolasgallagher.com/pure-css-speech-bubbles/demo/)
in order to implement a chat.
This is an example of screen I ended up with:
The blue bubble is a message from me and the red is from a counterpart.
The piece of code I wrote is:
<p class="inset list" ng-repeat="message in messages | orderBy:'id'"
ng:class="{ true:'triangle-right right', false:'triangle-right left'}
[message.sender == {{ user }} ]">
{[{ message.body}]}
</p>
while {[{ }]} is a symbol of angular parameter.
I would like that the width of the bubble will be fit to the length of the text inside.
Please pay attention that the message inside one bubble may include several rows so the width needs to fit to the longest row.
In addition, the blue bubbles need to be alignment to the right.
I tried to insert function for ng-style as function of message.body but I didn't succeed to make the width changed as I wanted...
It would be very kind if one of you can write me detailed and implicit instructions...
This works for me:
http://jsfiddle.net/K67NN/1/
this is my test html:
<p class="triangle-right left">test1</p>
<p class="triangle-right right">test2</p>
I used the stock css that you linked to, and I just added these to the classes left and right
.left{float:left; clear:both}
.right {float:right; clear:both}
This works because floated elements have implicit width by default and they are aligned to the left or right of their enclosing element. The clear:both just keeps them from piling up on one line.
I have to create a hovering effect wherein when a tab is hovered the entire background of the tab should be White. But as can be seen in below SS, , hovering affect is getting applied only to the text part.
I have also attached the CSS from Chrome Web developer.
HTML code generating that tab is ,
<li>
<a class="last_menu" href="#"></a>
</li>
I have tried adjusting with padding element. But, text is also moving with it. I want text to be at center and only hovering to be expanded to occupy whole tab space.
Install Web Developer Toolbar Go to CSS > Display Style Information or <ALT+SHIFT+Y>(it's the wand in the toolbar). Hover your mouse over the element in question to get a detailed picture of how it's being rendered. Study this. Make it your friend.
Try applying a class to the list item itself, then under the hover pseudoselector for that specify a white background.