BlogPlaygroundOne

VPieSegment API

ads via vuetify

Props
name
type
default
active
boolean

false

Controls the active state of the item. This is typically used to highlight the component.

animation
  | boolean
  | {
      duration: number
      easing:
        | 'linear'
        | 'easeInQuad'
        | 'easeOutQuad'
        | 'easeInOutQuad'
        | 'easeInCubic'
        | 'easeOutCubic'
        | 'easeInOutCubic'
        | 'easeInQuart'
        | 'easeOutQuart'
        | 'easeInOutQuart'
        | 'easeInQuint'
        | 'easeOutQuint'
        | 'easeInOutQuint'
        | 'instant'
    }

false

Controls duration and easing of the expand/collapse and hover effect. Defaults to easeInOutCubic over 400ms.

color
string

undefined

Sets segment color to be passed straight to CSS style attribute.

gap
string | number

undefined

Reduces segment size by a specified angle. Recommended to in range (0-10).

hide-slice
boolean

false

Makes inner slice invisible instead of semi-transparent.

hover-scale
string | number

0.05

Reduces outer radius until segment is hovered. Expects fraction value (0-0.25)

inner-cut
string | number

undefined

Sets inner slice size in percent (0-100).

pattern
string

undefined

Decal pattern to put on top of the outer slice.

reveal
boolean | { duration: number }

false

Enables and controls duration for initial reveal animation. Easing function is shared with animation prop.

rotate
string | number

undefined

Sets segment offset angle.

rounded
string | number

undefined

Number passed as corner radius relative to 100x100 SVG viewport

value
number

0

The value used for calculate segment/arc angle size.

Events
name
type
update:active
[boolean]

Emitted when the segment’s active (hovered) state changes.

Slots
never
default

The default Vue slot.