بیایید یک ورودی برچسب ایجاد کنیم!
آن را به صورت زنده ببینید و کد را دریافت کنید
چگونه می توانیم از ورودی های برچسب در UIS خود استفاده کنیم و چرا به آنها نیاز داریم
ورودی های برچسب یک راه عالی برای افزودن برچسب به یک لیست هستند. آنها در بسیاری از برنامه های کاربردی مختلف مانند رسانه های اجتماعی استفاده می شوند تا به کاربران اجازه دهند برچسب های جدیدی را به یک پست اضافه کنند.
مزایای ورودی برچسب:
- استفاده و درک آنها آسان است
- آنها را می توان برای مطابقت با نیازهای برنامه سفارشی کرد
- می توان از آنها برای افزودن برچسب به لیست استفاده کرد
- می توان از آنها برای فیلتر کردن محتوا استفاده کرد
- می توان از آنها برای جستجوی محتوا استفاده کرد
- می توان از آنها برای ایجاد یک ابر برچسب استفاده کرد
- می توان از آنها برای ایجاد یک سیستم پیشنهاد برچسب استفاده کرد
- می توان از آنها برای ایجاد یک سیستم تکمیل خودکار برچسب استفاده کرد
بیایید یک ورودی برچسب ایجاد کنیم
ساختار ورودی برچسب
بخش مهم کد
- این
x-dataویژگی برای تعریف داده های جزء استفاده می شود - این
x-forاز ویژگی برای حلقه زدن در میان استفاده می شودtagsآرایه - این
:keyویژگی برای شناسایی منحصر به فرد هر آیتم در حلقه استفاده می شود - این
x-textاز ویژگی برای نمایش مقدار the استفاده می شودtagمتغیر - این
@clickویژگی برای افزودن یک تگ جدید بهtagsآرایه زمانی که کاربر روی دکمه بستن کلیک می کند
توجه داشته باشید: کلاس ها برای وضوح حذف می شوند.
<div
x-data="{
tags: [],
addTag(tag) {
if (tag.trim() !== '') {
this.tags.push(tag.trim());
}
},
removeTag(index) {
this.tags.splice(index, 1);
}
}">
<!-- Tag Input -->
<div
class="w-full"
x-data="{ newTag: '', tags: [] }">
<!-- Input Field -->
<input
x-model="newTag"
@keydown.enter.prevent="
if (newTag.trim() !== '') {
tags.push(newTag.trim());
newTag = '';
}
"
type="text"
placeholder="..."
/>
<!-- Tags will be added here -->
<div>
<template
x-for="(tag, index) in tags"
:key="index">
<div
>
<span x-text="tag"></span>
<button
@click="tags.splice(index, 1)"
class="ml-2">
<!--- Close Icon goes here -->
</button>
</div>
</template>
</div>
</div>
</div>
امیدوارم از این آموزش لذت برده باشید.
