Is there a way to put a image or some text next to the buttons on the left and right side, but not clickable?
I want to provide some user info (just a number) that's always visible, but it's not an action, so no button.
you can use a custom component for the navBar, using:
navBarCustomView: 'example.CustomTopBar' //registered component name
you can have a look to the style format for the navBar in the docs
Related
how can i make a photos grid (each photo is a card) with custom overlay.
when the user hover the photo, he will see the details overlay.
so the user will see the photo and details on it.
i tried to do this with "Beautify" and "Bootstrap-Vue"
and did not succeed.
example for what i look for: example website
Just build your grid of items - styling them with bootstrap "Card" component and grid system to make it as a grid.
Then just use this custom vue component with v-for and then bind #mouseover + #mouseleave on this element to change the state of hovered property or whatever you like to call it. Then just change your text or structure in your component according to hovered state.
Simple demo here:
http://jsfiddle.net/e8y0hLps/
I'm trying to use Vue ToolTip in my project. I can successfully get it to work on my page, however, it doesn't work on my modal pop up page.
I've created a fiddle here: https://jsfiddle.net/bkw28n9h/
In this fiddle there is a Tooltip text on the page which shows up tooltip on hover. However, there is also a tool tip on the modal popup can comes up when clicking on any list item. The tooltip on the modal pop up does not show up on hover. Why is that?
I add the tooltip directive like this:
Vue.use(vueDirectiveTooltip);
Do I need to specifically add it to the modal component? If so, how do I do that?
Add to your style this:
.h-tooltip {
z-index: 99999!important;
}
The tooltip is being covered by your modal.
I am making an English Reading app. When the user clicks on a word, they will see the translation of that word.
So how to make text is selected when the user clicks and holds for some time? I desire something likes document.onselectchange event in JavaScript for the web.
wrap the Text component with one of the available Touchable components i.e TouchableOpacity. You'll then have access to the onLongPress prop, where you can call a function which allows you to change the background color of the text to give the feel of being selected.
So I want the ability to change the title of the UINavigationItem from within the app. To be more specific, I want to be able to tap the title on the navigation bar and have it go into edit mode; where I can type in a new title. Is there any way to do this?
It's quite possible and not very hard in fact. Here are the simple steps:
Navigation item allows for custom views in its title
Add a view with a label similar to that of the native navigation item
Add a transparent button (custom button) on top of the label
Add a hidden text field on top of the button
When the button is pressed, hide the label and show the text field - focus on the text field (becomeFirstResponder)
You are in editing mode: now track for "Return" key being pressed, and once that happens set your label text to what has been entered, resign first responder from the text field and hide it, then show the label
If you adjust all the properties of the UI components it will look like your navigation item supports inline editing!
how can I have a back button and another button both on the left side of the nav bar?
Do you also need the title? If not, you can simply place the button in the center area. Otherwise, if you also need the title, you will need to create a UIView with a label and a button in it and set that as the center view. You will have to set the label's text manually if the title of the view ever changes.
Or, if you don't care too much about the back button, you can create a button that looks like the back button and put your other button next to it in a parent view that you use as the left view. You would have to manually handle going back when pressing the back button, and unless you got an image that looks like the back button, your button would not have the arrow shape.