انتخاب تام
انتخاب ابتدایی

کامپوننت "انتخاب ابتدایی" یک گزینه ساده از لیست را برای انتخاب از میان گزینه‌ها فراهم می‌کند. این یک عنصر رابط کاربری ابتدایی برای جمع‌آوری ورودی کاربر در یک فرم با گزینه‌های متعدد است.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTag!-- BEGIN: انتخاب ابتدایی --HTMLCloseTag
                                                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagپایهHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                                        HTMLOpenTagselect data-placeholder="انتخاب بازیگر مورد علاقه شما" class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoption value="1"HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="2"HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="3"HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="4"HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="5"HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: انتخاب ابتدایی --HTMLCloseTag
                                                HTMLOpenTag!-- BEGIN: تودرتو انتخاب --HTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTaglabelHTMLCloseTagتودرتوHTMLOpenTag/labelHTMLCloseTag
                                                    HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                                        HTMLOpenTagselect data-placeholder="انتخاب بازیگر مورد علاقه شما" class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoptgroup label="بازیگران مرد آمریکایی"HTMLCloseTag
                                                                HTMLOpenTagoption value="1"HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="2"HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="3"HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="4"HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="5"HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTag/optgroupHTMLCloseTag
                                                            HTMLOpenTagoptgroup label="بازیگران زن آمریکایی"HTMLCloseTag
                                                                HTMLOpenTagoption value="6"HTMLCloseTagاسکارلت جوهانسونHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="7"HTMLCloseTagجسیکا آلباHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="8"HTMLCloseTagجنیفر لارنسHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="9"HTMLCloseTagایما استونHTMLOpenTag/optionHTMLCloseTag
                                                                HTMLOpenTagoption value="10"HTMLCloseTagآنجلینا جولیHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTag/optgroupHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag!-- END: تودرتو انتخاب --HTMLCloseTag
            
        

کامپوننت "انتخاب ابتدایی" یک راه ساده برای ادغام منوهای کشویی در برنامه وب یا اپلیکیشن شما فراهم می‌کند. با دنبال کردن مراحل بالا، می‌توانید به آسانی منوهای کشویی را ایجاد و سفارشی کنید تا ورودی کاربر را جمع‌آوری کنید یا از فهرستی از گزینه‌ها انتخاب کنید.

انتخاب چندگانه

مؤلفه "انتخاب چندگانه" به کاربران اجازه می‌دهد تا یک عنصر رابط کاربری چندمنظوره را انتخاب کنند که اغلب در صورتی که کاربران نیاز به انتخاب گزینه‌های چندگانه داشته باشند، مورد استفاده قرار می‌گیرد، مانند انتخاب چند مورد از یک لیست گزینه‌های موجود. اجزای "انتخاب چندگانه" با استفاده از یک راه‌حل آسان و کاربرپسند، کاربران را قادر می‌سازد تا گزینه‌های چندگانه را از یک لیست موجود انتخاب کنند.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagselect data-placeholder="انتخاب بازیگر مورد علاقه شما" multiple="multiple" class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoption
                                                        value="1"
                                                        selected
                                                    HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="2"HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption
                                                        value="3"
                                                        selected
                                                    HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="4"HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="5"HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
            
        

مؤلفه "انتخاب چندگانه" با استفاده از تامانتخاب قابل تنظیم است و می‌تواند به موارد استفاده مختلف در وب‌سایت شما راحتی و کاربرپسند برای کاربران ارائه دهد.

سربرگ

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagselect data-placeholder="انتخاب بازیگر مورد علاقه شما" data-header="بازیگران" multiple="multiple" class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoption value="1"HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption
                                                        value="2"
                                                        selected
                                                    HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption
                                                        value="3"
                                                        selected
                                                    HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="4"HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption
                                                        value="5"
                                                        selected
                                                    HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
            
        

با اضافه کردن یک سربرگ به اجزای "تامانتخاب" خود می‌توانید متن کناری ارزشمند و گروه‌بندی برای گزینه‌ها در داخل منوی کشویی فراهم کنید. این کار باعث ارتقای تجربه کاربری می‌شود و به کاربران کمک می‌کند تا انتخاب‌های آگاهانه‌تری داشته باشند. می‌توانید عنوان سربرگ را برای تطابق با نیازها و طراحی برنامه‌ی خود سفارشی‌سازی کنید. کتابخانه "تامانتخاب" افزونه‌های مختلفی را برای گسترش عملکرد ورودی‌های انتخابی شما ارائه می‌دهد.

گروه ورودی

اجزای "تامانتخاب"، در کنار یک گروه ورودی، به شما امکان می‌دهد تا یک ورودی انتخابی شیک و کارآمد را با یک آیکون یا کاراکتر سفارشی پیش از آن ایجاد کنید. این زمانی مفید است که می‌خواهید زمینه اضافی را به ورودی انتخابی فراهم کنید.

کد / پیش‌نمایش نمونه
@
            
                HTMLOpenTagdiv class="flex"HTMLCloseTag
                                                    HTMLOpenTagdiv class="flex"HTMLCloseTag
                                                        HTMLOpenTagdiv
                                                            class="z-30 rtl:-ml-1 ltr:-mr-1 flex w-10 items-center justify-center rtl:rounded-r ltr:rounded-l border bg-slate-100 text-slate-600 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400"HTMLCloseTag
                                                            @
                                                        HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagselect class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoption value="1"HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="2"HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="3"HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="4"HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                            HTMLOpenTagoption value="5"HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

ترکیب اجزای "تامانتخاب" با یک گروه ورودی به شما امکان می‌دهد تا ورودی انتخابی با آیکون یا کاراکتر شخصی سازی شده قبل از آن ایجاد کنید. این ویژگی واسط کاربر و یک نمایش بصری منحصر به فرد برای ورودی انتخابی شما فراهم می‌کند، که آن را بیشتر کاربرپسند و جذاب می‌کند. نمایش برای ورودی انتخابی شما، که آن را بیشتر کاربرپسند و جذاب تر می‌کند.

غیرفعال

اجزای "تامانتخاب" به راحتی قابل پیکربندی برای غیرفعال‌سازی هستند، که این کار کاربران را از تعامل با آن جلوگیری می‌کند. این ویژگی زمانی مفید است که می‌خواهید یک ورودی انتخابی را نمایش دهید که توسط کاربر تغییر یافته یا انتخاب نشده است.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagselect disabled="disabled" class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoption value="1"HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="2"HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="3"HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="4"HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="5"HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
            
        

اجزای "تامانتخاب" به راحتی با تنظیم ویژگی غیرفعال به درستی می‌توانند غیرقابل انتخاب و جلوگیری از تعامل کاربر. این ویژگی به خصوص زمانی مفید است که می‌خواهید یک ورودی انتخابی را نمایش دهید که فقط برای موارد اطلاعاتی است و توسط کاربران انتخاب نشود. شما می‌توانید ظاهر و محتوای "تامانتخاب" غیرفعال شده را به نیازها و طراحی برنامه خود تنظیم کنید. آن را به برنامه خود اضافه کنید تا یک واسط کاربرپسند و قابل دسترسی ایجاد کنید. و نباید توسط کاربران تغییر یابد. شما می‌توانید ظاهر و محتوای "تامانتخاب" غیرفعال را سفارشی کنید تا با سبک و طرح برنامه‌ی شما همخوانی داشته باشد. آن را در برنامه‌ی خود به عنوان نیازهای خود، به طوری که یک رابط کاربری کاربرپسند و قابل دسترسی ایجاد شود. رابط کاربری کاربرپسند و قابل دسترس.

غیرفعال گزینه

اجزای "تامانتخاب" به شما امکان می‌دهند که ورودی‌های انتخابی با گزینه‌های غیرفعال ایجاد کنید. گزینه‌های غیرفعال می‌توانند زمینه‌های اضافی ارائه دهند یا گزینه‌هایی را که توسط کاربران قابل دسترسی نیستند، نشان دهند. این می‌تواند برای ارائه زمینه‌های اضافی یا نمایش گزینه‌هایی که توسط کاربران قابل دسترسی نیستند در داخل یک ورودی انتخابی مفید باشد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagselect class="tom-select w-full"HTMLCloseTag
    HTMLOpenTagoption
                                                        value="1"
                                                        disabled
                                                    HTMLCloseTagلئوناردو دی‌کاپریوHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="2"HTMLCloseTagجانی دپHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="3"HTMLCloseTagرابرت داونی‌ جونیورHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption
                                                        value="4"
                                                        disabled
                                                    HTMLCloseTagساموئل ال. جکسونHTMLOpenTag/optionHTMLCloseTag
                                                    HTMLOpenTagoption value="5"HTMLCloseTagمورگان فریمنHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
            
        

اجزای "تامانتخاب" به شما امکان می‌دهند که گزینه‌های غیرفعال را در داخل ورودی انتخابی قرار دهید. این گزینه‌های غیرفعال می‌توانند اطلاعات اضافی ارائه دهند یا گزینه‌هایی که در حال حاضر در دسترس نیستند را نمایش دهند. می‌توانید از گزینه‌های غیرفعال برای ارائه اطلاعات اضافی یا نمایش گزینه‌هایی که در حال حاضر در دسترس نیستند استفاده کنید.

رابط اجزاء

در این بخش، اطلاعات جزئی در مورد ویژگی‌ها، کلاس‌ها و گزینه‌های موجود که می‌توانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

تامانتخاب
پراپ (Prop) نوع (Type) شرح
`value` `string` یا `string[]` مقدار(های) انتخاب شده در اجزای تامانتخاب.
`onOptionAdd` `(value: string) => void` یک تابع فراخوانی که هنگام اضافه شدن یک گزینه فراخوانی می شود.
`onChange` `(value: `string` or `string[]`) => void` تابع بازخوانی که هنگامی که selected تغییر می‌کند.
`options` `TomSettings` گزینه‌های پیکربندی تامانتخاب.
`getRef` `(el: TomSelectElement) => void` یک تابع که یک مرجع به عنصر ورودی تامانتخاب.