primevue icon indicating copy to clipboard operation
primevue copied to clipboard

TriStateCheckbox: should allow icons to be customized

Open jf908 opened this issue 2 years ago • 3 comments

Describe the feature you would like to see added

It would be great if the icons for the states of the TriStateCheckbox could be customized.

Is your feature request related to a problem?

The TriStateCheckbox seems like it would be useful for showing an indeterminate state (a feature which is supported by native checkboxes and also the checkboxes in the TreeSelect component) but it's not possible to change the TriStateCheckbox to show a minus icon.

Describe the solution you'd like

A prop that let's you set specific icons for each state.

Describe alternatives you have considered

I've worked around it for now with CSS, not the cleanest solution but it works as long as icon codes don't change.

.indeterminate :deep(.pi-times:before) {
  content: '\e90f';
}

Additional context

No response

jf908 avatar Jun 08 '22 16:06 jf908

I am looking for this myself now. I have a tree of checkboxes, so I need to show that a parent checkbox is neither selected nor unselected. (exactly like the PrimeVue TreeSelect component does)

It would be nice if the checkbox had a prop called indeterminate which gave it the horizontal line icon inside the checkbox.

<script setup>
import { reactive, ref } from 'vue';
import Checkbox from 'primevue/checkbox';

const some = reactive({
    field: false,
});

const isSomeIssue = ref(true);
</script>

<template>
    <Checkbox
        v-model="some.field"
        binary
        :indeterminate="isSomeIssue"
    />
</template>

This is how Oruga UI does it (https://oruga.io/components/checkbox.html).

agm1984 avatar Jul 14 '22 14:07 agm1984

Not a pretty solution but I worked around it for now by overriding the icon to a minus symbol in CSS

<TriStateCheckbox class="indeterminate" ... />
.indeterminate :deep(.pi-times:before) {
  content: '\e90f';
}

jf908 avatar Jul 14 '22 14:07 jf908

I think that's a good solution to sidestep the problem.

I was able to get my tree of checkboxes working with good UX without the indeterminate state. That is to say I'm too lazy to go back and refactor all my logic to see if I can add it. Yesterday I would have :)

agm1984 avatar Jul 14 '22 15:07 agm1984

This functionality will be added to the upcoming version.

tugcekucukoglu avatar Apr 05 '23 14:04 tugcekucukoglu