VueVentus DocsObeKnockoutMark Component
The ObeKnockoutMark Component provides an <svg> component of the OBE (Online Business Engineering) Knockout Mark artwork. You can therefore customize 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 ObeKnockoutMark Component:
import { ObeKnockoutMark } from '@obewds/vueventus'Prop: blueFill
Type: String
Default: "fill-lightBlue-400"
The ObeKnockoutMark Component blueFill prop sets the component instance SVG fill color for the blue mark shape(s).
Syntax
<ObeKnockoutMark blue-fill="fill-gray-400" class="w-24 mx-auto"/>Result
Prop: greenFill
Type: String
Default: "fill-green-400"
The ObeKnockoutMark Component greenFill prop sets the component instance SVG fill color for the green mark shape(s).
Syntax
<ObeKnockoutMark green-fill="fill-gray-400" class="w-24 mx-auto"/>Result
Prop: orangeFill
Type: String
Default: "fill-orange-400"
The ObeKnockoutMark Component orangeFill prop sets the component instance SVG fill color for the orange mark shape(s).
Syntax
<ObeKnockoutMark orange-fill="fill-gray-400" class="w-24 mx-auto"/>Result
Prop: redFill
Type: String
Default: "fill-red-400"
The ObeKnockoutMark Component redFill prop sets the component instance SVG fill color for the red mark shape(s).
Syntax
<ObeKnockoutMark red-fill="fill-gray-400" class="w-24 mx-auto"/>Result
Prop: yellowFill
Type: String
Default: "fill-yellow-400"
The ObeKnockoutMark Component yellowFill prop sets the component instance SVG fill color for the yellow mark shape(s).
Syntax
<ObeKnockoutMark yellow-fill="fill-gray-400" class="w-24 mx-auto"/>Result
Slot: None
NO SLOT AVAILABLE
The ObeKnockoutMark 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 etc.