I have used label class for every label in my project. If any other font color like
class="label font-clr-green"
is applied then it not taking green color. So I decided to overwrite the label class in app.css but it's also a failure. I need to know whether label class can be overridden or not.
I checked your Playground Sample and what I could deduce from it is, that the <Label> used in the problem part is not taking the green color as it should be. Well, that's because you are using this <Label> element inside a <StackLayout> having class input-field. It seems like, CSS for .input-field Label is pre-defined.
The solution to your problem, would be to rename this class input-field to something else. That's all it needed. Below is the updated XML part. You can also check my attached Playground demo with the fix.
<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Home" class="action-bar">
</ActionBar>
<ScrollView>
<StackLayout class="form">
<!--this was working fine -->
<Label textWrap="true" text="Play with NativeScript!" class="label font-weight-bold m-b-5 fcg" />
<Label textWrap="true" text="Play with NativeScript!" class="label font-weight-bold m-b-5"
color="green" />
<!-- the problem was here, solution was to rename input-field to input-field-1 -->
<StackLayout class="input-field-1">
<StackLayout class="okay">
<Label text="Active Flag" class="label font-weight-bold m-b-5 fcg" />
</StackLayout>
<Switch checked="true" class="switch fcg"
horizontalAlignment='left' margin="0" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
Working Playground Demo.
Related
I make a customize title in the titleview,
and I want to show different content(with other pages) by pressing the tabs I customize.(like pic shows below)
I am wondering how to change the content with different pages...
<ContentPage>
<NavigationPage.TitleView>
<Button x:Name="energy" />
<Button x:Name="history" />
...
</NavigationPage.TitleView>
<ContentPage.Content>
//when I press energy, and content shows the Energy.xaml
//when I press history, and content shows the History.xaml
</ContentPage.Content>
</ContentPage>
You can use TabView from XamarinCommunityToolkit package, here is a sample page you can find it in their sample repo.
<ContentPage xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
...
>
<ContentPage.Content>
<Grid>
<xct:TabView
TabStripBackgroundColor="Blue"
TabStripHeight="40"
TabIndicatorColor="Yellow"
TabContentBackgroundColor="Yellow">
<xct:TabViewItem
Text="Tab 1"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<--Here you define the content of Tab1 -->
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
TextColor="White"
TextColorSelected="Yellow"
FontSize="12">
<--Here you define the content of Tab2 : it can be the ContentView defined in your Energy.xaml -->
</xct:TabViewItem>
</xct:TabView>
</Grid>
<ContentPage.Content>
</ContentPage>
There is plenty of stuff you can customize take a look at the official documentation.
I am trying to figure out a way how to create a picker with custom items in XAML. I am not sure if it is possible to achieve this task only using xaml. The picker would have to contain items that consist of a label and a switch. The code below illustrates the end goal:
<Picker Title="Picker title here">
<Picker.ItemsSource>
<StackLayout Orientation="Horizontal">
<Label Text="Hello Xamarin.Forms!" />
<Switch />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Hello Xamarin.Forms2!" />
<Switch />
</StackLayout>
</Picker.ItemsSource>
</Picker>
It's not possible. I think you can create a Popup with a ListView, where you have a ViewCell with all controls you need
I have created the side menu using the RadSideDrawer directive in nativescript and when I try to load child routes in it, except the default load, all subsequent loads show me a blank screen.
This is how I am loading the content.
<ScrollView tkMainContent class="menu-content">
<router-outlet></router-outlet>
</ScrollView>
Navigation Logic:
<StackLayout>
<StackLayout orientation="horizontal" [nsRouterLink]="['./']" class="menu-item"
[nsRouterLinkActiveOptions]="{exact: true}" nsRouterLinkActive="active" horizontalAlignment="left">
<Label text="{{inspectionsIcon}}" class="icon" ></Label>
<Label text="Reports"></Label>
</StackLayout>
<StackLayout orientation="horizontal" [nsRouterLink]="['properties']" class="menu-item" nsRouterLinkActive="active" horizontalAlignment="left">
<Label text="{{propertiesIcon}}" class="icon" ></Label>
<Label text="Properties" ></Label>
</StackLayout>
<StackLayout orientation="horizontal" [nsRouterLink]="['settings']" class="menu-item" nsRouterLinkActive="active" horizontalAlignment="left">
<Label text="{{settingsIcon}}" class="icon" ></Label>
<Label text="Settings"></Label>
</StackLayout>
</StackLayout>
So when the parent route loads I see the content of the default child. When I switch to any other child routes I see a blank screen. Any help in fixing this would be appreciated.
I know that the navigation logic is fine cause it loads fine when i just comment out the RadSideDrawer and use it as a list view
I had the same issue and its due to a circular reference when the RadSideDrawer is in the same component template as the default home router path, in your case [nsRouterLink]="['./']
In my case, when I added console.log to the constructor of my HomeComponent which contained my RadSideDrawer, i saw the constructor fired twice as well as a label which I had inside:
<ScrollView tkMainContent class="menu-content">
Solution (suggested to me by Telerik) is to have the default route point to another "landing page" like [nsRouterLink]="['welcomPage'] and thereby removing the circular reference.
I have a <template> tag in my ZUL file, and I want to use this template when some condition accured (for example, when some LABEL's value change to some text).
Please look at below code... As you can see, "templateStatus" is my label's name, but it did not work.
How can I fix this issue?
<template name="allTaskTemplate" var="allTask" if="templateStatus.value == 'allTask'">
<row>
<label value="" />
<label value="#load(allTask.documentDTO.docTypeDTO.title)"/>
<label value="#load(allTask.documentDTO.docNumber)"/>
<label value="#load(allTask.documentDTO.docDateTime)"/>
<label value="#load(allTask.assignerID)"/>
<label value="#load(allTask.assigneeID)"/>
<label value="#load(allTask.assignDateTime)"/>
<label value="#load(allTask.assignDateTime)"/>
<label value="#load(allTask.assignDateTime)"/>
<label value="#load(allTask.assignDateTime)"/>
<label value="#load(allTask.documentDTO.docTypeStateDTO.stateActionDTO.actionDTO.title)"/>
<label value="#load(allTask.catalogDTO.catalogTypeDTO.title)"/>
</row>
</template>
</grid>
Using an if statement:
<zk if="${vm.type=='foo'}">
<!-- Child components -->
</zk>
<zk if="${vm.type=='check'}">
<!-- Child components -->
</zk>
<zk if="${vm.type=='something'}">
<!-- Child components -->
</zk>
<zk if="${vm.type=='value'}">
<!-- Child components -->
</zk>
See the below example of ZK. You can use conditional templates...
<grid model="#bind(vm.itemList) #template(vm.type eq 'foo'?'template1':'template2')">
<template name="template1">
<!-- child components -->
</template>
<template name="template2">
<!-- child components -->
</template>
</grid>
For more information, you can see the official page of ZK, Collection and Selection.
Se the below code for...
<menubar id="mbar" children="#bind(vm.menuList) #template(empty each.children?'menuitem':'menu')">
<template name="menu" var="menu">
<menu label="#bind(menu.name)">
<menupopup children="#bind(menu.children) #template(empty each.children?'menuitem':'menu')"/>
</menu>
</template>
<template name="menuitem" var="item">
<menuitem label="#bind(item.name)" onClick="#command('menuClicked',node=item)" />
</template>
</menubar>
See the above. Using more than two templates you can do something like this. I don't know your requirement, but you can use the above logic and implement it in your code.
Or you can see the ZK Forum for the same, Zk forum.
I have a page with two different View Models:
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
And the include is:
<window>
<label id="sid" value="#load(pid)" />
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
The problem is that once I define the second viewModel, all the external references are inaccessible: I have a value for the first label, but I have no values for the listbox or the second label. Is there a way to do that? I tried with no success to do this:
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')" list="#ref(p.someList)">
<listbox model="#id('vars') #load(list)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
I could merge the second View Model in the first one, but that wouldn't be very convenient! I am also open to other solutions which allow me to have a modular approach.
My version of ZK is 6.0.1
The reason you are unable to access the external components is your composer i.e BindComposer you have same composer for the Main zul as well as for the Included zul. You need to access the Included Listbox from external ZUL.
So remove the Composer of Include ZUL, give an ID to window you have two Space Owners access the inner Listbox
<?page title="My page" contentType="text/html;charset=UTF-8"?>
<div apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.mycompany.FirstViewModel')">
<!-- A lot of unimportant stuff -->
<tabbox>
<tabs>
<tab label="Tab1" ></tab>
<!-- Other unimportant tabs -->
</tabs>
<tabpanels>
<tabpanel>
<include id="include" src="inc/other.zul" p="#ref(vm.selected)" pid="#ref(vm.selected.id)" ></include>
</tabpanel>
</tabpanels>
</tabbox>
</div>
<window id="win">
<label id="sid" value="#load(pid)" />
<div
viewModel="#id('vms') #init('com.mycompany.SecondViewModel')">
<listbox id="listbox2" model="#id('vars') #load(p.someList)"
selectedItem="#bind(vms.selected)"
emptyMessage="No data in list">
<!-- Template and stuff -->
</listbox>
<label id="sid1" value="#load(pid)" />
</div>
</window>
Now while accessing in your BindComposer declare variable as public :
Listbox include$win$listbox2;
in your doAfterCompose() add this line
Sysout("You can access your inner Listbox and it is:"+include$win$listbox2);
Now you see you will not get your Listbox NULL!!
Link : http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space
It is (was) actually a bug in ZK, which has been fixed for a future version.