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

Sidebar new header templating #1939

Closed
atach opened this issue Jan 1, 2022 · 0 comments
Closed

Sidebar new header templating #1939

atach opened this issue Jan 1, 2022 · 0 comments
Assignees
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@atach
Copy link

atach commented Jan 1, 2022

When using the "Sidebar" component, it not be possible to correctly customize the title via the css.

Already in two projects I am faced with the need for a header slot.
Can you add a header slot?

Vue version: 3.2.26
PrimeVue version: 3.10
Browser: all

<template>
    <Teleport to="body">
        <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
            <div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
                <div class="p-sidebar-header">
                    <div class="p-sidebar-header-title" v-if="$slots.header">
                        <slot name="header"></slot>
                    </div>
                    <button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
                        <span class="p-sidebar-close-icon pi pi-times" />
                    </button>
                </div>
                <div class="p-sidebar-content">
                    <slot></slot>
                </div>
            </div>
        </transition>
    </Teleport>
</template>

SlotSidebar

@tugcekucukoglu tugcekucukoglu added Status: Discussion Issue or pull request needs to be discussed by Core Team Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add labels Jan 6, 2022
@tugcekucukoglu tugcekucukoglu removed the Status: Discussion Issue or pull request needs to be discussed by Core Team label Apr 21, 2022
@tugcekucukoglu tugcekucukoglu added this to the 3.12.6 milestone Apr 21, 2022
@tugcekucukoglu tugcekucukoglu self-assigned this Apr 21, 2022
@tugcekucukoglu tugcekucukoglu changed the title Header slot for "Sidebar" component Sidebar new header templating Apr 21, 2022
yigitfindikli added a commit that referenced this issue Apr 25, 2022
Fixed #1939 - Sidebar new header templating
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

No branches or pull requests

2 participants