@dotsearch/element

این پکیج، مجموعه‌ای از المنت‌های جذاب و آماده برای استفاده در پروژه‌های وب است 😄✨. با استفاده از فریمورک استنسیل، این المنت‌ها تولید شده‌اند 🎨🛠️. شما با افزودن این المنت‌ها به پروژه خود، با کد کم و سریع، می‌توانید به راحتی از دات سرچ استفاده کنید 🚀💫.

نصب

برای نصب این پکیج، می‌توانید از دستور زیر استفاده کنید:

npm i @dotsearch/element

یا اگر از یارن استفاده می‌کنید:

yarn add @dotsearch/element

یا اگر با مرورگر هستید و می‌خواهید از CDN استفاده کنید:

<script type="module" src="https://cdn.jsdelivr.net/npm/@dotsearch/element"></script>

استفاده

برای استفاده از المنت‌های این پکیج، می‌توانید از کد زیر استفاده کنید:

import '@dotsearch/element';

برای دریافت توکن از دات سرچ، می‌توانید به این صفحه مراجعه کنید.

کامپوننت ها

در این بخش، می‌توانید کامپوننت‌های موجود در این پکیج را مشاهده کنید.

کامپوننت جستجو

این کامپوننت برای جستجو در دات سرچ استفاده می‌شود. شما می‌توانید با استفاده از کد زیر، این کامپوننت را به صفحه خود اضافه کنید:

<dotsearch-autocomplete></dotsearch-autocomplete>

پارامترها

این کامپوننت دارای چندین پارامتر است که می‌توانید از آن‌ها برای تنظیمات مختلف استفاده کنید. در زیر، این پارامترها را مشاهده می‌کنید: | نام پارامتر | نوع پارامتر | توضیحات | | token | string | توکن دات سرچ شما | | placeholder | string | متن پیش‌فرض جستجو | | fuzziness | number | استفاده از فازینس برای یافتن دیتا با غلط املایی که شما فقط می توانید 0 یا 1 یا 2 وارد کنید |

اسلات ها

شما می تونید از اسلات های زیر برای تغییر ظاهر کامپوننت استفاده کنید: اگر می خواهید نوع دیتای خاص خود رو شخصی سازی کنید به این شکل می توانید از اسلات استفاده کنید:

<template slot="dotsearch-DATA_TYPE"> </template>

شما یک اسلات تمپلیت به نام dotsearch-DATA_TYPE می سازید. (نوع دیتا تایپ رو توی ثبت اپ شما مشخص کرده اید) برای چاپ دیتا شما باید از این شکل استفاده کنید: شروع رو با #DOTSEARCH و بعد نوع دیتا رو می نویسید و بعد متغیری که می خواهید چاپ بشه. به طور مثال :

<template slot="dotsearch-product">
  <a href="#DOTSEARCH-PRODUCT-LINK" target="_blank" style="display: flex; flex-wrap: nowrap; align-items: center; gap: 10px">
    <img src="#DOTSEARCH-PRODUCT-THUMBNAIL" width="32px" height="32px" />
    <span style="font-size: 14px">#DOTSEARCH-PRODUCT-NAME</span>
  </a>
</template>

به این موارد توجه کنید :

1. از تگ template استفاده کنید
2. نام گذاری اسلات ها باید به این شکل باشه : dotsearch-DATA_TYPE
3. برای چاپ یک دیتا از این شکل استفاده کنید : #DOTSEARCH-DATA_TYPE-KEY
4. حتما برای چاپ متغیر از حروف بزرگ استفاده کنید