Note

This documentation describes the v-neos-style Vue directive for native UI views. For Xml templates see style.

v-neos-style

Applies visual design tokens (color, background, border, typography, shadow) to any element as CSS custom properties.

Import

import { NeosStyle } from '@neos/design-system'

Syntax

<div v-neos-style:[arg]="value" />

Arguments & Values

Argument	Value type	Description
`color`	`string`	Text color (CSS color or design token)
`background-color`	`string`	Background color
`border-color`	`string`	Border color
`corner-radius`	`string`	Border radius (e.g. `'4px'`, `'50%'`)
`font-size`	`string`	Font size (e.g. `'14px'`, `'1rem'`)
`font-weight`	`string`	Font weight (`'normal'`, `'bold'`, `'600'`)
`font-style`	`string`	Font style (`'normal'`, `'italic'`)
`text-decoration`	`string`	Text decoration (`'none'`, `'underline'`, `'line-through'`)
`text-align`	`string`	Text alignment (`'left'`, `'center'`, `'right'`)
`shadow-color`	`string`	Box shadow color
`hover:color`	`string`	Text color on hover
`hover:background-color`	`string`	Background color on hover
`hover:border-color`	`string`	Border color on hover

Usage Examples

Colored status badge

<Badge
  :value="item.status"
  v-neos-style:background-color="item.statusColor"
  v-neos-style:color="'white'"
/>

Highlighted card

<Card
  v-neos-style:border-color="item.isOverdue ? 'red' : undefined"
  v-neos-style:background-color="item.isOverdue ? '#fff0f0' : undefined"
>
  {{ item.name }}
</Card>

Custom typography

<Text v-neos-style:font-size="'18px'" v-neos-style:font-weight="'600'" v-neos-style:color="'#333'">
  Section Title
</Text>

Hover effect

<div
  v-neos-style:hover:background-color="'#f0f4ff'"
  style="cursor: pointer; padding: 8px; border-radius: 4px"
>
  Click me
</div>

Table of Contents