52 lines
1.3 KiB
Markdown
52 lines
1.3 KiB
Markdown
|
---
|
||
|
|
title: FillRoot
|
||
|
|
description: Headless fill category state and conversion actions.
|
||
|
|
---
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import ColorFillDemo from '#vue/primitives/Fill/demo/ColorFillDemo.vue'
|
||
|
|
import { data } from './fill-root.data'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
# FillRoot
|
||
|
|
|
||
|
|
`FillRoot` owns solid, gradient, and image category state without owning a popover or visual swatch.
|
||
|
|
Compose it around the picker surface appropriate for your application.
|
||
|
|
|
||
|
|
<ColorFillDemo />
|
||
|
|
|
||
|
|
Its default slot exposes the current fill, category, transparency, swatch background, and grouped
|
||
|
|
conversion actions. Category changes emit immutable `Fill` values and are no-ops when the requested
|
||
|
|
category is already active.
|
||
|
|
|
||
|
|
```vue twoslash
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import type { Fill } from '@open-pencil/scene-graph'
|
||
|
|
import { FillRoot } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const fill = ref<Fill>({
|
||
|
|
type: 'SOLID',
|
||
|
|
color: { r: 0.2, g: 0.5, b: 0.9, a: 1 },
|
||
|
|
opacity: 1,
|
||
|
|
visible: true
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<FillRoot :fill="fill" @update="fill = $event" v-slot="model">
|
||
|
|
<button @click="model.actions.toGradient">Gradient</button>
|
||
|
|
</FillRoot>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Generated API reference
|
||
|
|
|
||
|
|
<SdkComponentAPI :components="data.components" />
|
||
|
|
|
||
|
|
## Related APIs
|
||
|
|
|
||
|
|
- [FillSwatch](./fill-swatch)
|
||
|
|
- [ChannelSlider](./channel-slider)
|
||
|
|
- [useColorModel](../composables/use-color-model)
|