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

[2.x] Add section title aside slot #727

Merged
merged 4 commits into from
Mar 26, 2021
Merged

[2.x] Add section title aside slot #727

merged 4 commits into from
Mar 26, 2021

Conversation

dillingham
Copy link
Contributor

@dillingham dillingham commented Mar 25, 2021

PR allows content in the top right of the jet-section-title component

Got inspiration from Laravel Vapor's UI & found it very useful as a default

I referred to it as aside incase anyone moves the slot to the left for RTL


Screen Shot 2021-03-24 at 9 40 20 PM

Screen Shot 2021-03-24 at 9 46 54 PM

Screen Shot 2021-03-24 at 11 17 20 PM

Works nicely with / without, mobile, jet-button, jet-dropdown & form-select


Vue

<jet-section-title class="mb-5">
    <template #title>Posts</template>
    <template #description>Here are the posts</template>
    <template #aside>
        <jet-secondary-button @click="$inertia.visit(route('posts.create'))">
            New Post
        </jet-secondary-button>
    </template>
</jet-section-title>

Livewire

<x-jet-section-title>
    <x-slot name="title">Posts</x-slot>
    <x-slot name="description">Here are the posts</x-slot>
    <x-slot name="aside">
        <x-jet-secondary-button>
            Create Post
        </x-jet-secondary-button>
    </x-slot>
</x-jet-section-title>

@taylorotwell taylorotwell merged commit 819fd1d into laravel:2.x Mar 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants