Chevron

Component source on Github This page on Github

Reference

base"chevron"
String
Base name used to style component
clockwisefalse
Boolean
Rotate chevron clockwise. Default is counter clockwise
iconempty string
String
Name of the icon to use instead of default chevron
initial"down"
String
Initial direction of the chevron. Valid values are: 'down', 'left' ,'right' and 'up'
mod-chevronempty string
String
Style of the chevron element
nameempty string
String
Name of the component
rotate-90false
Boolean
If true rotates chevron by 90 degrees. Default is 180 degrees
switchfalse
Boolean
Flick this to rotate the chevron to initial/rotated position
trianglefalse
Boolean
Use filled triangle instead of chevron
variantempty string
String
Active variant of the element mod-* props

Notes

v-chevron is a simple component that renders chevron, triangle or any other icon and rotates them depending on the value of the switch prop. It is used internally by dropdown, collapse etc.

Example

right
false
false
false
false
    <template>
  <v-button>
    Button
    <v-chevron
      :initial="example.initial"
      :rotate90="example.rotate90"
      :triangle="example.triangle"
      :clockwise="example.clockwise"
      :switch="example.switch"
      mod-chevron="variant:right"
    />
  </v-button>

</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";

let example = reactive({
  initial: "right",
  rotate90: false,
  triangle: false,
  clockwise: false,
  switch: false,
});
</script>