https://github.com/rwu823/riot-hi-text

The highlight text compontent for Riot.js
https://github.com/rwu823/riot-hi-text

Last synced: about 1 month ago
JSON representation

The highlight text compontent for Riot.js

• Host: GitHub
• URL: https://github.com/rwu823/riot-hi-text
• Owner: rwu823
• License: mit
• Created: 2015-08-24T14:02:32.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T11:58:42.000Z (about 1 year ago)
• Last Synced: 2024-09-18T10:54:26.709Z (3 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# The highlight text component for Riot.js

## Installation

	npm ins --save-dev riot-hi-text

## Examples

### Basic

Import script, the standalone script files are in the `dist` .

```html

```

Webpack or Browserify:

```js

require('riot-hi-text')

```

Create tags

```html

	Hello highlight text!!!!

```

```js

require('riot-hi-text')

var hiTextTags = riot.mount('hi-text')

hiTextTags.forEach(function(tag){

	tag.setHighlight('h')

})

```

yield: 

every `h` will warp with ``

```html

	Hello highlight text!!!!

```

## Dynamic

```html

	{text}

	this.tags['hi-text'].text = 'hello hi text!!'

```

## Options

`opts['class-name']`

Custom class name, default is `highlight`

```html

```

`opts['case-sensitive'] `

Match word with case sensitive. default is `false`

```html

```

equal to

```html

```

## API

### setHighlight(word, [case_sensitive = false])

Set highlight with `word`

### clean()

Clean all highlight.

### hasMatched

`true` or `false`, change everytime after invoking  `setHighlight()`

## Asynchronous

```html

	{text}

	var tag = this

	$.ajax({

		url: '/api/case'

	})

	.done(function(data){

		tag.tags['h1-text'].text =  data

		tag.tags['h1-text'].update()

		tag.tags['h1-text'].setHeightlight('hi')

	})

```

## With chain

The API all return tag instance itself, so you can chain the method

```js

tag

	.clean()

	.setHighlight('Hi')

```