Docs Components Assistant

DirectiveText

React example follows below.
ts
import { DirectiveText } from "@grassroot/ui-react/assistant";
export default function DirectiveTextDemo() {
return <DirectiveText type="theme" label="Midnight" name="midnight" />;
}
ts
<script setup lang="ts">
import { DirectiveText } from "@grassroot/ui-vue/assistant";
</script>
<template>
<DirectiveText type="theme" label="Midnight" name="midnight" />
</template>
ts
import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDirectiveText } from "@grassroot/ui-angular/assistant";
@Component({
selector: "app-directive-text-demo",
standalone: true,
imports: [GrassrootDirectiveText],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<grassroot-directive-text type="theme" label="Midnight" name="midnight" />`,
})
export class DirectiveTextDemoComponent {
}
export default DirectiveTextDemoComponent;
ts
<script lang="ts">
import { DirectiveText } from "@grassroot/ui-svelte/assistant";
</script>
<DirectiveText type="theme" label="Midnight" name="midnight" />
ts
/** @jsxImportSource solid-js */
import { DirectiveText } from "@grassroot/ui-solid/assistant";
export default function DirectiveTextDemo() {
return <DirectiveText type="theme" label="Midnight" name="midnight" />;
}

Installation

API Reference

Import

import { DirectiveText } from "@grassroot/ui-react/assistant";

Props

Prop
Type
Default
Requirement
value
string | undefined
—
optional
type
string | undefined
—
optional
label
string | undefined
—
optional
name
string | undefined
—
optional
Prop
value
Type
string | undefined
Default
—
Requirement
optional
Prop
type
Type
string | undefined
Default
—
Requirement
optional
Prop
label
Type
string | undefined
Default
—
Requirement
optional
Prop
name
Type
string | undefined
Default
—
Requirement
optional

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { DirectiveText } from "@grassroot/ui-vue/assistant";

Props

Prop
Type
Default
Requirement
value
string
—
optional
type
string
"directive"
optional
label
string
—
optional
name
string
—
optional
Prop
value
Type
string
Default
—
Requirement
optional
Prop
type
Type
string
Default
"directive"
Requirement
optional
Prop
label
Type
string
Default
—
Requirement
optional
Prop
name
Type
string
Default
—
Requirement
optional

Import

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDirectiveText } from "@grassroot/ui-angular/assistant";

Props

Prop
Type
Default
Requirement
value
string
—
optional
type
string
"directive"
optional
label
string
—
optional
name
string
—
optional
Prop
value
Type
string
Default
—
Requirement
optional
Prop
type
Type
string
Default
"directive"
Requirement
optional
Prop
label
Type
string
Default
—
Requirement
optional
Prop
name
Type
string
Default
—
Requirement
optional

Import

import { DirectiveText } from "@grassroot/ui-svelte/assistant";

Props

Prop
Type
Default
Requirement
value
string
—
optional
type
string
"directive"
optional
label
string
"Directive"
optional
name
string
—
optional
class
string
—
optional
style
string
—
optional
Prop
value
Type
string
Default
—
Requirement
optional
Prop
type
Type
string
Default
"directive"
Requirement
optional
Prop
label
Type
string
Default
"Directive"
Requirement
optional
Prop
name
Type
string
Default
—
Requirement
optional
Prop
class
Type
string
Default
—
Requirement
optional
Prop
style
Type
string
Default
—
Requirement
optional

Import

import { DirectiveText } from "@grassroot/ui-solid/assistant";

Props

Prop
Type
Default
Requirement
value
string
—
optional
type
string
—
optional
label
string
—
optional
name
string
—
optional
Prop
value
Type
string
Default
—
Requirement
optional
Prop
type
Type
string
Default
—
Requirement
optional
Prop
label
Type
string
Default
—
Requirement
optional
Prop
name
Type
string
Default
—
Requirement
optional

Content regions

  • children

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.