Nhảy tới nội dung

chip

Cập nhật lần cuối vào
  • chip là component trong tini-ui là thành phẩn nhỏ gọn diễn tả cho input, attribute, hoặc action.
  • Để sử dụng chip, bạn cần phải cài tini-ui từ version 0.2.1 trở lên.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
classNamestring''Custom class cho chip
stylestring''Style cho chip
contentstring''Text content của chip
activebooleanfalseNếu set true chip sẽ được active
suffixIconstring''suffixIcon của chip
suffixImagestring''suffixImage của chip
prefixIconstring''prefixIcon của chip
prefixIconstring''suffixIcon của chip
iconLeftColorstring'#1A94FF'suffixIcon của chip
iconRightColorstring'#1A94FF'suffixIcon của chip
disabledbooleanfalseNếu set true chip sẽ bị disabled
onClickevent() => voidTrigger function này khi click vào chip
onLeftClickevent() => voidTrigger function này khi click image/icon bên trái của chip
onRightClickevent() => voidTrigger function này khi click image/icon bên phải của chip

Sample Code

index.json
{
"defaultTitle": "Chip",
"usingComponents": {
"list-item": "@tiki.vn/tini-ui/es/list/list-item/index",
"chip": "@tiki.vn/tini-ui/es/chip/index",
"block-header": "components/block-header/index",
"block-variant": "components/block-variant/index"
}
}
index.txml
<template name="variant-format">
<block-variant header="Variant" title="1. Format"
description="Content only, Delete action, Custom icon, Icon & Image">
<view class="mt-medium">
<chip class="mt-medium" content="Content only" />
<chip class="mt-medium" content="With suffix/delete action" suffixIcon="close_glyph" />
<chip class="mt-medium" content="With suffix/custom icon" suffixIcon="close" iconRightColor="#808089" />
<chip class="mt-medium" content="With prefix/icon" prefixIcon="placeholder" iconLeftColor="#808089" />
<chip class="mt-medium" content="With prefix/image"
prefixImage="https://salt.tikicdn.com/ts/miniapp/0f/7f/84/5af725e8a6a55815a24e8e6935ef99e3.png"
iconLeftColor="#808089" />
</view>
</block-variant>
</template>

<template name="variant-state">
<block-variant title="2. State" description="Default, Hover, Disabled, Active, Active hover & Active disabled.">
<chip class="mt-medium" content="Default" suffixIcon="close_glyph" />
<chip class="mt-medium" content="Hover" suffixIcon="close_glyph" />
<chip class="mt-medium" content="Disabled" suffixIcon="close_glyph" iconRightColor="#A6A6B0" disabled="{{true}}" />
<chip class="mt-medium" content="Active" suffixIcon="close_glyph" active="{{true}}" />
<chip class="mt-medium" content="Active hover" suffixIcon="close_glyph" active="{{true}}" />
<chip class="mt-medium" content="Active disabled" suffixIcon="close_glyph" active="{{true}}" disabled="{{true}}"
iconRightColor="#A6A6B0" />
</block-variant>
</template>

<view class="page">
<block-header title="Usage" description="Chips are elements that represent an input, attribute, or action." />
<template is="variant-format" />
<template is="variant-state" />
</view>
index.js
Page({
onClick(event) {
console.log('onClick Chip', event);
},
onRightClick(event) {
console.log('onRightClick Image/Icon', event);
},
onLeftClick(event) {
console.log('onLeftClick Image/Icon', event);
}
});