422f83331f
- Add accessible OkHCL channel sliders and use Reka ColorSlider for standard color channels - Split fill state and binding-aware swatches from application popover composition - Add keyboard-operable gradient stops, shared demos, generated docs, and focused coverage
49 lines
1.4 KiB
Markdown
49 lines
1.4 KiB
Markdown
---
|
|
title: FillSwatch
|
|
description: Binding-aware semantic preview for solid, gradient, and image fills.
|
|
---
|
|
|
|
<script setup lang="ts">
|
|
import ColorFillDemo from '#vue/primitives/Fill/demo/ColorFillDemo.vue'
|
|
import { data } from './fill-swatch.data'
|
|
</script>
|
|
|
|
# FillSwatch
|
|
|
|
`FillSwatch` exposes a semantic preview for a fill without imposing application styling. Its slot
|
|
provides the effective fill, preview background, category, and transparency state. The root also
|
|
publishes `data-fill-type`, `data-fill-category`, and `data-transparent` for styling and tests.
|
|
|
|
When nested in `BindableValueRoot<Color>`, a bound solid fill previews the provider's resolved color
|
|
and forwards the binding state attributes. Reading or focusing a swatch never detaches the binding.
|
|
Consumers can place a checkerboard below the slot's `background` value for transparent paints.
|
|
|
|
```vue twoslash
|
|
<script setup lang="ts">
|
|
import type { Fill } from '@open-pencil/scene-graph'
|
|
import { FillSwatch } from '@open-pencil/vue'
|
|
|
|
const fill: Fill = {
|
|
type: 'SOLID',
|
|
color: { r: 0.2, g: 0.5, b: 0.9, a: 0.5 },
|
|
opacity: 1,
|
|
visible: true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FillSwatch :fill="fill" label="Brand fill" v-slot="swatch">
|
|
<span :style="{ background: swatch.background }" />
|
|
</FillSwatch>
|
|
</template>
|
|
```
|
|
|
|
## Generated API reference
|
|
|
|
<SdkComponentAPI :components="data.components" />
|
|
|
|
## Related APIs
|
|
|
|
- [FillRoot](./fill-root)
|
|
- [BindableValue](./bindable-value)
|