VueVentus DocsVueVentusSpinningMark Component
The VueVentusSpinningMark Component provides an <svg> component of the VueVentus logo text's freely scalable geometry as a group. You can therefore influence the SVGs shapes by using Tailwind classes in the .fill-[colorKey]-[keyValue] format such as .fill-gray-900 and dark:fill-gray-100, etc.
Import
To import the VueVentusSpinningMark Component:
import { VueVentusSpinningMark } from '@obewds/vueventus'Prop: animationClass
Type: String
Default: "animate-spin-reverse-4s"
The VueVentusSpinningMark Component animationClass prop sets a component instance's output <svg> animation class if the component prop for enableAnimation is also true for the component instance.
Syntax
<VueVentusSpinningMark
animation-class="animate-spin-reverse"
class="w-16"
:enable-animation="true"
/>Result
Prop: enableAnimation
Type: Boolean
Default: true
The VueVentusSpinningMark Component enableAnimation prop determines if the component instance's animationClass prop classes are applied to the output <svg> element.
Syntax
<VueVentusSpinningMark
animation-class="animate-spin-reverse"
class="w-16"
:enable-animation="false"
/>Result
Prop: enableClassFills
Type: Boolean
Default: true
The VueVentusSpinningMark Component enableClassFills prop determines if the component applies optional Tailwind CSS classes to determine the output <svg> element fill colors instead of the fill color code props.
Syntax
<VueVentusSpinningMark
class="w-16"
:enable-class-fills="false"
/>Result
Prop: fillOne
Type: String
Default: "#41b883"
The VueVentusSpinningMark Component fillOne prop sets the color code for two of the four mark shapes.
Syntax
<VueVentusSpinningMark
fill-one="#666"
fill-two="#999"
class="w-16"
/>Result
Prop: fillOneClasses
Type: String
Default: "fill-emerald-500"
The VueVentusSpinningMark Component fillOneClasses prop sets the color class value for two of the four mark shapes.
Syntax
<VueVentusSpinningMark
:enable-class-fills="true"
fill-one-classes="fill-emerald-500"
fill-two-classes="fill-cyan-500"
class="w-16"
/>Result
Prop: fillTwo
Type: String
Default: "#2298bd"
The VueVentusSpinningMark Component fillTwo prop sets the color code for the other two of the four mark shapes that the fillOne prop doesn't cover.
Syntax
<VueVentusSpinningMark
fill-one="#666"
fill-two="#999"
class="w-16"
/>Result
Prop: fillTwoClasses
Type: String
Default: "fill-cyan-500"
The VueVentusSpinningMark Component fillTwoClasses prop sets the color class value for the other two of the four mark shapes.
Syntax
<VueVentusSpinningMark
:enable-class-fills="true"
fill-one-classes="fill-emerald-500"
fill-two-classes="fill-cyan-500"
class="w-16"
/>Result
Slot: None
NO SLOT AVAILABLE
The VueVentusSpinningMark Component does not have Vue slot option, because the component outputs a static <svg> element that can be controlled via Tailwind CSS classes - especially .fill-[colorKey]-[keyValue] classes like .fill-green-600 and dark:fill-green-400 in the example above.