I made a colorpicker #1650
brandosius
started this conversation in
Showcase
I made a colorpicker
#1650
Replies: 4 comments 2 replies
-
|
@brandosius thanks for sharing! Be sure to select showcase in future, not feature requests for things like this. I've updated it for you. Thanks! |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Nice, I created one using the main Flux colors: 
It also uses this css (#1365) for easily setting the accent color. @php $popoverLabel ??= $attributes->pluck('popover:label'); @endphp
@props([
'colors' => null,
'description' => null,
'label' => null,
'popoverLabel' => 'Choose color',
'toggeable' => true,
'solid' => true,
'name' => $attributes->whereStartsWith('wire:model')->first(),
])
@php
$classes = Flux::classes()->add('');
$options = [
'red',
'orange',
'amber',
'yellow',
'lime',
'green',
'emerald',
'teal',
'cyan',
'sky',
'blue',
'indigo',
'violet',
'purple',
'fuchsia',
'pink',
'rose',
//'slate',
//'gray',
//'zinc',
//'neutral',
//'stone'
];
$options = $colors ?? $options;
@endphp
<div x-data="{
color: null,
solid: {{ filter_var($solid, FILTER_VALIDATE_BOOLEAN) ? 'true' : 'false' }},
set data(value){
if (typeof value === 'string' && value.length > 0) {
let parts = value.split(' ')
if (parts.length > 1) {
this.color = parts[1]
this.solid = parts[0]
} else {
this.color = value
this.solid = false
}
}
},
get data() {
return this.color ? ((this.solid ? 'solid ' : '' ) + this.color ) : ''
}
}"
{{ $attributes->only(['wire:model', 'wire:model.live']) }}
x-modelable="data"
>
<flux:field>
<?php if ($label): ?>
<flux:label>{{ $label }}</flux:label>
<?php endif; ?>
<?php if ($description): ?>
<flux:description>{{ $description }}</flux:description>
<?php endif; ?>
<flux:dropdown {{ $attributes->merge(['class' => $classes ])->except(['wire:model', 'wire:model.live', 'popoverLabel', 'label']) }} >
<flux:button class="flex-col ps-2! pe-2! gap-0!">
<flux:icon icon="tabler.color-picker" variant="outline" />
<div x-bind:accent="solid ? 'solid '+color : color" class="bg-accent h-1 w-full rounded-full"></div>
</flux:button>
<flux:popover class="space-y-2">
<flux:radio.group label="{{ $popoverLabel }}" x-model="color" variant="cards" :indicator="false" class="grid grid-cols-5 gap-1">
@foreach($options as $color)
<div x-bind:accent="solid ? 'solid {{ $color }}' : '{{ $color }}'" :key="'picker-'.$color">
<flux:radio size="sm" label="" value="{{ $color }}" class="border-accent-content bg-accent! not-data-checked:opacity-60 not-data-checked:scale-85 not-data-checked:hover:opacity-100 not-data-checked:hover:scale-95 transition-all" />
</div>
@endforeach
</flux:radio.group>
@if($toggeable)
<flux:separator variant="subtle" />
<flux:switch x-bind:checked="solid" x-model="solid" label="Solid colors"/>
@endif
</flux:popover>
</flux:dropdown>
<flux:error :$name />
</flux:field>
</div> |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Where can I find this in the docs? Can you guide me on how to set this up inside my project? @mauritskorse @brandosius |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
These are things we built ourselves as there is no native Flux color picker component (yet). (That's why these are posted in the Showcase category) You can just create a new blade file and copy the code @brandosius or me posted into that and you should be good to go. In case you use my code, you should probably change the icon (as I use tabler.iconpicker) and add the css I posted in #1365 into your project also. Or you should adjust the code a bit using <flux:accent :color="$color" :key="'picker-'.$color">
<flux:radio size="sm" label="" value="{{ $color }}" class="border-accent-content bg-accent! not-data-checked:opacity-60 not-data-checked:scale-85 not-data-checked:hover:opacity-100 not-data-checked:hover:scale-95 transition-all" />
</flux:accent>Note that |
Beta Was this translation helpful? Give feedback.
-
|
Use
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
This modified version of @Uhasith +makes multiple selections of colours |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi all,
I made a colorpicker. Copy it to a file named colorpicker/index.blade.php and call it with:
<flux:colorpicker label="color" wire:model.live="color"/>
Have fun!
Beta Was this translation helpful? Give feedback.
All reactions