I want to have no breakpoint specific changes if my variant is horizontalCard. On the other hand, I want these media query breakpoints for other variants.
Suppose I have this variant argument sent like this. Ignore the closing tags
export const useStyles = makeStyles<
{ variant: string },
‘hasTooltip’ | ‘large’ | ‘medium’ | ‘small’ | ‘checked’ | ‘icon’ | ‘label’
>({
name: ‘CardFormControlLabel’,
})((...[theme, { variant }, classes]) => ({
root: {
`
And I want the labelRoot class to have conditional media query breakpoint
labelRoot: {
flexDirection: variant === ‘card’ ? ‘column-reverse’ : ‘row-reverse’,
height: ‘calc(100% - 2px)’,
marginLeft: 0,
width: ‘calc(100% - 2px)‘,
zIndex: 2,
borderRadius,
‘&.Mui-disabled’: {
backgroundColor: theme.palette.grey[50],
borderRadius,
},
[theme.breakpoints.down(‘md’)]: {
flexDirection: ‘row’,
},
[`.${classes.large} &`]: {
...theme.mixins.shadow2,
alignItems: ‘normal’,
backgroundColor: theme.palette.grey[50],
borderRadius,
},
},
Can I use something like this??? Seems wrong to me
[theme.breakpoints.down(‘md’) && variant != ‘horizontalCard]: {
flexDirection: ‘row’,
},
Related
I'm trying to customize the Tailwind Typography plugin, as follows:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
How can I apply a color value to backgroundColor - based on one of the built in colors, with with opacity applied? For example colors.slate.800 / 50 (which doesn't work)
This is a tricky one. The problem is theme function will return HEX value for colors - it simply gets value from resolved configuration in dot notation. So theme('colors.red.500/300') is not valid (at least for now. I think it worth to open PR or Discussion)
All you need to solve the problem is to convert HEX to RGB. There are two Tailwind's ways I know but of course you're free to use any similar approach
First one - convert using Tailwind's withAlphaVariable function. It accepts an object with CSS property, color name and variable name.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Second one much simplier - use #apply directive. Pass desired Tailwind's utilities as a key and empty object as a value
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `#apply bg-red-500/30 text-lg font-bold`: {}
'#apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Worth to mention you can customize code background as utility prose-code:bg-blue-500/50
<div class="prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>
DEMO
I am using Cytoscape.js with dagre layout in order to visualize a tree like hierarchy. I have a couple of questions regarding the layout. You can check actual and expected snapshots and examine a runnable sample here.
Nodes in each rank/hierarchy level/ are center aligned. Can they be left-aligned according to the node with the largest width?
The separation between adjacent nodes in the same rank is the same for nodes no matter whether they are in compound nodes. Can we specify a smaller separation for nodes in a compound node ?
I have a header and footer svg specified in the compound node and can have multiple nodes from the same rank. If I set a smaller separation for all the nodes, then the compound nodes will be overlapped. I want to avoid compound nodes overlapping and at the same time have a smaller separation in the compound node.
Can we specify a order for parent nodes in the same rank? For example I want node5 and node7 along with their compound nodes to be on the top ? I am not sure whether this is supported by the dagre layout. As for klay and elk layouts they doesn't seem to have as good layout as dagre.
I am curious whether the above can be achieved with a particular layout or must be handled manually.
You can find a link to a runnable example above.
window.addEventListener("DOMContentLoaded", function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre',
rankDir: 'LR',
fit: false,
},
style: [
{
selector: 'node',
style: {
//'content': 'data(id)',
'label': function(arg) {
var labelRighPadding = arg.hasClass(ICON_NODE) ? '\u0020\u0020\u0020\u200b' : '';
return arg.data().id + labelRighPadding;
//return arg.data().id + '\uf022';
},
//'text-wrap': 'wrap',
//'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'center',
'background-color': 'white',
'border-width': 1,
'border-color': 'black',
//'text-margin-x': -10,
'width': 'label',
// 'width': function(e) {
// return e.boundingBox().w + 20;
// },
'height':'label',
'shape':'round-rectangle',
'padding': '5px',
}
},
{
selector: 'node.' + ICON_NODE,
css: {
'background-image': 'url(note.png)',
'background-width': '16px',
'background-height': '16px',
'background-position-x': '100%',
'background-opacity': 0,
// 'padding-relative-to': 'min'
}
},
{
selector: 'node.parent_title',
css: {
'border-color': 'red',
}
},
{
selector: ':parent',
css: {
// 'text-valign': 'center',
// 'text-halign': 'center',
//'min-height': "90px",
'background-image': ['url(host.svg)', addText(), drawLine(), addText()],
'background-width': ['16', 'auto', '100%', 'auto'],
'background-height': ['16', 'auto', '1px', 'auto'],
'background-position-y': ['10%', '10%', '70%', '90%'],
'background-position-x': ['10', '26', '0', '10'],
'label': '',
'background-color': 'white',
'border-width': 1,
'border-color': 'black',
//'padding': '10px',
'padding': '40px' //or padding 40 with no height
}
},
{
selector: 'edge',
style: {
"curve-style": "unbundled-bezier",
'width': 1,
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'line-color': 'black',
}
},
{
selector: 'edge.danger',
style: {
'line-color': 'red',
'target-arrow-color': 'red',
}
}
],
elements: {
nodes: [
],
edges: [
]
},
});
});
I would like to know if anyone knows how to take snapshot of just routes in react native maps, something what ride sharing companies have when a user views previous trips. I am able to take a snapshot using the code below, though I noticed the height, width, region properties do not.
takeLocationSnapshot() {
const { location: { longitude, latitude, } } = this.state;
const snapshot = this.mapView.takeSnapshot({
width: 300, // optional, when omitted the view-width is used
height: 300, // optional, when omitted the view-height is used
region: {
latitude,
longitude,
LONGITUDEDELTA,
LATITUDEDELTA,
},
// iOS only, optional region to render
format: 'jpg', // image formats: 'png', 'jpg' (default: 'png')
quality: 0.7, // image quality: 0..1 (only relevant for jpg, default: 1)
result: 'file' // result types: 'file', 'base64' (default: 'file')
});
snapshot.then((uri) => {
this.props.locationSnapshotChange(uri);
});
}
<View style={styles.imageContentWrap}>
<Image
source={imageSource}
style={styles.imageStyle}
/>
</View>
imageContentWrap: {
flexWrap: 'wrap',
backgroundColor: 'green',
flex: 0.58,
},
imageStyle: {
flexWrap: 'wrap',
width: '100%',
height: '100%',
resizeMode: 'cover',
overflow: 'hidden',
},
Just using Wrapper with fixed height and overflow hidden, and add position absolute, top property to styles of your image
I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.
I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.
const Daily = createStackNavigator(
{
Daily: {
screen: DailyStack,
},
Another:{
screen: Another,
}
},
{
headerMode:'none'
},
);
const Monthly = createStackNavigator({
Monthly: {
screen: MonthlyStack,
},
},
{
headerMode:'none'
});
const Range = createStackNavigator({
Range: {
screen: RangeStack,
}
},
{
headerMode:'none'
});
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
navigationOptions: ({ navigation }) => {
return {
// tabBarOptions:{
// indicatorStyle: {
// backgroundColor: "#2E86C1",
// },
// // tabStyle:{
// // backgroundColor: '#F7F9F9'
// // },
// labelStyle :{
// color: '#2E86C1'
// },
// activeTintColor:'blue',
// inactiveTintColor: {
// color: 'green'
// },
// style: {
// backgroundColor: 'white',
// elevation: 0, // remove shadow on Android
// shadowOpacity: 0, // remove shadow on iOS,
// borderWidth:1,
// borderColor:'#ccc'
// }
// },
headerRight: (
<Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
)
};
}
}
)
If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right
you must entirely study this link.
another important subject is that navigationOptions related to every screen in stack. such as this:
const App = createMaterialTopTabNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#633689',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
tabBarOptions:{
style: {
backgroundColor: 'white',
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'#ccc'
}
},
};
}
}
)
Sharing common navigationOptions across screens
It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.
I'm using cytoscape.js and when I try to initialize it, I found the canvas height to 0. I don't understand why.
This is my js :
var cy = cytoscape({container: document.getElementById("mapping")});
cy.add([
{group: "nodes", data: {id: "n0"}, position: {x:0, y:0}},
{group: "nodes", data: {id: "n1"}, position: {x:100, y:50}},
{group: "edges", data: {id: "e0", source: "n0", target: "n1"}}
]);
console.log(cy.container());
Here is the jsfiddle where you can see the "height":0px in log and nothing in rendered.
If you initialize cytoscape with static data, consider doing it like the documentation shows:
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: { /!!!
name: 'grid',
rows: 1
}
});
you dont specify a layout in your sample code, i rarely do it like that, i simply add the nodes/edges and call the layout algorithm i want, the rest of your code seems ok, did you include all scripts and css files for cytoscape?