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

Added customClass attribute to node using which value-labels styles can be customized #277

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

tirthGajjar
Copy link

I came across requirement of having customizable different colors for each value-label in multiselect.

Currently the value-label slot allows to change the label but the background color and other styles are defined from the parent of that slot.

This configuration will allow developers to add custom styles to value-labels in the node attributes itself.

You can define the styles for value-label in any CSS classes then
You can apply the styles by assigning those class values in customClass key in any node

Note: This is an optional attribute, not providing this value in any node will follow the default styles

.....
 options: [ {
        id: 'fruits',
        label: 'Fruits with custom colors',
        customLabel: 'Fruits 🍎 🍇 🍐 🍓 🍉', 
        customClass: 'fruit-yellow',
        children: [ {
          id: 'apple',
          label: 'Apple 🍎',
          customLabel:'🍎',
          customClass: 'fruit-red',
        }, {
          id: 'grapes',
          label: 'Grapes 🍇',
          customLabel:'🍇',
          customClass: 'fruit-green',
        } ]
      } ]
.....

<style lang="less">
	.fruit-yellow {
		background-color: yellow;
		color: black;
	}
	
	.fruit-red {
		background-color: red;
		color: white;
	}
	
	.fruit-green {
		background-color: green;
		color: white;
	}
</style>

.....

Preview

customize-value-label-style

@codecov
Copy link

codecov bot commented Aug 3, 2019

Codecov Report

Merging #277 into master will increase coverage by 0.00%.
The diff coverage is 75.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #277   +/-   ##
=======================================
  Coverage   97.86%   97.87%           
=======================================
  Files          27       27           
  Lines        1030     1033    +3     
  Branches      101      102    +1     
=======================================
+ Hits         1008     1011    +3     
  Misses          9        9           
  Partials       13       13           
Impacted Files Coverage Δ
src/components/MultiValueItem.vue 87.50% <50.00%> (+1.78%) ⬆️
src/mixins/treeselectMixin.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d4943eb...ca38070. Read the comment docs.

@riophae riophae force-pushed the master branch 2 times, most recently from 86e8d8f to 4a62c56 Compare August 11, 2019 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant