Fixed z-index issue
parent
6c0ca33e38
commit
5284b61a13
|
@ -53,6 +53,10 @@ export interface ToggleButtonPassThroughOptions<T = any> {
|
|||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
<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">
|
||||
<slot>
|
||||
<slot name="icon" :value="modelValue" :class="cx('icon')">
|
||||
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
|
||||
<span :class="cx('content')" v-bind="getPTOptions('content')">
|
||||
<slot>
|
||||
<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>
|
||||
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
|
||||
</slot>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -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')};
|
||||
border-radius: ${dt('togglebutton.border.radius')};
|
||||
outline-color: transparent;
|
||||
gap: ${dt('togglebutton.gap')};
|
||||
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-icon {
|
||||
position: relative;
|
||||
|
@ -100,6 +107,7 @@ const classes = {
|
|||
'p-invalid': props.invalid
|
||||
}
|
||||
],
|
||||
content: 'p-togglebutton-content',
|
||||
icon: 'p-togglebutton-icon',
|
||||
label: 'p-togglebutton-label'
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue