I want to show font-awesome icons in my nativescript application but its not showing everywhere.
<ScrollView row="0" orientation="vertical" ios.pagingEnabled="true">
<StackLayout #container verticalAlignment="center">
<Image src="res://logo_icon_white" stretch="none" horizontalAlignment="center"></Image>
<label [text]="'WELCOME' | translate" class="welcome-text" horizontalAlignment="center"></label>
<label text=" " class="font-awesome" horizontalAlignment="center"></label> <--- WORKS!
<Button [text]="'LOGIN_WITH_PASWWORD' | translate" (tap)="tapped()"></Button>
<Button>
<FormattedString>
<Span text=" " class="font-awesome"></Span> <--- DOESN'T WORK!
<Span text=" " style="font-family: FontAwesome;"></Span> <--- DOESN'T WORK!
<Span [text]="'PROCEED_WITH_FACEBOOK' | translate" ></Span>
</FormattedString>
</Button>
<Button [text]="'CREATE_AN_ACCOUNT' | translate" class="account-button"></Button>
</StackLayout>
</ScrollView>
When i use it in a Label it shows the icon but when i want to display it in a FormattedString/Button (because i use translation) it doesn't show the icon.
I hope someone can help?
The Span element currently does not support styling through CSS. You should use the span's properties to set the styling. In your case the following should work:
<Span text="" fontFamily="FontAwesome"></Span>
Related
I have "RowsLenght" and i need to see the tooltip when I hover on it but showing the result of {{row.boxes.length}} in addtion to "No." txt.
I mean forexample I want to see "5 No." in the tooltip. Would you please help?
<div> {{'RowsLenght' | translate}}
<span > ({{row.boxes.length}} )</span>
</div>
One option would be to simply use the html title attribute on your div:
<div title="No. {{ row.boxes.length }}">
{{'RowsLenght' | translate}}
</div>
I am new to the material UI. here, I have two tabs and that tabs has some content.
Now, I am trying to add the text overflow elipses to this . But the text is in span over there,
<Tab
key={`${tab}_${index}`}
classes={{
root: css.tabRoot,
selected: css.tabSelected,
wrapper: css.tabIconWrapper,
labelIcon: css.tabLabelIcon
}}
disableRipple
label={tab.label}
value={tab.value}
icon={
tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
}
/>
Now, Here the label is having a bit more length . So, I am just trying to limit it as max-width : 100px;
But in the material UI it is getting a bit complicated to override .
SO, what I tried is ,
label={<Typography className={selectedTab ? '' : ''}>{tab.label}</Typography>}
But here
I am not able to get which tab has been selected , I mean I want to add that class if the tab is selected.
can any one help me with this ? any solution like with or without typography works for me.
thanks.
div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;">
<div class="MuiTabs-flexContainer">
<button class="MuiButtonBase-root MuiTab-root VIP_tabRoot MuiTab-textColorInherit Mui-selected VIP_tabSelected" tabindex="0" type="button" role="tab" aria-selected="true">
<span class="MuiTab-wrapper VIP_tabIconWrapper">Test004</span>
</button>
</div>
</div>
trying to follow Xamarin tutorial for a label view at :
Label Tutorial
when applying italic font attribute in a span tag , while setting the size of the label text to any value in the label tag. the text size did not get applied to the text in the span with italic attribute.
<StackLayout Margin="20,35,20,25">
<Label FontSize="50" TextColor="Blue">
<Label.FormattedText>
<FormattedString>
<Span Text="underlined text" TextDecorations="Underline" />
<Span Text=", emphasized" FontAttributes="Italic" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
output from android emulator
I also found that it when the span with Italic attribute the FontSize of Label can not work. However , I found a WorkAround for this , you can set FontSize of this Span to solve it .
Have a look at follow code:
<StackLayout Margin="20,35,20,25">
<Label FontSize="50" TextColor="Blue">
<Label.FormattedText>
<FormattedString>
<Span Text="underlined text" TextDecorations="Underline" />
<Span Text=", emphasized" FontSize="50" FontAttributes="Italic" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
The effect :
I think next version of Xamarin Forms will fix it as soon as possible .
in my html I got Bootstrap glyphicons with the following code:
<span class="glyphicon glyphicon-copy" style="cursor:pointer;font-size:20px;">
</span>
is it possible to show some text on hover on it as it is done with img tag. Tried to add alt attribute but it did not work. Maybe there are some polifills for this (tooltips) or smth like that? Bootstrap-3 is used.
Thank you.
If you want to add tooltip use:
HTML
<span
class="glyphicon glyphicon-copy"
data-toggle="tooltip"
style="cursor:pointer;font-size:20px;"
title="myText"
></span>
JS
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
or else you can just add data-title attribute to your <span> element
<span
class="glyphicon glyphicon-copy"
data-toggle="tooltip"
data-title="myText"
style="cursor:pointer;font-size:20px;"
></span>
Try this:
<span class="glyphicon glyphicon-copy" title="yourtext" style="cursor:pointer;font-size:20px;">
Add attribute title with text thant you want to show on hover .
I am creating a native script application and I want my tab View to appear on the top for iOS. I know sticking the tabView on the top violates the human interface guideline, but I need to do it this way.
With the new Nativescript 6 there is a new component called "Tabs" that allows you to do this:
Here is how you would do it with Nativescript angular:
<Tabs selectedIndex="1" class="fas font-size">
<!-- Using icon fonts for each TabStripItem -->
<TabStrip>
<TabStripItem title="Home"></TabStripItem>
<TabStripItem title="Account"></TabStripItem>
<TabStripItem title="Search"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
</Tabs>
Here is a playground project I created.
Hereis a playground example with Nativescript typescript using both top and low tabs
Here you can find the documentation
important note: this widget is currently on beta
You can achieve that. Here's how i have done the similar thing -
<StackLayout row="0" col="0">
<StackLayout *ngIf="visibility1" id="mainView" visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
<FirstView></FirstView>
</StackLayout>
<StackLayout *ngIf="visibility2" id="mainView" visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
<SecondView></SecondView>
</StackLayout>
<StackLayout *ngIf="visibility3" id="mainView" visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
<ThirdView></ThirdView>
</StackLayout>
</StackLayout>
and change the visibility of each component based on the click events.
You can implement all manners of TabView behaviours/layouts using the SegmentedBar. See this answer for details