71 lines
2.1 KiB
Markdown
71 lines
2.1 KiB
Markdown
|
---
|
||
|
|
title: GradientEditorStop
|
||
|
|
description: Bezstanowy prymityw slotu dla jednego wiersza punktu zatrzymania gradientu.
|
||
|
|
---
|
||
|
|
|
||
|
|
# GradientEditorStop
|
||
|
|
|
||
|
|
`GradientEditorStop` to bezstanowy prymityw do renderowania i edycji jednego punktu zatrzymania gradientu.
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
<SdkPropsTable
|
||
|
|
:rows="[
|
||
|
|
{ name: 'stop', type: 'GradientStop', description: 'Bieżąca wartość punktu zatrzymania.', required: true },
|
||
|
|
{ name: 'index', type: 'number', description: 'Bieżący indeks punktu zatrzymania.', required: true },
|
||
|
|
{ name: 'active', type: 'boolean', description: 'Czy ten punkt zatrzymania jest aktywny.', required: true }
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
|
||
|
|
## Zdarzenia
|
||
|
|
|
||
|
|
<SdkEventsTable
|
||
|
|
:rows="[
|
||
|
|
{ name: 'select', payload: 'index: number', description: 'Emitowane gdy punkt zatrzymania jest zaznaczony.' },
|
||
|
|
{ name: 'updatePosition', payload: 'index: number, position: number', description: 'Emitowane gdy pozycja punktu zatrzymania się zmienia.' },
|
||
|
|
{ name: 'updateColor', payload: 'index: number, hex: string', description: 'Emitowane gdy kolor punktu zatrzymania się zmienia.' },
|
||
|
|
{ name: 'updateOpacity', payload: 'index: number, opacity: number', description: 'Emitowane gdy przezroczystość punktu zatrzymania się zmienia.' },
|
||
|
|
{ name: 'remove', payload: 'index: number', description: 'Emitowane gdy punkt zatrzymania jest usuwany.' }
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
|
||
|
|
## Sloty
|
||
|
|
|
||
|
|
<SdkSlotsTable
|
||
|
|
:rows="[
|
||
|
|
{ name: 'default', props: 'stan punktu zatrzymania + obsługa aktualizacji', description: 'Pełny kontrakt renderowania punktu zatrzymania gradientu.' }
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
|
||
|
|
### Właściwości slotu default
|
||
|
|
|
||
|
|
```ts
|
||
|
|
{
|
||
|
|
stop: GradientStop
|
||
|
|
index: number
|
||
|
|
active: boolean
|
||
|
|
positionPercent: number
|
||
|
|
opacityPercent: number
|
||
|
|
hex: string
|
||
|
|
css: string
|
||
|
|
select: () => void
|
||
|
|
updatePosition: (position: number) => void
|
||
|
|
updateColor: (hex: string) => void
|
||
|
|
updateOpacity: (opacity: number) => void
|
||
|
|
remove: () => void
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Przykład
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<GradientEditorStop :stop="stop" :index="index" :active="active" v-slot="ctx">
|
||
|
|
<MyGradientStopRow v-bind="ctx" />
|
||
|
|
</GradientEditorStop>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Powiązane API
|
||
|
|
|
||
|
|
- [GradientEditorRoot](./gradient-editor-root)
|
||
|
|
- [GradientEditorBar](./gradient-editor-bar)
|