Refactor #5071
parent
7107b529aa
commit
631fd839ca
|
@ -61,6 +61,10 @@ export interface ToggleButtonPassThroughOptions {
|
|||
* Used to pass attributes to the input's DOM element.
|
||||
*/
|
||||
input?: ToggleButtonPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the box's DOM element.
|
||||
*/
|
||||
box?: ToggleButtonPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
*/
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-ripple :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
|
||||
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
|
||||
<input
|
||||
:id="inputId"
|
||||
type="checkbox"
|
||||
|
@ -18,11 +18,13 @@
|
|||
@change="onChange"
|
||||
v-bind="getPTOptions('input')"
|
||||
/>
|
||||
<div v-ripple :class="cx('box')" v-bind="getPTOptions('box')">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -3,49 +3,37 @@ import BaseStyle from 'primevue/base/style';
|
|||
const css = `
|
||||
@layer primevue {
|
||||
.p-togglebutton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-togglebutton-input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
.p-togglebutton .p-button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-button-icon-only .p-button-label {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-togglebutton p-button p-component',
|
||||
'p-togglebutton p-component',
|
||||
{
|
||||
'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
|
||||
'p-disabled': props.disabled,
|
||||
'p-highlight': instance.active
|
||||
}
|
||||
],
|
||||
input: 'p-togglebutton-input',
|
||||
box: ({ instance }) => [
|
||||
'p-button p-component',
|
||||
{
|
||||
'p-button-icon-only': instance.hasIcon && !instance.hasLabel
|
||||
}
|
||||
],
|
||||
icon: ({ instance, props }) => [
|
||||
'p-button-icon',
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue