react-bulma
react-bulma copied to clipboard
kulakowka
Columns?
yes, we need to create Column component. We will be grateful for the pull request.
I have gotten really far with this and think I can get it in the next few days. I do want some feedback on somethings though.
There are just so many different sizes you can pass in for a column
- 1 - 12
- 'one-quarter', 'two-quarter'
- 'half'
- etc
I am thinking it is just easier to have an
isprop that you pass whatever size you want. So you end up with an api like.
<Columns>
// the numbers 1-12 would work either as string or number
<Column is={2}></Column>
<Column is='2'></Column>
<Column is='one-quarter'></Column>
<Column is='two-thirds'></Column>
</Columns>
Which I really like, but I would like to see what others think.
Second issue is all the responsive things you can pass to a column like the bulma docs have here. To implement that I could make it so that you can only pass one to is and then the rest you have to pass as classes to the Component. Or I have to make the is prop possibly be an array which I then add as classes for you like this (taking the exact code from the bulma docs example).
<Columns>
<Column
is={[ 'three-quarters-mobile', 'two-thirds-tablet', 'half-desktop', 'one-third-widescreen', 'one-quarter-fullhd' ]}
>
<code>is-three-quarters-mobile</code><br>
<code>is-two-thirds-tablet</code><br>
<code>is-half-desktop</code>
<code>is-one-third-widescreen</code>
<code>is-one-quarter-fullhd</code>
<Column>
<div class="column">1</div>
<div class="column">1</div>
</Columns>
I think its a good compromise and keeps the api flexible, please tell me what you guys think @dotamir @kulakowka @Darklod
@skbolton I agree with the first one. Do it. And the second one, I think it looks like good.
I think it should be:
<Column threeQuarters />
<Column twoThirds />
<Column half />
<Column oneThird />
<Column oneQuarter />
<Column fourFifths />
<Column threeFifths />
<Column twoFifths />
<Column oneFifth />
Then how would we handle the numbers? And then how to handle the responsive sizes for all those options
Maybe we can support all of this:
<Column threeQuarters />
<Column twoThirds />
<Column half />
<Column oneThird />
<Column oneQuarter />
<Column fourFifths />
<Column threeFifths />
<Column twoFifths />
<Column oneFifth />
<Column is="2" /> or <Column is={2} />
<Column is="3" /> or <Column is={3} />
<Column is="4" /> or ...
<Column is="5" />
<Column is="6" />
<Column is="7" />
<Column is="8" />
<Column is="9" />
<Column is="10" />
<Column is="11" />
<Column offset="1" /> or <Column offset={1} />
<Column offset="2" /> or <Column offset={2} />
<Column offset="3" /> or ...
<Column offset="4" />
<Column offset="5" />
<Column offset="6" />
<Column offset="7" />
<Column offset="8" />
<Column offset="9" />
<Column offset="10" />
<Column offset="11" />
<Column offsetThreeQuarters />
<Column offsetTwoThirds />
<Column offsetHalf />
<Column offsetOneThird />
<Column offsetOneQuarter />
<Column offsetFourFifths />
<Column offsetThreeFifths />
<Column offsetTwoFifths />
<Column offsetOneFifth />
<Colum narrow />
<Colum narrowMobile />
<Colum narrowTablet />
<Colum narrowDesktop />
@dotamir I have since moved to a different bulma react component library. If you want my code that I was going to pr I can get it to you. It was mostly complete
@skbolton Thank you. Yes, I'll be pleasure if you give me the codes. Push your changes on the PR.
