how to change the size of the icon, i have downloaded the appropriate size but it's still big, i wanto tre icons in my tab,
her you have my code
<TabView androidTabsPosition="bottom" androidSelectedTabHighlightColor="#2f3e4e" selectedTabTextColor="#2f3e4e">
<StackLayout *tabItem="{ title: 'Lektioner' }">
<page-router-outlet name="Lessons"> </page-router-outlet>
</StackLayout>
<StackLayout *tabItem="{ title: 'Opgaver', iconSource: 'res://students' }">
<page-router-outlet name="Assignments"> </page-router-outlet>
</StackLayout>
<StackLayout *tabItem="{ title: 'Elevliste', iconSource: 'res://students' }">
<page-router-outlet name="Students"> </page-router-outlet>
</StackLayout>
Related
I tried to add two colors with full width in nativescript android. But it always takes extra padding. Below is my code-
<ActionBar class="p-l-0 m-l-0" backgroundColor="#007FA3">
<GridLayout rows="auto,auto" columns="*">
<StackLayout class="p-2" row="0" style="background-color: #F29F03;" horizontalAlignment="left">
<Label class="action-label p-2" width="200%" text=" Please wait" fontSize="12" color="white" horizontalAlignment="center" verticalAlignment="center"></Label>
</StackLayout>
<StackLayout orientation="horizontal" row="1">
<label textAlignment="center" text=" " class="fas" row="1" color="white"></label>
<Label text="PageTitle" fontSize="22" color="white" horizontalAlignment="center" verticalAlignment="center"></Label>
</StackLayout>
</GridLayout>
</ActionBar>
How to remove the extra margin before orange label?
If you're using a later version of Theme then you may need to increase the css specificity, such as:
.ns-root ActionBar.actionbar {
margin: 0;
padding: 0;
}
And in your xml file,
<ActionBar class="actionbar" backgroundColor="#007FA3">
...
I'm trying to put a button at the bottom of a StackLayout and it's not working.
I don't know what I'm doing wrong!
Here's my template:
<Page actionBarHidden="true">
<GridLayout rows="*, *, *, *" columns="*">
<StackLayout horizontalAlignment="center"
verticalAlignment="center">
<Label text="My Account" id="login-label"/>
</StackLayout>
<CardView row="1" class="cardStyle" margin="10"
elevation="40"
radius="4"
verticalAlignment="center"
horizontalAlignment="center"
rowSpan="2"
id="login-box">
<StackLayout id="form-container">
<TextField hint="Login"/>
<TextField hint="Password"/>
<Label text="Forgot password?" horizontalAlignment="right"/>
<Button text="Button" #tap="loginButton()" verticalAlignment="bottom"/>
</StackLayout>
</CardView>
</GridLayout>
</Page>
Thank you!
StackLayout do not support that by its design. It is used to just stack the child elements one after another in given orientation, you can't have mixed output - few child elements at top and few at bottom or center.
Use Grid / Dock layout in order to dock an element at bottom.
I'm trying to build an scrollable list by using a StackLayout with an ngFor (and a ScrollView, of course).
This is my code:
<StackLayout class="home-panel" verticalAlignment="top">
<StackLayout orientation="horizontal">
<!--Suggest Append SuggetAppend -->
<RadAutoCompleteTextView #autocmp [items]="items" suggestMode="Suggest" displayMode="Plain" width="80%">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
<Button text="Add" (tap)="onAdd()" width="20%"></Button>
</StackLayout>
<ScrollView>
<StackLayout *ngFor="let item of this.shopList">
<Label text="{{item}}" (tap)="itemSelected(item)" fontSize="36"></Label>
</StackLayout>
</ScrollView>
</StackLayout>
The problem arises with the ScrollView at the end of the main StackLayout, which apparently shows only the last element in the shoppingList. The functionality I want to have is a text box on top (with an 'add' button on the same line), and a scrollable list filling the rest of the screen.
You have to wrap your StackLayout with the *ngFor into another Layout container, so the ScrollView can calculate the height.
...
<ScrollView>
<StackLayout>
<StackLayout *ngFor="let item of this.shopList">
<Label text="{{item}}" fontSize="36"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
...
How can i dock my Tabview items to the left of the screen like in the image below?
This is how my layout looks like currently.
<TabView dock="left" tabsBackgroundColor="red" selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
<StackLayout tabsBackgroundColor="red" *tabItem="{ iconSource: 'res://ic_ham'}" >
</StackLayout>
<StackLayout *tabItem="{title: 'Home'}">
<ns-home></ns-home>
</StackLayout>
<StackLayout *tabItem="{title: 'Bookings'}">
<ns-booking></ns-booking>
</StackLayout>
</TabView>
Resulting layout
It may be a bit of overkill for your needs, but what I've found simplest for us was to change the tab buttons to be fully designable and customizable by disabling the current buttons and the add new tab buttons.
<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *">
<label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label>
<label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label>
<label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label>
<TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)">
<StackLayout class="tab" *tabItem="{title: 'Tab1'}">
<Label text="tab1 body"></Label>
</StackLayout>
<StackLayout class="tab" *tabItem="{title: 'Tab2'}">
<Label text="tab2 body"></Label>
</StackLayout>
<StackLayout class="tab" *tabItem="{title: 'Tab3'}">
<Label text="tab3 body"></Label>
</StackLayout>
</TabView>
</StackLayout>
And in code:
Add tap event handlers for when button selected and give it a custom selected class (for styling)
Hide the default tab buttons using the tabs loaded event:
onTabsLoaded(): void{
let tabViewElement = <TabView>this.tabView.nativeElement;
if (tabViewElement && tabViewElement.android) {
tabViewElement.android.removeViewAt(0);
} else {
tabViewElement.ios.tabBar.hidden = true;
}
};
and with a bit of css, our result:
Hope this helps, good luck!
After I try NativeScript tutorial "Grocery", I found out that its button quite hard to tap it's because tap area is too small, so I want to increase Image hight by update layout file to the following below. However, image not seem to be in the center (Image Below).
How can I achieve this in NativeScript ?
list.html
<ActionBar title="Groceries">
<ActionItem text="Share" (tap)="share()"
android.systemIcon="ic_menu_share_holo_dark"
ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
<GridLayout row="0" columns="*, auto" class="add-bar">
<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" col="0"></TextField>
<StackLayout class="delete-container" height="100%" (tap)="add()" col="1" >
<Image src="res://add" stretch="none" horizontalAlignment="center"></Image>
</StackLayout>
</GridLayout>
<ListView [items]="groceryList" row="1" class="small-spacing" [class.visible]="listLoaded">
<ng-template let-item="item">
<GridLayout columns="*, auto">
<Label col="0" [text]="item.name" class="medium-spacing"></Label>
<StackLayout col="1" class="delete-container" height="100%" (tap)="delete(item)">
<Image src="res://delete"></Image>
</StackLayout>
</GridLayout>
</ng-template>
</ListView>
<ActivityIndicator
[busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'"
row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
</GridLayout>
You should check out NS's FlexBox layout.
It is quite useful:
http://docs.nativescript.org/cookbook/ui/layouts/flexbox-layout