I am using https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-mui which is a KotlinJS wrapper around Material UI for React.
I am trying to port the following code to Kotlin:
<Grid container spacing={3}>
<Grid xs="auto">
<Item>variable width content</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
</Grid>
</Grid>
The issue I am having is that I don't know how to set the value for the xs breakpoint.
Okay apparently this can be done by creating extension properties:
inline var GridProps.xs: Any?
get() = asDynamic().xs
set(value) = asDynamic().xs = value
(https://github.com/JetBrains/kotlin-wrappers/issues/1856)
Related
Hello i'm trying to add padding custom css but this padding should appear on medium size.
I tried to use code like this but it doesn't work
<Grid container spacing={4} sx={md:{p:12}}>
Try change
sx to xs
And as demo on MUI official:
<Grid container spacing={2}>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
Trying to display 3 items per row in a grid, using the MUI Grid component:
const itemStyle = {
backgroundColor: "red",
height: "300px",
};
function App() {
return (
<Grid container gap={1} spacing={1} direction={"row"}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
);
}
However, the 3rd item always goes to the next line. If I make it xs={3}, all 3 items will be on the same line but there's a bunch of extra space at the end of each row.
Created this in a fresh project without any themes. It works where there is no gap, spacing={1} doesn't do anything - all 3 items will have no space between them. I suspected it was because the number of columns didn't add up, so I tried
<Grid container gap={1} columns={14}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
But that just does the same thing as xs={3}.
that's perhaps an absolute newbye question.
I try to bind a simple Viewmodel Person.allinstances with Firstname: string, Lastname: string to WPF DataGrid.
ViewModel:
enter image description here
XAML:
<Window.Resources>
<ecoVM:ViewModelContent x:Key="VM1" ViewModelName="AllPersons" EcoSpaceType="{x:Type ecospace:RelativesEcoSpace}" ></ecoVM:ViewModelContent>
</Window.Resources>
<Grid DataContext="{StaticResource VM1}">
<DataGrid AutoGenerateColumns="True" ItemsSource="{Binding ?????}" />
</Grid>
Code Behind:
(Resources["VM1"] as ViewModelContent).SetEcoSpace(_es);
(Resources["VM1"] as ViewModelContent).RootObject = ???;
How should I do it properly?
When you create the ViewModel - check the CodeGen-checkbox.
Then CodeGen - and you have a strongly typed VM at your disposal
Use like this:
xmlns:MyVm="clr-namespace:MDrivenMinimalWecpof3.ViewModelCodeGen_FirstView"
...
<MyVm:FirstView x:Key="MyVm" ></MyVm:FirstView>
...
<Grid Grid.Row="2" DataContext="{StaticResource MyVm}">
<DataGrid ItemsSource="{Binding Path=AllSomeClass }" AutoGenerateColumns="True"></DataGrid>
</Grid>
In code behind you set the EcoSpace and possibly root:
(this.Resources["MyVm"] as ViewModelCodeGen_FirstView.FirstView).SetEcoSpace(_es);
I'm creating a form and now attempting to get the value for a summary page.
I'm not having trouble in selecting the radio buttons. The problem lies in getting the value of radio button in material-ui for a summary page/print the value.
The following are my code:
Registering Office: <br></br>
<Grid container direction={'row'} spacing={1}>
<Grid item xs={3}>
<Radio id="RegOffice" value="Head Office" checked={RegOffice==="Head Office"} onChange={handleChangeRegOffice}
color="primary"
/>
Head Office
</Grid>
<Grid item xs={3}>
<Radio id="RegOffice" value="Branch Office" checked={RegOffice==="Branch Office"} onChange={handleChangeRegOffice}
color="primary" />
Branch Office
</Grid>
<Grid itemxs={3}>
<Radio id="RegOffice" value="Facility" checked={RegOffice==="Facility"}
onChange={handleChangeRegOffice}
color="primary" //label="Facility"
/>
Facility
</Grid>
</Grid>
for handlechange:
const [RegOffice, setRegOffice] = React.useState('Head Office')
const handleChangeRegOffice = (event) => { setRegOffice(event.target.value)
console.log(RegOffice) }
=end=
With no luck, every time I call "RegOffice", it always returns blank value.
Appreciate any help. thank you
You code is fine, but you're doing console.log(RegOffice), before the state is updated. React set/update state Asynchronously, which means when you're viewing the console.log(RegOffice) the regOffice state still contains the old state value. The updating state is a really vital React concept and learning about it will be very beneficial for creating/understanding the React Code. Here is a docs link
I've created the codesandbox link out of your code and just moved the console.log() outside the handleChangeRegOffice function.
const handleChangeRegOffice = (event) => {
setRegOffice(event.target.value);
};
console.log(RegOffice);
the updated function and console statement
I have this code:
<Grid item xs={12}>
<Grid container spacing={8} >
<Grid item xs={3} ></Grid>
{ someState && <SomeComponent /> }
</Grid>
</Grid>
At the first render, someState will be always false and only when I change that state I will show SomeComponente but I need to have that Grid visible and empty, in other words, using the row space in the dom. I don't want it hidden. How can I do it? I tried by putting the Gridcomponent empty as I show in the code, but the Grid container isn't using that space.
const SomeComponent = () => (
<Fragment>
<Grid item xs={3}>
<Typography variant="body1">Title</Typography>
</Grid>
<Grid item xs={3}>
asdasdasd
</Grid>
</Fragment>
);
Try this:
<Grid item xs={3} >{someState && <SomeComponent />}</Grid>
This will create the Grid regardless of someState and will fill the space, after someState is thruthy.