In NativeScript with vue.js, I'm trying to figure out if it is possible to have a button which has a linear gradient background and shows an image above the button text. When I set up the CSS to do that, it doesn't seem to work.
I set up a playground to demonstrate: https://play.nativescript.org/?template=play-vue&id=kICEBa&v=1.
Am I doing something wrong, or is this simply not supported by NativeScript-Vue?
If it's not supported by CSS, is there some other way to achieve this result?
I don't think having both on same element is yet supported. You may raise a feature request to support both.
Meanwhile wrap your button with a layout / content view and apply the gradient on it.
Related
Is it possible to implement slider with static gradient track in React Native using any 3rd party library or what-soever?
Illustrative image from Google:
Right now I'm using sldier from #react-native-community/slider, but it doesn't seem to support gradient slider track? I can customize minimumTrackTintColor and maximumTrackTintColor, but I would like to have static gradient track independent of the indicator position. I have looked into other 3rd party slider libraries as well, but encountered the same problem.
So, is there any way in any library to achieve this in React Native?
I dont think any package upfront gives this functionality, but you can always use linear-gradient. this library, make a view with. gradient like that, and on top of that, by using position:'relative' make a cursor and slide it by using rn-draggable . You will need to work out on that, but you can create a new functionality , and maybe publish it so that it can be used by others in future.
Hopeit helps.feel free for doubts
Inspired from what #Gaurav_Roy answered above, in the end, I achieved what I wanted with react-native-gesture-responder . I positioned my custom gradient slider track and slider dot as images and used createResponder from the library to capture user interactions with the slider dot. Then calculated the distance between dot position and track edges to get the value.
I am working with MapKit on MacOS and trying to enable a draggable annotation that uses a custom image. I can successfully get the annotation to be draggable but it requires the user to be quite accurate with where they click and drag as the annotation image is larger than a conventional pin. Is there a simple way to expand the area so that any part of the image is draggable? Otherwise I imagine I will have to use some kind of NSGesture on the view to manually set the dragstate, but was hoping there might be an easier way!
Okay, I never managed to sort this to my satisfaction using Annotations. I’m not saying it can’t be done, maybe someone else can comment and leave pointers to help. But I eventually achieved what I wanted using overlays instead. So if someone stumbles on this question and has the same issue, you can make it work with a custom overlay rather than an annotation and you implement the dragging using a NSPanGestureRecognizer with translation for the movement.
It looks like there is a bug in Bootstrap. If you change resolution, for example with ctrl + (+/-) in your browser the addons are not properly adjusted. It looks like this:
Notice the wrong sizes of addons.
Is there a simple way to fix this?
No, there is no simple way (and quite possibly no way period) to fix problems related to the type of zooming that you're referring to (as opposed to the viewport-width-based zooming that you get when using the pinch gesture on touch-based devices).
Per Bootstrap's documentation:
Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. [... these issues] often have no direct solution other than hacky workarounds.
Zooming in and out is not changing the resolution at all its zooming and is completely different from changing the view port's aspect ratio and dimensions.
Give the input area a fixed width like input {width:100px}
I have been looking for the solution on the web for a long time. Most tutorials are fairly simple about adding shadow to a UIView. I also noticed that if we add a shadow to an UIImageView. The shadow shape could perfectly fit the shape of the content image if the image itself has alpha channel in it. Say for example, if the image is an animal with transparent background, the shadow shape is also the same as that animal (not a rectangle shadow as same as UIImageView frame).
But these are not enough. What I need to do is to add some changes to the shadow so it may have some rotation angle and compressed (squeezed or shift) effect so that looks like the sunlight comes from a certain spot.
To demonstrate what I need, I upload 2 images below, which I captured from the Google Map App created by Apple. You can imagine the Annotation Pin is an image which has the Pin shape, so the shadow is also "pin shaped", but it is not simply "offset" with a CGSize, you can see the top of the shadow is shifted right about 35 degrees and slightly squeezed the height.
When we tap and hold and pin, the shadow is also animated away from the pin, so I believe that such shadow can be made programmably.
The best shadow tutorial I can found so far is http://nachbaur.com/blog/fun-shadow-effects-using-custom-calayer-shadowpaths But unfortunately, that cannot make this effect.
If anyone know the answer or know any better words to search for, please let me know. Thank you.
(Please note that the shape of the image is dynamic in the App, so using any tool like Photoshop to pre-render the shadow is not an option.)
In order to create dynamic effects like this, you have to use Core Graphics. It's incredibly powerful once you know how to use it. Basically you need to set a skew transform on the context, set up a shadow and draw the image. You will probably have to use transparency layers as well.
It doesn't sound like you can use CALayer shadows, since that is meant to solve a specific use-case. The approach Apple takes with the pin marks on the map is to have two separate images that are created ahead of time (e.g. in Photoshop) and they position them within the map relative to a reference point.
If you really do need to do this at run-time, it should still be possible by using either Core Graphics or ImageKit. To get a blurred shadow appearance, you can use the kCICategoryBlur CIFilter. You can then convert the image to grayscale. And to get that compressed look you just need to resize and skew the image.
Once you have two separate images, you can either take the CGImageRef for the shadow image and can set that as the content of another sublayer, or you can add it as a separate view.
If you know what all the shapes are, you could just render a shadow image in Photoshop or something.
I have a google map that takes the users post code and loads in directions. The map then shrinks by around 300px in width. Although the map and options adjust to this new width, the route however remains as if the map did not shrink with not all of it in view.
I believe the way to checkResize() but I do not know how to use this. Essentially I would need to trigger it on an onClick event. How is this done. Maps API v3
Any ideas?
Marvellous
google.maps.event.trigger(map, 'resize');