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

Add style prop to TreeViewItem to allow control of content's width #2631

Open
HenryRocha opened this issue Apr 24, 2024 · 3 comments
Open

Add style prop to TreeViewItem to allow control of content's width #2631

HenryRocha opened this issue Apr 24, 2024 · 3 comments
Labels
feature request Request a feature or introduce and update to the project.
Milestone

Comments

@HenryRocha
Copy link

Describe the feature in detail (code, mocks, or screenshots encouraged)

When using the component TreeViewItem the content does not fill the full width. To allow better control of this component's contents the users should be able to pass a style prop to customize the container's width.

Here's a simple example code:

<script lang="ts">
    import { TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
</script>

<div class="flex flex-row h-screen">
    <div class="w-1/2 p-4 flex flex-col items-center bg-white"></div>
    <div class="w-1/2 p-4">
        <div class="flex flex-row">
            <h1 class="w-full text-center text-5xl">Content</h1>
        </div>

        <TreeView open={true}>
            <TreeViewItem>
                <h1 class="text-3xl">Basic Information</h1>

                <svelte:fragment slot="children">
                    <TreeViewItem>
                        <div class="flex items-center space-x-5">
                            <h1 class="w-1/6 text-xl">Email:</h1>

                            <label class="w-5/6 label">
                                <input class="input" type="text" placeholder="[email protected]" />
                            </label>
                        </div>
                    </TreeViewItem>
                </svelte:fragment>
            </TreeViewItem>
        </TreeView>
    </div>
</div>

Here's a screenshot of the current result:
image

To make it work we currently need to make use of the regionSummary prop:

<TreeViewItem regionSummary="[&>.tree-item-content]:grow">

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

@HenryRocha HenryRocha added the feature request Request a feature or introduce and update to the project. label Apr 24, 2024
@endigo9740 endigo9740 added this to the v2.0 milestone Apr 24, 2024
@salisshuaibu11
Copy link
Contributor

@endigo9740 i would like to work on this

@endigo9740
Copy link
Contributor

Thank you Salisu, but I need to talk this over with @Mahmoud-zino before we act on it. We may hold off on this for v3.

@Mahmoud-zino
Copy link
Sponsor Contributor

This for sure should be added in v3 (I will note it there), but I think we can easily add it to v2 if we have the capacity 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Request a feature or introduce and update to the project.
Projects
None yet
Development

No branches or pull requests

4 participants