arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 02:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Checkbox/Progress/RadioGroup/Slider/Switch): add black color

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-16 13:10:49 +02:00
parent 633a39452a
commit 08c91fe8f1
16 changed files with 203 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
playground/pages/checkbox.vue
View File

@@ -14,7 +14,8 @@ const checked = ref(false)
<UCheckbox label="Indeterminate" indeterminate />
<UCheckbox label="Required" required />
<UCheckbox label="Disabled" disabled />
<UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
<UCheckbox label="Black" color="black" :default-value="true" />
<UCheckbox label="Icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
</div>
<div class="flex items-center gap-4 mr-[-11px]">
<UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />

3
playground/pages/progress.vue
View File

@@ -33,7 +33,8 @@ onMounted(() => {
<div class="flex flex-col gap-8 items-center">
<div class="flex flex-col gap-4 w-48">
<UProgress />
<UProgress color="green" />
<UProgress color="black" />
<UProgress color="red" />
<UProgress animation="carousel-inverse" />
<UProgress animation="swing" />
<UProgress animation="elastic" />

3
playground/pages/radio-group.vue
View File

@@ -27,7 +27,8 @@ const itemsWithDescription = [
<URadioGroup :items="items" default-value="1" />
<URadioGroup :items="literalOptions" />
<URadioGroup :items="items" label="Disabled" disabled />
<URadioGroup :items="items" color="red" default-value="1" />
<URadioGroup :items="items" color="black" default-value="1" />
<URadioGroup :items="items" color="red" default-value="2" />
<URadioGroup :items="items" orientation="horizontal" class="ml-[-91px]" />
</div>

13
playground/pages/slider.vue
View File

@@ -7,28 +7,29 @@ const value = ref(50)
</script>
<template>
<div class="flex flex-col gap-4 items-center">
<div class="flex flex-col gap-4 w-48">
<div class="flex flex-col gap-6 items-center">
<div class="flex flex-col gap-6 w-48">
<USlider v-model="value" />
<USlider :default-value="100" />
<USlider color="green" />
<USlider inverted />
<USlider disabled />
<USlider color="black" :model-value="50" />
<USlider color="red" :model-value="50" />
<USlider :min="4" :max="12" :step="2" :model-value="6" />
</div>
<div class="flex flex-col gap-4 w-48">
<div class="flex flex-col gap-6 w-48">
<USlider :default-value="[0, 20]" />
<USlider :model-value="[0, 20]" />
<USlider :model-value="[0, 20, 80]" />
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" />
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-6">
<USlider v-for="size in sizes" :key="size" v-model="value" :size="(size as any)" class="w-48" />
</div>
<div class="h-48 flex items-center gap-8">
<div class="h-48 flex items-center gap-6">
<USlider :model-value="[0, 20, 80]" orientation="vertical" />
<USlider v-model="value" orientation="vertical" />
<USlider :model-value="[0, 80]" :min-steps-between-thumbs="20" orientation="vertical" />

2
playground/pages/switch.vue
View File

@@ -13,6 +13,8 @@ const checked = ref(false)
<USwitch label="Default value" :default-value="true" />
<USwitch label="Required" required />
<USwitch label="Disabled" disabled />
<USwitch color="black" label="Black" :default-value="true" />
<USwitch color="red" label="Red" :default-value="true" />
</div>
<div class="flex items-center gap-4 ml-[-82px]">
<USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />