@coveops/text-block
v2.0.3
Published
Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Downloads
4
Maintainers
Keywords
Readme
TextBlock
Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Getting Started
- Install the component into your project.
npm i @coveops/text-block
- Use the Component or extend it
Typescript:
import { TextBlock, ITextBlockOptions } from '@coveops/text-block';
Javascript
const TextBlock = require('@coveops/text-block').TextBlock;
- You can also expose the component alongside other components being built in your project.
export * from '@coveops/text-block'
- Or for quick testing, you can add the script from unpkg
<script src="https://unpkg.com/@coveops/text-block@latest/dist/index.min.js"></script>
Disclaimer: Unpkg should be used for testing but not for production.
- Include the component in your template as follows:
Place the component in your markup:
<div class="CoveoTextBlock"></div>
Options
The following options can be configured:
| Option | Required | Type | Default | Notes |
| --- | --- | --- | --- | --- |
| as
| No | string | p
| Type of element, i.e. h1
, p
, span
, etc. |
| ariaHidden
| No | boolean | true
| This sets the aria-hidden attribute to true
or false
. |
| overrideAriaHidden
| No | boolean | false
| This removes the aria-hidden attribute and allows for replacing it with another system, such as the .sr-only
class provided in the Bootstrap framework. |
| content
| No | string | label
| Content of the text block. |
| contentType
| No | string | | Specifies the content type of the text block. Preset values are header
or text
. You can pass your own contentType
and it will be treated as a class. By default, you have the text-block
class, which can be overriden. |
| constantlyVisible
| No | boolean | false
| Specifies whether the text block should be constantly visible in the UI, regardless of the result obtained from the query. Useful if you need a page header title. |
About the text-block
CSS class
No rules are directly applied to the .text-block
class. You may style it as you need it. However, here are the default styles:
.CoveoTextBlock{
background-color: #fff;
}
.CoveoTextBlock .text-block.header {
font-weight: bold;
}
.CoveoTextBlock .text-block.header,
.CoveoTextBlock .text-block.text {
white-space: normal;
}
@media screen and (max-device-width: 768px) {
.text-block.header,
.text-block.text {
padding: 5px 15px;
margin: 0px;
}
}
Extending
Extending the component can be done as follows:
import { TextBlock, ITextBlockOptions } from "@coveops/text-block";
export interface IExtendedTextBlockOptions extends ITextBlockOptions {}
export class ExtendedTextBlock extends TextBlock {}
Contribute
- Clone the project
- Copy
.env.dist
to.env
and update the COVEO_ORG_ID and COVEO_TOKEN fields in the.env
file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default. - Build the code base:
npm run build
- Serve the sandbox for live development
npm run serve