Docs Components Assistant

QuoteBlock

React example follows below.
ts
import { QuoteBlock } from "@grassroot/ui-react/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";
export default function QuoteBlockDemo() {
return <QuoteBlock quote={assistantDemoQuote} />;
}
ts
<script setup lang="ts">
import { QuoteBlock } from "@grassroot/ui-vue/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";
</script>
<template>
<QuoteBlock :quote="assistantDemoQuote" />
</template>
ts
import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootQuoteBlock } from "@grassroot/ui-angular/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";
@Component({
selector: "app-quote-block-demo",
standalone: true,
imports: [GrassrootQuoteBlock],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<grassroot-quote-block [quote]="quote" />`,
})
export class QuoteBlockDemoComponent {
protected readonly quote = assistantDemoQuote;
}
export default QuoteBlockDemoComponent;
ts
<script lang="ts">
import { QuoteBlock } from "@grassroot/ui-svelte/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";
</script>
<QuoteBlock quote={assistantDemoQuote} />
ts
/** @jsxImportSource solid-js */
import { QuoteBlock } from "@grassroot/ui-solid/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";
export default function QuoteBlockDemo() {
return <QuoteBlock quote={assistantDemoQuote} />;
}

Installation

API Reference

Import

import { QuoteBlock } from "@grassroot/ui-react/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
quote
string | AssistantQuote
required
onRemove
(() => void) | undefined
optional
Prop
quote
Type
string | AssistantQuote
Default
Requirement
required
Prop
onRemove
Type
(() => void) | undefined
Default
Requirement
optional

Events

EventPayload
onRemove(() => void) | undefined

Native attributes

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

Import

import { QuoteBlock } from "@grassroot/ui-vue/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
quote
AssistantQuote | string
required
Prop
quote
Type
AssistantQuote | string
Default
Requirement
required

Events

EventPayload
remove() => void

Content regions

  • default

Import

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

Props

Prop
Type
Default
Requirement
quote
AssistantQuote | string
required
Prop
quote
Type
AssistantQuote | string
Default
Requirement
required

Events

EventPayload
removevoid

Import

import { QuoteBlock } from "@grassroot/ui-svelte/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
quote
AssistantQuote | string
required
onRemove
() => void
optional
class
string
optional
style
string
optional
Prop
quote
Type
AssistantQuote | string
Default
Requirement
required
Prop
onRemove
Type
() => void
Default
Requirement
optional
Prop
class
Type
string
Default
Requirement
optional
Prop
style
Type
string
Default
Requirement
optional

Events

EventPayload
onRemove() => void

Content regions

  • children

Import

import { QuoteBlock } from "@grassroot/ui-solid/assistant";
import { assistantDemoQuote } from "@grassroot/demo-fixtures";

Props

Prop
Type
Default
Requirement
quote
AssistantQuote | string
required
onRemove
() => void
optional
Prop
quote
Type
AssistantQuote | string
Default
Requirement
required
Prop
onRemove
Type
() => void
Default
Requirement
optional

Events

EventPayload
onRemove() => void

Content regions

  • children

Native attributes

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