I am using Swiper's Pagination progress mode to have a slide with pagination and navigation on my website.
I have successfully integrated it but I am not able to change the color of the navigation buttons and the pagination progress bar.
I have tried targeting the navigation classes and through root.
`:root {
--swiper-theme-color: rgb(230, 189, 44);
}
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
color: rgb(230, 189, 44);
}`
Any ideas on how to do this?
strong text
Related
Looking for ideas on how to implement a Netflix.com like slider in react native.
If I use a ScrollView, user can scroll all the way to right with one single momentum scroll. But Netflix slider scrolls only 6 (itemsPerRow) items at a time. So, ScrollView may not be ideal. I will use general View instead of ScrollView.
<View style={styles.slider}>
<SliderControl pressHandler={loadPrevItems}>
<Text>{'<'}</Text>
</SliderControl>
<Animated.View
style={
{
transform: [{
translateX: interpolatedAnimation,
}],
}
}
>
{renderContent()}
</Animated.View>
<SliderControl pressHandler={loadNextItems}>
<Text>{'>'}</Text>
</SliderControl>
</View>
The slider controls are tied to onPress event handlers. The handlers adjusts the animation value as needed. When the slider is re-rendered, it is animated (slide to left/right) and shows next/prev items. I figured that they are using transform translateX animation for this. This is easily achievable with Animated API
const animation = useRef(new Animated.Value(0)).current;
const interpolatedAnimation = useMemo(() => {
return animation.interpolate({
inputRange: [0, 100],
outputRange: [0, sliderWidth],
});
}, [animation, sliderWidth]);
useEffect(() => {
Animated.timing(animation, {
toValue: moveDirection === 'right ? -100 : 100,
duration: 750,
useNativeDriver: true,
}).start();
});
Along with the Next/Prev button, Netflix slider also supports the trackpad scroll events. If we scroll slightly, the slider doesn't move at all. But we do a momentum scroll, it slides exactly 6 (itemsPerRow) items.
A general View doesn't support scroll event handlers to listen to trackpad scroll action. Not sure how I can achieve this part
ScrollView - lot of unwanted scrolling
View - No support for scroll event listener
Any ideas?
When I try to do a transition using the default "w-#" options in Tailwind, my transitions don't apply. When I hard code in my own classes for width, it works fine. Is there something weird with Tailwinds CSS and how it handles width that would cause this?
Here's the HTML text. The main part here is the dynamic class "sidebarWidth" which switches when the button is clicked. The transition-all, slowest and ease are all things I extended in Tailwind.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">
Here's the JS code in the computed properties of the Vue component
sidebarWidth: function() {
if (this.$store.getters.isSidebarCollapsed) {
return "w-14 invisible md:visible";
} else {
return "w-64";
}
}
If I swap out w-14 and w-64 for the following classes, it works great.
<style scoped>
.width1 {
width: 100px;
}
.width2 {
width: 400px;
}
</style>
I basically want my sidebar nav to slide in when I click a button. In mobile, the sidebar nav is hidden and I want it to slide out. In the desktop, it should be a small nav and then slide out to a full screen nav. It works, but the slide transition doesn't work. Also, the margin change between mobile and desktop does animate properly.
You need to perform a few steps to activate the behaviour you are looking for.
The first one is about extending you Tailwind theme via tailwind.config.js. You need to add the transitionProperty for width.
module.exports = {
...
theme: {
...
extend: {
...
transitionProperty: {
'width': 'width'
},
},
},
}
The changes above create the transition-width class. Simply apply this one to your nav tag. In your specific case you can overwrite the transition-all class.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">
The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.
Background to the Problem
By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using transition class.
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Like you can see width and height are missing in transition-property.
You can find more information about it in the Tailwind documentation.
You can make your own transition property like in tailwind.config.js :
Multiple properties :
module.exports = {
theme: {
extend: {
transitionProperty: {
multiple: "width , height , backgroundColor , border-radius"
}
}
}
One property :
module.exports = {
theme: {
extend: {
transitionProperty: {
width: "width"
}
}
}
I am attempting to use react-native-keyboard-spacer in conjunction with react-navigation.
I am currently setting the topSpacing of the keyboard spacer to be -49 which is the height of the tab bar from react-navigation, but the tab bar is within a SafeAreaView which magically adds padding to move content into an area that doesn't interfere with native UI.
This means that when viewing the app on an iPhone X, or other similar devices, the tab bar becomes taller than 50.
What would be the best way to get the height of the SafeAreaView?
Here is the list padding from react-navigation SafeAreaView
LandScape Mode
paddingLeft: 44
paddingRight: 44
paddingBottom: 24
paddingTop: 0
Portrait Mode
paddingLeft: 0
paddingRight: 0
paddingBottom:34
paddingTop:44 // ... Including Status bar height
Another option with react-native-safe-area-context (https://github.com/th3rdwave/react-native-safe-area-context):
import { useSafeAreaInsets } from 'react-native-safe-area-context';
...
const insets = useSafeAreaInsets();
Then you can get the bottom safe area height from safeAreaInsets.bottom.
You can use the react-native-safe-area. it provides function to Get safe area inset top, bottom, left, right.
import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'
//Retrieve safe area insets for root view
SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
console.log(result)
// { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})
Below is not supported anymore, for update check here https://github.com/th3rdwave/react-native-safe-area-context
npm install react-native-safe-area-view
import { getInset } from 'react-native-safe-area-view';
const bottomPadding = getInset('bottom', false); //2nd param islandscape
//outputs bottom safe area height
I would like the actual Tab contents inside a TabView to anchor or line up to the bottom of another visual element. In this case the tabBar at the top would overlap with the other element in question.
My problem is that I don't know how to get the y coordinate of the Tab contents of the TabView or alternatively, how to get the height of the tab buttons in the tabBar so I can offset the alignment based on it.
I can think of 2 ways to solve this, both of which are clunky:
Option 1 -- I could make a TabView with no contents, which sits inside my other element. Then I could make a second TabView with tabsVisible = false. Then link the 2 together.
Option 2 -- I could override tab: in TabViewStyle, set a height for it from a property, that way I could offset my TabView.y based on the tabBar height.
Option 3: Somehow get the y coordinate of a Tab content within TabView (relative to the TabView or the parent item) or somehow get the existing tab (button) height. I have no idea how to do either of these.
Options 1 and 2 seem very clunky. Any ideas?
Actually you can get this information very easily. TabView define a contentItem property, which holds the content item of the tab view. The tab button height is therefore tabView.height - tabView.contentItem.height
Example:
import QtQuick 2.2
import QtQuick.Controls 1.1
Item {
width: 350
height: 150
TabView
{
id: tabview
height: parent.height
width: parent.width/2
Component.onCompleted: {addTab("1");addTab("2")}
}
Column
{
anchors.left: tabview.right
anchors.right: parent.right
Rectangle
{
width: parent.width
height: tabview.height-tabview.contentItem.height
color: "red"
}
Rectangle
{
width: parent.width
color: "yellow"
height: tabview.contentItem.height
}
}
}
I just upgraded Bootstrap from 2.x to 3.x and found that modal dialog(http://getbootstrap.com/javascript/#modals) do not have vertical scroll bar anymore for large content body. How to set modal body max height and enable scroll bar?
You can set a height and enable the scrollbar using:
#myModal .modal-content
{
height:200px;
overflow:auto;
}
If you don't want the scroll bar on the entire modal, use modal-body instead:
#myModal .modal-body
{
height:200px;
overflow:auto;
}
Demo: http://bootply.com/88983