Slug — نامک

Slug برای ساختن آدرس یکتای محتوا است: مقاله، پروژه، صفحهٔ محصول. کاربر عنوان را می‌نویسد و نامک همان لحظه ساخته می‌شود؛ اگر نامک با داده‌های سرور تکراری باشد، همان‌جا خبر داده می‌شود. اگر فقط متن آزاد لازم است، از Input استفاده کنید.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/controls/slug/کپی کد

import { Slug } from '@tokapps/tuk/controls';

نمونهٔ زنده

قواعد تبدیل

• حروف لاتین بزرگ به کوچک تبدیل می‌شوند.
• فاصله و نشانه‌ها (_کپی کد، !کپی کد، /کپی کد و…) به -کپی کد تبدیل می‌شوند و خط‌های تکراری یکی می‌شوند.
• حروف و ارقام فارسی حفظ می‌شوند.
• هنگام تایپ، خط ابتدا و انتها نگه داشته می‌شود تا کلمهٔ بعدی ادامه پیدا کند؛ هنگام ترک فیلد حذف می‌شود.
• طول تا maxLengthکپی کد (پیش‌فرض ۶۴) بریده می‌شود.

کد قابل کپی

تبدیل ساده

import { useState } from 'react';import { Slug } from '@tokapps/tuk/controls';const [slug, setSlug] = useState('');<Slug label="نامک" description="حروف کوچک، فاصله به «-»" value={slug} onChange={setSlug} />

استعلام آزادی از وب‌سرویس

import type { SlugAvailability } from '@tokapps/tuk/controls';async function checkAvailability(slug: string, signal: AbortSignal): Promise<SlugAvailability> {  const res = await fetch(`/api/slugs/check?slug=${encodeURIComponent(slug)}`, { signal });  if (!res.ok) throw new Error('check failed');  return res.json(); // { available: boolean, suggestion?: string }}<Slug label="آدرس صفحه" value={slug} onChange={setSlug} checkAvailability={checkAvailability} />

اتصال به عنوان

const [title, setTitle] = useState('');const [slug, setSlug] = useState('');<Input label="عنوان" value={title} onChange={setTitle} /><Slug label="نامک" value={slug} onChange={setSlug} sourceValue={title} checkAvailability={checkAvailability} />

تا وقتی کاربر نامک را دستی تغییر نداده، با هر تایپ در عنوان نامک هم ساخته می‌شود. بعد از ویرایش دستی، دکمهٔ «بازتولید از عنوان» برای برگشت ظاهر می‌شود.

متن‌های سفارشی و سقف طول کوتاه‌تر

<Slug  label="شناسهٔ محصول"  maxLength={24}  value={slug}  onChange={setSlug}  checkAvailability={checkAvailability}  labels={{ available: 'شناسه آزاد است', taken: 'این شناسه گرفته شده', suggestion: 'شناسهٔ پیشنهادی: {slug}' }}/>

همهٔ پیکربندی‌ها

حالت‌ها

نکات پیاده‌سازی

• checkAvailabilityکپی کد را ثابت نگه دارید (بیرون از رندر یا با useCallbackکپی کد)؛ کامپوننت آن را از ref می‌خواند، پس تابع inline باعث استعلام‌های تکراری نمی‌شود، ولی بهتر است تابع پایدار باشد.
• استعلام فقط برای نامک غیرخالی و پس از debounceMsکپی کد بی‌تغییر اجرا می‌شود.
• پاسخ قدیمی وقتی نامک عوض شده نادیده گرفته می‌شود.
• اعتبارسنجی نهایی سمت سرور همچنان لازم است؛ استعلام لحظه‌ای فقط راهنمای کاربر است.

دسترس‌پذیری و RTL

• برچسب و توضیح به فیلد متصل‌اند؛ وضعیت استعلام با aria-live="polite"کپی کد اعلام می‌شود.
• رنگ تنها نشانه نیست؛ همه‌جا آیکون و متن هم هست.
• نامک همیشه چپ‌به‌راست نمایش داده می‌شود تا -کپی کد و ترتیب حروف درست بماند.
• دکمه‌ها حداقل ۴۴px و فوکوس مرئی دارند.