how to add the image icon in the segmented bar in nativescript-angular. can you please help me with this
<SegmentedBar #tabs [selectedIndex]="selectSegment">
<SegmentedBarItem title="test1"></SegmentedBarItem>
<SegmentedBarItem title="test2"></SegmentedBarItem>
<SegmentedBarItem title="test3"></SegmentedBarItem>
<SegmentedBarItem title="test4"></SegmentedBarItem>
</SegmentedBar>
An easy way to add icons to your Nativescript Segmented Bar items is to use FontAwsome (or any other icon font for that matter).
1: Check out this (http://www.nativescriptsnacks.com/videos/2016/03/07/nativescript-and-font-awesome.html) short five minute video on how to install FontAwsome to your {N} app.
2: Once you install the icon font. Assign style="font-family: 'fontAwesome' " attribute to SegmentedBar xml/"html" tag;
3: Check out http://fontawesome.io/cheatsheet/ to figure out the unicode for the icon you want to use and paste that unicode to the title attribute of the relevant SegmentedBarItem tag. TIP: make sure the code is in the right format. Don't copy the square braces shown on the cheatsheet, just what the string that appears inside them.
THATS IT! Your code should now look something like this:
<SegmentedBar #tabs [selectedIndex]="selectSegment" style="font-family: 'FontAwesome'; color: #eee; background-color: #31394C;">
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
</SegmentedBar>
This image:
shows the end result of the above code on an android emulator.
the SegmentedBar does not have options to assign images for each SegmentedBarItem. This is a valid scenario for TabView. For SegmentedBar you can only set background-image for the whole Segmented bar which can be used to apply image pattern but is no applicable to apply different icons for the different SegmentedBarItems
please have a look at the below link
https://github.com/NativeScript/nativescript-angular/issues/790
For more flexible way you can create a custom SegmentedBar and adjust for your needs. Read more
here.
Related
I have this vuetify code:
<div class="mb-6">
<h1 class="text-h4">
{{title}}
</h1>
<p class="subtitle-1 font-weight-thin" v-if="subtitle">{{subtitle}}</p>
</div>
Which produces a title and subtitle that are not aligned vertically, as visible there:
The left-space between the title M is wider that the subtitle one.
Any idea why? I reckon this is the first time I have such an issue, hence I believe this is a Vuetify typography issue.
I tried playing with the letter-spacing CSS property without success: it changes the space between the letters but not in front.
I also tried playing with margin-block-start CSS property, but it doesn't change anything.
Thanks for the help
It's not a vuetify or letter-spacing issue. This comes from font you are using. Vuetify uses Google’s Roboto font by default.
There's a playground at Google fonts with Roboto font. You may notice that the problem you mentioned is present here as well. By example, there's some space in Regular 400 #64px:
Let's test your code using a different font. By example, I'll use CSS font-family: serif !important; that fallbacks to Times New Roman at Windows platforms:
Looks fine, no spacings.
So one solution to fix your problem is to change the font. I believe that there are fonts that are more suitable for websites than Times and that do not have such a problem.
According to Vuetify docs, you can change a font for the whole project with one line in src/sass/variables.scss file. Keep in mind that this cause project to build much longer:
$body-font-family: 'Work Sans', serif;
Possibly you don't want to change a font. So you can change the whole string's position this way:
.text-h4::first-letter {
margin-left: -0.04em;
}
In this case, the unselected lines will align a little, but there will be problems with selection:
Maybe this SO question will also help you. And there's a playground at CodePen where you can test some solutions.
I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
Hi i need an example of how to change the theme and highlight color of the new Dailymotion player i use ui-theme and ui-hightlight as the Dailymotion guide indicates (link) or I just use highlight like some examples said but nothing happens.
<iframe id="iframe-video" width="16" height="9" src="//www.dailymotion.com/embed/video/x3mfcoi?highlight=FF0000" allowfullscreen></iframe>
It looks like you're not using the right parameter in the example you gave, this is why it's not working. As defined in the documentation, the relevant params are:
- ui-highlight
- ui-theme
For example, the following embed has the highlight color set to #FF0000:
http://www.dailymotion.com/embed/video/x2m8jpp_dailymotion-spirit-movie_creation?ui-highlight=FF0000
Note that you can't set a light highlight and light theme (and similarly, a dark highlight and dark theme), otherwise the control buttons are not visible. You can read more about it in our section related to player customisation.
I currently have a right-aligned image in the main body of a WordPress post, which I have placed using the WYSIWYG editor. However, I would like to prevent this image from displaying on devices with a max-width of 320px.
I am using a responsive theme but do not wish to change the way that other images on the website behave. For this reason, is it possible to target that image specifically? If so, how would I do this?
Bonus: I originally wanted to change the alignment and margins of the image at mobile width but have been unable to figure out how to do this without changing the way that it behaves at bigger screensizes.
Have been unable to find a solution thus far.
Thanks!
you could use media queries on the editor go to the html editor an add an id to that particular image for example <img id="target" src="some/image.jpg" />
then you could paste this on your style.css file
#media only screen and (min-device-width : 320px) {
#target{ display: none; }
}
I am using dijit's FilteringSelect box and trying to create a custom rich text HTML label, as per the documentation on dojocampus. I want my label to have the name of the object aligned to the left and a count aligned to the right. The way I am doing this is setting my label like so:
label: "left3 <span style=\"float:right;margin-top:-18px;\">right3</span>"
The problem is that when I hit the drop down menu, the right floated text appears about 20px below its associated left text. You can see an example of this here: http://jsfiddle.net/j9c3n/ The first FilteringSelect box contains the "buggy" behavior, the second box is my current workaround (adding margin-top:-18px) to the label.
Is this the correct behavior for the FilteringSelect label? Am I doing something wrong with the HTML? I tried including a <br style="clear:all;"> but that didn't help. I also tried setting all margins and padding to zero, as well as including a wrapper div around both the left and right text. All I can think of is that maybe the problem is the line height?
I guess my question is, Is this a bug in dijit.FilteringSelect, or am I just wrong thinking that the labels should all be vertically aligned?
Try this:
label: "<span style=\"float:right;margin-top:-18px;\">right3</span>left3 "