vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed z-index issue

pull/5756/head
Cagatay Civici 2024-05-15 12:20:13 +03:00
parent 6c0ca33e38
commit 5284b61a13
3 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/togglebutton/ToggleButton.d.ts vendored
View File

@ -53,6 +53,10 @@ export interface ToggleButtonPassThroughOptions<T = any> {
* Used to pass attributes to the root's DOM element. * Used to pass attributes to the root's DOM element.
*/ */
root?: ToggleButtonPassThroughOptionType<T>; root?: ToggleButtonPassThroughOptionType<T>;
/**
* Used to pass attributes to the content's DOM element.
*/
content?: ToggleButtonPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the icon's DOM element.
*/ */

12
components/lib/togglebutton/ToggleButton.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled"> <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<slot> <span :class="cx('content')" v-bind="getPTOptions('content')">
<slot name="icon" :value="modelValue" :class="cx('icon')"> <slot>
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" /> <slot name="icon" :value="modelValue" :class="cx('icon')">
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
</slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
</slot> </slot>
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span> </span>
</slot>
</button> </button>
</template> </template>

10
components/lib/togglebutton/style/ToggleButtonStyle.js
View File

@ -19,10 +19,17 @@ const theme = ({ dt }) => `
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
border-radius: ${dt('togglebutton.border.radius')}; border-radius: ${dt('togglebutton.border.radius')};
outline-color: transparent; outline-color: transparent;
gap: ${dt('togglebutton.gap')};
font-weight: ${dt('togglebutton.font.weight')}; font-weight: ${dt('togglebutton.font.weight')};
} }
.p-togglebutton-content {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: ${dt('togglebutton.gap')};
}
.p-togglebutton-label, .p-togglebutton-label,
.p-togglebutton-icon { .p-togglebutton-icon {
position: relative; position: relative;
@ -100,6 +107,7 @@ const classes = {
'p-invalid': props.invalid 'p-invalid': props.invalid
} }
], ],
content: 'p-togglebutton-content',
icon: 'p-togglebutton-icon', icon: 'p-togglebutton-icon',
label: 'p-togglebutton-label' label: 'p-togglebutton-label'
}; };