I am working with Antd Form Item and I have to put an icon with tooltip like this:
And here is my code:
<Item label={'Password'} name={'password'} className={'password'} rules={[{ required: true, message: t('Feld ist erforderlich') }]}>
<Password size="large" />
<PasswordStrength password={password} />
</Item>
Any idea? Please help! Thank you!
Solution 1: You can custom label in Form item, follow my code
<Item
label={
<div>
Label a{" "}
<Tooltip title="Tooltip with customize">
<InfoCircleOutlined />
</Tooltip>
</div>
}
>
<Input placeholder="input placeholder" />
</Item>
Solution 2: you can upgrade new version Antd, and use property tooltip
I hope it useful for you.
I got same problem and work around by below solution:
I don't set label attribute for Form.Item, then add a Row on top of Form Item including label and tooltip icon
<Row justify="space-between">
<Col>
<span>Mật Khẩu</span>
</Col>
<Col>
<Tooltip title='tooltip text'>
<ExclamationCircleOutlined />
</Tooltip>
</Col>
</Row>
<Form.Item>
<Input.Password />
</Form.Item>
Related
I am using Grommet to build a dashboard with <Grid>.
If using three columns, responsive behaviour is as expected when the window is made smaller:
But if using four columns there is no breakpoint at which the cards stack on top of each other:
The code is out-of-the box and so the expectation is for the built-in responsive behaviour to kick-in:
<Grommet full theme={grommet}>
<Page>
<PageContent border={{"side":"bottom"}}>
<Header align="center" direction="row" flex={false} justify="between" gap="medium">
<Anchor label="Title" icon={<Home />} />
<Menu icon={<User />} items={[{"label":"sign out"}]} />
</Header>
</PageContent>
<PageContent>
<PageHeader title="Dashboard" margin={{"vertical":"medium"}} />
<Grid columns="1/4" gap="medium">
<Meditation />
<Habits />
<Chart />
<Card><Text>Everything is ok!</Text></Card>
</Grid>
</PageContent>
</Page>
</Grommet>
(Each imported item is just a <Card pad="small">)
Not sure if this is some CSS issue that I can fix, but I am trying to use a <Stack /> from Material UI to construct a vertical list of checkboxs with labels.
I've attempted the following in the sandbox here (see demo.tsx): https://codesandbox.io/embed/basicstack-material-demo-forked-q8kb4q?fontsize=14&hidenavigation=1&theme=dark
With the code here
export default function BasicStack() {
return (
<Box sx={{ width: "100%" }}>
<Stack spacing={2}>
<FormControlLabel control={<Checkbox />} label="Test1" />
<FormControlLabel control={<Checkbox />} label="Test2" />
<FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>
</Box>
);
}
As you can see in the demo, ONLY the first child component isn't lined up correctly so a temporary solution is to add a sx={{marginLeft: 0.1}} only to the first <FormControlLabel /> which I think isn't a great practice. Does anyone know why this misalignment happens? And if there is a more elegant way of fixing it?
I think the problem is on the spacing=2, you can try to remove it, and then the indented will correct.
<Stack>
<FormControlLabel control={<Checkbox />} label="Test1" />
<FormControlLabel control={<Checkbox />} label="Test2" />
<FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>
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.
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.