Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide grid when item value is 0 #278

Closed
unix opened this issue Jun 19, 2020 · 1 comment · Fixed by #280
Closed

Hide grid when item value is 0 #278

unix opened this issue Jun 19, 2020 · 1 comment · Fixed by #280
Assignees

Comments

@unix
Copy link
Member

unix commented Jun 19, 2020

Feature request 🚀

A common requirement is to hide some elements on a smaller screen, If we only use CSS in Grid to do this, this problem can be solved perfectly under SSR.

Expected:

  • No breaking changes
  • Hide Grid when it's unit size is 0
  • Only when media query is hit

Others

Due each breakpoint props can be adapted upward, the hidden action is also upward covered.
For example, xs means xs breakpoint and the width greater than xs, if we only set 0 for xs on Grid, then Grid will be hidden forever:

<Grid.Container>
  <Grid xs={0}></Grid>
</Grid.Container>

If we omit breakpoints, the omitted breakpoints will also be hidden:

// xs, sm -> hidden
// md, lg, xl -> display 

<Grid.Container>
  <Grid xs={0} md={12}></Grid>
</Grid.Container>
@unix unix self-assigned this Jun 19, 2020
@unix unix linked a pull request Jun 20, 2020 that will close this issue
2 tasks
@unix
Copy link
Member Author

unix commented Jun 20, 2020

Well, it has to be said, that the function to hide elements when the value is 0 is really very useful.
It's hard to imagine that this implemented with CSS, which is prefectly compatible with server-side rendering.

@unix unix closed this as completed Jun 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant