@rn-components-kit/tag

Tag for categorizing or markup.

Usage no npm install needed!

<script type="module">
  import rnComponentsKitTag from 'https://cdn.skypack.dev/@rn-components-kit/tag';
</script>

README

Tag

NPM version

English | 中文

Tag for categorizing or markup. It supports the following features:

  • customize color
  • two types: outline and solid
  • closable and its callback

How to use

npm install @rn-components-kit/tag --save
Preview Code
Demo1 Code
Demo2 Code
Demo3 Code

Props

Reference

Props

style

Allow you to customize style

Type Required Default
object no -

text

Text inside tag to display

Type Required Default
string yes ''

type

Determines the tag's type (outline or solid)

Type Required Default
enum('outline', 'solid') no 'outline'

color

Determines the tag's color

Type Required Default
string no '#333'

fontSize

Determines the fontSize of tag's text

Type Required Default
number no 14

paddingHorizontal

Padding value in the horizontal orientation

Type Required Default
number no 4

paddingVertical

Padding value in the vertical orientation

Type Required Default
number no 1

borderRadius

Determines the border radius value of tag

Type Required Default
number no 3

borderColor

Color of tag's border. If it is not set, the default is the same as color

Type Required Default
string no -

animatedWhenDisappear

Determines whether an animation enabled when the tag is closed

Type Required Default
boolean no false

animationDuration

Determines how long the disappearing animation will take when tag is closed. (ms)

Type Required Default
number no 300

closable

Determines whether a tag can be closed

Type Required Default
boolean no false

onClose

(text: string) => void

A callback will be triggered when the tag is closed

Type Required Default
function no () => {}