kodyl / react-flexr Goto Github PK
View Code? Open in Web Editor NEWReact Flexbox grid made simple.
License: MIT License
React Flexbox grid made simple.
License: MIT License
babel-runtime
is called out in package.json
under devDependencies
, but it's referenced by name in https://github.com/kodyl/react-flexr/blob/master/dist/index.js#L7 and is thus a run time dependency. It should be in package.json
under dependencies
to be sure all run time dependencies install correctly.
<Grid
flexCells={ bool } // All sub cells will be full height
/>
When I try to use this it breaks my text alignment, which seems to be caused by the <div>
losing it's width, and doesn't actually distribute height equally. I've tried <Grid flexCells={ true } ...
or <Grid flexCells="true" ...
Am I missing something simple?
This gives lots of warnings in React 0.15:
warning.js:44 Warning: Unknown prop
deskon <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
Also, perhaps this is by design, but when resizing manually by dragging the window, the ergonomics breakpoints aren't triggered until I reload the page at the new size... related?
I am using react-flexr on Meteor 1.3.1. The Grdi is working well, columns are OK and resize when I resize the window, and cell alignment also works. However, the breakpoints have no effect, grid is non responsive.
Here is the code:
import React from 'react';
...
import { Grid, Cell } from 'react-flexr';
import '/node_modules/react-flexr/styles.css';
class Profile extends React.Component {
....
render() {
return (
<div>
<AppBar className={style.appbar} flat>
<h1 className={style.title}>React Toolbox Example</h1>
</AppBar>
<section className={style.content}>
<Grid>
<Cell align='top' size={4/12} palm={6/12}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor.Aenean massa.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.Nulla consequat massa quis enim.
</Cell>
<Cell align='center' size={4/12} palm={6/12}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</Cell>
<Cell align='bottom' size={4/12} palm={6/12}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor.Aenean massa.Cum sociis natoque penatibus et magnis dis parturient montes
</Cell>
</Grid>
</section>
</div>
);
}
}
export default Profile;
Do I need to import something else or set the breakpoints somewhere?? Thanks for any help.
Hi,
I'm relatively new to React, so forgive me if this is a dumb question...
When I break apart my components into separate files, and only use the top level Grid
in one file and the Cell
in another, the code won't work unless I import both at the top.
Webpack then fires off a load of warnings in the console about warning 'Cell' is defined but never used no-unused-vars
.
It's not breaking anything, but it's a bit annoying when you have similar arrangements across lots of files. Short of switching off the warnings (the rest of which are quite useful), is there a 'right' way of fixing this?
Thanks.
Does this not work using React 15? I'm trying to run the optimizedResize.init() function the way the app suggests and I'm getting: "index.js:114 Uncaught TypeError: callbacks.setItem is not a function"
When I resize the window I get: "index.js:106 Uncaught TypeError: callbacks.values(...).forEach is not a function"
Everything else works great
Would it be possible to have a cell with a fixed size (i.e 100px) or is there already a way of handling that? Currently only fractions are supported ,and my sidebar (who have a fixed width) needs to be contained in a custom div in the grid rather than in a cell.
Example:
<Cell palm="100px" lap="200px" desk="300px" />
<Grid>
intended to represent a row? In your demos you have one <Grid>
and many <Cell>
s, however if you test this out, you don't see the behaviour that you are suggesting in the example. For example when you have the example for:<Grid>
<Cell size='6/12'>
Fills Half
</Cell>
<Cell>
Fills Rest.. (Yay for Flexbox)
</Cell>
<Cell size={200} lap={150}>
Fills 150px on lap and 200px everywhere else
</Cell>
You end up with all 3 cells in the first row and the remaining ones staggered in distribution. I am just wondering because when I read "Fills rest" I'm assuming it would fill the rest of the available space. Instead you get an additional cell in the row of 150px (lap).
<Grid>
element. Is the intension that the outer <Grid>
is wrapped in a .container
with an 11px padding left/right?Any insight is appreciated.
Jamie
Cell stuff works but so far can't get Grid's flexCells, hAlign, align to have any effect when set.
This is in Chrome on a windows 8.1 box.
Hi, i have been playing around for a while and i am having a hard time coming up with a footer concept with this grid system. It seems aligning cells or grid to the bottom doesn't have any effect.
I am having a problem where react-flexr doesn't work in safari on a tablet and "solved by flexbox" works on safari. It seems like webkits aren't specified for the Grid. (reference : https://github.com/kodyl/react-flexr/blob/master/lib/grid.component.js#L9)
How to set direction?
Same as #11 but for the flexCells prop for the Grid element.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.