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.