I am facing the problem that there seems to be no api for me to close system keyboard. In my code, the component render method looks like this:
<TouchableOpacity onPress={()=>{alert("1111")}}>
<Text>Alert</Text>
</TouchableOpacity>
<TextInput/>
So if I now press the TextInput, the system keyboard will show up as expected. But when I press the Text Alert above, I just want to close the system keyboard ( and alert something). But I tried in rn 0.23.1 with win7, the Text Alert pressed will not close the system keyboard. What should I do to solve this question?
If you add a ref to the TextInput you can call blur() on it in the onPress. Conversely, you can always toggle the keyboard by calling focus().
<TouchableOpacity onPress={()=>{
this.refs.Input.blur()
alert("1111")
}}>
<Text>Alert</Text>
</TouchableOpacity>
<TextInput ref="Input"/>
try this
import { Keyboard } from 'react-native;
<TouchableOpacity onPress={() => {Keyboard.dismiss()}}>
<Text>Alert</Text>
</TouchableOpacity>
<TextInput ref="Input"/>
Related
I wrote my first app using nodejs,reactjs and spring using this tutorial and all went fine except for the buttons that are not working as expected because when I click on them, the link is updated in the browser address but the page is not loaded until I press F5 to reload.
Is hard to explain without an image so I attached a print screen with some text.
So I can add customers, delete and edit... but after every click on a button, I must press F5 to actually load the destination page. I tried this in Chrome, Edge and Opera and in all browsers the behaviour is the same.
This seems to be very basic but I don't know what to search on google to fix it, I tried to search documentation about the button tag but in everything I read I can't even find the attributes listed in the tutorial.
The button syntax is "<Button size="sm" color="primary" tag={Link} to={"/clients/" + client.id}>Edit" and attributes like "tab" and "to" don't seem to be documented in the reactjs documentation.
I think you should use Link in react router
and also check you api if their syntax is correct
Why not use the useHistory hook with Button onClick. Seems like there is no to prop in reactstrap documentation. You need to convert your container component using the Button in to functional component though.
import { useHistory } from "react-router-dom";
import { Button } from 'reactstrap';
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push(`/clients/${client.id}`);
}
return (
<Button size="sm" color="primary" onClick={handleClick}>Edit</Button>
);
}
After more searching I found the answer here:
Link tag inside BrowserRouter changes only the URL, but doesn't render the component
Thank you.
I'm building an app with a v-app component at the root, using a v-navigation-drawer and I'd like to add a "Chat" page, where I'd also like to use v-navigation-drawer.
Problem is components don't display correctly. When I open the v-navigation-drawer of the app, it shifts the v-main of the chat page.
Opened app navigation
Closed app navigation, what I'd like regardless of whether the menu is collapsed or not
Here is my chat page's template:
<template>
<v-layout>
<v-navigation-drawer
permanent
color="deep-purple accent-6"
v-model="drawer"
:mini-variant.sync="mini"
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img
src="https://media-exp1.licdn.com/dms/image/C4D03AQHYJ44y1nW7Rw/profile-displayphoto-shrink_800_800/0/1634940206364?e=1645660800&v=beta&t=ni_NG94SNNVHDbzpVEtKwftayQzDy1bDtse2FavjDSU"
></v-img>
</v-list-item-avatar>
<v-list-item-title>Cosmic Darine</v-list-item-title>
<v-btn icon #click.stop="mini = !mini">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in menuItems" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-main>
<v-container>
<v-row>
I am a content
</v-row>
<v-row>
<write-bar />
</v-row>
</v-container>
</v-main>
</v-layout>
</template>
Does anyone have a solution for this problem?
I managed to find a solution. I added 'absolute' as a prop to v-navigation-drawer. The menu open above the content (I wanted that, so it's okay) and doesn't shift the content anymore. But if anyone would like to shift content when it opens only when needed, I guess you have to use the #media rule and margin with a negative value to shift back when the screen width is under a specific value.
I have an Angular Material application.
The application has a button to click. I want it to look nice so I make it <button mat-button>Hello Button</button>.
Now I want to make the button show up in the "accent" color of my theme so I change it to <button mat-button color="accent">Button</button>. Works great.
Now I want to make the button show up as a slightly darker version of the "accent" color so I change it to <button color="accent A600">Slightly Darker Button</button>. No, that's definitely not it.
I read around Stack Overflow a bit and try some things and find that I can create a CSS class and apply that class to my button, but there's not really a way to say "make this my theme's accent color but a bit darker." It's just straight up hardcoding a color value.
As far as I can tell, Angular Material has "palettes" that I can't access in any meaningful way.
My question: Is it really true that button colors in Angular Material can only be "primary" or "accent" or "warn" or bypass the palette system altogether? What do I have to do to access the various lighter and darker shades on the palettes?
Or more directly, what goes in the [color] attribute? <button mat-button [color]="what-goes-here?">Slightly Darker Button</button>?
I think the easiest thing to change button color is to make something like this:
Inside your HTML:
<button mat-raised-button color="something">Click on me</button>
color="something" will generate a class then you will be able to make this in CSS:
.mat-success{
color: yellow;
background: purple;
}
I try to have a function to display a box with calling dialog('Hello') for example.
I just want to replace the basic function alert by dialog jquery but I don't succeed.
Please help me
**Steps** :
Create a div with id : dialog. Also set it's class
Set the css property of the class display:none
Align it in center with width and height 25%
Create a function dialog(str) that accepts msg as a parameter
Use jquery to change the class of div dialog and set the css property display:block
In the div that you created place a small ok button and map it's click event to a function that hides the div or set's property : display:none
i got this working once i was using it.
$(function() {
$( "#messagebox" ).dialog();
});
And you need some info to go in that box, with this code.
<div id="messagebox" title="some title">
<p>You type your message here</p>
</div>
you use the id to identify which box, and then the rest gives itself :) good luck.. hope it helps. should be easy.
I have am using firefox and i have modified its user agent to make it behave like iphone web browser. now when i open google.com using watir and now i want to click on the searh button which is an image in mobile view. how to do that.
To click an image
<img id="logo">
try this
browser.image(:id => "logo").click
If the image is actually a button
<input type="image" id="logo">
try this
browser.button(:id => "logo").click
The next time please provide relevant HTML.
Also, take a look at HTML Elements Supported by Watir page.