-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
[REF-2574] Default width for Stack (+children) and default padding for container #3104
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
For certain block-level layout and form control elements, apply a default 100% width to have a nicer look without reaching for CSS props.
Update default container props to look nicer out of the box without specifying any CSS.
picklelo
reviewed
Apr 18, 2024
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wow looks way better! Nice |
This can be applied to any component to ensure that its children vstack/hstack and select children thereof have width=100% set for better out of the box appearance in many situations.
This prop applies the STACK_CHILDREN_FULL_WIDTH css snippet to the container.
masenf
force-pushed
the
masenf/vstack-default-layout
branch
from
April 25, 2024 06:09
67f2d43
to
0fb6bad
Compare
picklelo
approved these changes
Apr 26, 2024
@@ -35,5 +35,11 @@ def create(cls, *children, **props): | |||
else: | |||
props["dangerouslySetInnerHTML"] = {"__html": children[0]} | |||
|
|||
# Apply the default classname | |||
given_class_name = props.pop("class_name", []) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we apply to this all rx components in the future?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stack Width
Opt-in to 2 tweaks to improve out of the box experience using layout stacks via the new
rx.style.STACK_CHILDREN_FULL_WIDTH
style snippetHaving a default width of 100% makes components fit nicely in their parent container. This prop often needs to be specified to have things look aligned when placing elements in a stack.
Container prop:
stack_children_full_width
An easy way to get the above behavior in your top level container is by passing
stack_children_full_width=True
. Eventually the experimental opinionated layout component may treat this as its default, butrx.container
will remain unopinionated about the width of its children.Container Padding
The
rx.container
centers content to a particular width, however when the viewport is less than that width, the content runs directly to the edge, which isn't very aesthetically pleasing. The default padding of16px
means that viewports narrower than the container still get some space on the edge to breathe.Reducing the default size of the container from "4" to "3" fits better with more screen sizes and is easily changed for apps that want a wider content area.
Results
Sample Code
Try out the
/
and/wide
routes to see the difference for yourself.Before
Screen.Recording.2024-04-17.at.14.38.51.mov
After
Note: this was before changing the buttons to not be stretched! Not the latest version of the PR or sample code.
Screen.Recording.2024-04-17.at.14.37.54.mov