chip
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ừ version0.2.1
trở lên.
Quét mã để trải nghiệm
Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/form/chip/index
Xem code mẫu trên Tini Studiohttps://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/advance/form/chip/index
Demo
Trải nghiệm thử với trình giả lập bên dưới
Cài đặt tini-ui
:
$> yarn add @tiki.vn/tini-ui
Thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị mặc định | Mô tả |
---|---|---|---|
className | string | '' | Custom class cho chip |
style | string | '' | Style cho chip |
content | string | '' | Text content của chip |
active | boolean | false | Nếu set true chip sẽ được active |
suffixIcon | string | '' | suffixIcon của chip |
suffixImage | string | '' | suffixImage của chip |
prefixIcon | string | '' | suffixIcon của chip |
iconLeftColor | string | '#1A94FF' | suffixIcon của chip |
iconRightColor | string | '#1A94FF' | suffixIcon của chip |
disabled | boolean | false | Nếu set true chip sẽ bị disabled |
onClick | event | () => void | Trigger function này khi click vào chip |
onLeftClick | event | () => void | Trigger function này khi click image/icon bên trái của chip |
onRightClick | event | () => void | Trigger 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);
}
});