Select

অনুলিপি করতে ক্লিক করুন

পূর্বনির্ধারিত বিকল্পগুলি নির্বাচন করতে উপাদান নির্বাচন করুন।


প্রাথমিক সেটিংস

Mode - ড্রপডাউন থেকে একাধিক বিকল্প নির্বাচন করতে সক্ষম হওয়ার জন্য একাধিক নির্বাচন করুন। অন্যথায়, একক মোড ব্যবহার করা উচিত।


দেখুন এবং অনুভব করুন সেটিংস

কম্পোনেন্টের লেবেল দেখানোর জন্য Label (অবশ্যক নয়) ব্যবহার করা হবে।

Placeholder (বাধ্যতামূলক নয়) উপাদানটির স্থানধারক দেখানোর জন্য ব্যবহার করা হবে।

Name (বাধ্যতামূলক) - উপাদানের নাম।

Size (বাধ্যতামূলক) - উপাদানের আকার। কম্পোনেন্ট তৈরি হলে ডিফল্টে সেট করা হয়।

Search (বাধ্যতামূলক) - উপলব্ধ ড্রপডাউন বিকল্পগুলির মধ্যে অনুসন্ধান করতে সক্ষম হতে। ডিফল্টরূপে বন্ধ করা হয়.

Clear icon (আবশ্যিক) - সক্রিয় থাকলে পরিষ্কার বিকল্প আইকন দেখায়। ডিফল্টরূপে বন্ধ করা হয়.

Disabled (আবশ্যিক) - চালু থাকলে উপাদানটিকে অক্ষম করে তোলে। ডিফল্টরূপে বন্ধ করা হয়.

Visible (বাধ্যতামূলক) - চালু থাকলে উপাদানটিকে দৃশ্যমান করে তোলে। ডিফল্টরূপে সক্রিয়.


অপশন

কম্পোনেন্ট সেটিংসে বিকল্প নির্বাচন করুন পূর্বনির্ধারিত হতে পারে।


ওয়ার্কফ্লো ট্রিগার

  • onChange - ড্রপডাউন বিকল্প পরিবর্তন করা হলে ফায়ার হয়।
  • onFocus - যখন সিলেক্ট কম্পোনেন্ট ফোকাস করা হয় তখন ফায়ার হয়।
  • onBlur - যখন সিলেক্ট কম্পোনেন্ট ঝাপসা হয় তখন ফায়ার হয়।
  • onCreate - যখন উপাদান তৈরি হয় তখন আগুন লাগে।
  • onDestroy - যখন উপাদানটি দেখানো হয় তখন আগুন লাগে।

কম্পোনেন্ট অ্যাকশন

Select Get Properties

উপাদান এর বৈশিষ্ট্য পায়.

ইনপুট পরামিতি:

  • Component Id [string] - উপাদানের শনাক্তকারী নির্বাচন করুন;

আউটপুট পরামিতি:

  • Label [string] - উপাদানের লেবেল;
  • Placeholder [string] - উপাদানের স্থানধারক;
  • Allow Clear [boolean] - সত্য হলে নির্বাচন পরিষ্কার করার অনুমতি দেয়;
  • Disable [boolean ] - সত্য হলে উপাদান নিষ্ক্রিয় করে;
  • Tooltip [string] - টুলটিপ স্ট্রিং;
  • Required Mark [boolean] - সত্য হলে প্রয়োজনীয় চিহ্ন দেখায়;
  • Debounce (ms) [integer] - মান যাচাই করতে বিলম্ব;
  • Options [Select Option array] - পূর্বনির্ধারিত নির্বাচন বিকল্পগুলির একটি অ্যারে;
  • Selected [Select Option array] - নির্বাচিত বিকল্পগুলির একটি অ্যারে বা একক মোডের ক্ষেত্রে একক উপাদান সহ একটি অ্যারে;
  • ভ্যালিডেট Validate Icon [boolean] - আইকনটি ভ্যালিডেট দ্য ভ্যালুতে দেখানো হবে;
  • ভ্যালিডেট Validate Status [Status type] - ভ্যালিডেট দ্য ভ্যালুতে দেখানো স্ট্যাটাস;
  • ভ্যালিডেট Validate Message [string] - ভ্যালিডেট দ্য ভ্যালুতে দেখানো বার্তা;

Select Get Properties

Select Set Properties

কম্পোনেন্টের বৈশিষ্ট্য সেট করে।

ইনপুট পরামিতি:

  • Component Id [string] - উপাদানের শনাক্তকারী নির্বাচন করুন;
  • Label [string] - উপাদানের লেবেল;
  • Placeholder [string] - উপাদানের স্থানধারক;
  • Allow Clear [boolean] - সত্য হলে নির্বাচন পরিষ্কার করার অনুমতি দেয়;
  • Disable [boolean] - সত্য হলে উপাদান নিষ্ক্রিয় করে;
  • Tooltip [string] - টুলটিপ স্ট্রিং;
  • Required Mark [boolean] - সত্য হলে প্রয়োজনীয় চিহ্ন দেখায়;
  • Debounce (ms ) [integer] - মান যাচাই করতে বিলম্ব;
  • Options [Select Option array] - পূর্বনির্ধারিত নির্বাচন বিকল্পগুলির একটি অ্যারে;
  • ভ্যালিডেট Validate Icon [boolean] - আইকনটি ভ্যালিডেট দ্য ভ্যালুতে দেখানো হবে;
  • ভ্যালিডেট Validate Status [Status type] - ভ্যালিডেট দ্য ভ্যালুতে দেখানো স্ট্যাটাস;
  • ভ্যালিডেট Validate Message [string] - ভ্যালিডেট দ্য ভ্যালুতে দেখানো বার্তা;

Select Set Properties

আপডেট বৈশিষ্ট্য নির্বাচন করুন

কম্পোনেন্টের বৈশিষ্ট্য আপডেট করে।

ইনপুট পরামিতি:

  • Component Id [string] - উপাদানের শনাক্তকারী নির্বাচন করুন;
  • Label [string] - উপাদানের লেবেল;
  • Placeholder [string] - উপাদানের স্থানধারক;
  • Allow Clear [boolean] - সত্য হলে নির্বাচন পরিষ্কার করার অনুমতি দেয়;
  • Disable [boolean] - সত্য হলে উপাদান নিষ্ক্রিয় করে;
  • Tooltip [string] - টুলটিপ স্ট্রিং;
  • Required Mark [boolean] - সত্য হলে প্রয়োজনীয় চিহ্ন দেখায়;
  • Debounce (ms ) [integer] - মান যাচাই করতে বিলম্ব;
  • Options [Select Option array] - পূর্বনির্ধারিত নির্বাচন বিকল্পগুলির একটি অ্যারে;
  • ভ্যালিডেট Validate Icon [boolean] - আইকনটি ভ্যালিডেট দ্য ভ্যালুতে দেখানো হবে;
  • ভ্যালিডেট Validate Status [Status type] - ভ্যালিডেট দ্য ভ্যালুতে দেখানো স্ট্যাটাস;
  • ভ্যালিডেট Validate Message [string] - ভ্যালিডেট দ্য ভ্যালুতে দেখানো বার্তা;

Select Update Properties

Make Select Option

প্রদত্ত ক্ষেত্রগুলির সাথে নির্বাচন করুন বিকল্প মডেল রচনা করে।

ইনপুট পরামিতি:

  • ID [integer] - বিকল্প আইডি নির্বাচন করুন;
  • Label [string] - বিকল্পের লেবেল নির্বাচন করুন;
  • Value [integer] - ড্রপডাউন তালিকায় বিকল্পের অর্ডার মান নির্বাচন করুন;
  • Icon [string] - নির্বাচন বিকল্প আইটেমে ব্যবহার করা আইকন;
  • Disabled [boolean] - সত্য হলে নির্বাচন বিকল্পটি নিষ্ক্রিয় করে;

আউটপুট পরামিতি:

  • Select Option [Select Option] - বিকল্প মডেল নির্বাচন করুন;

Make Select Option

Expand Select Option

নির্বাচন বিকল্প মডেল প্রসারিত করে।

ইনপুট পরামিতি:

  • Select Option [Select Option] - বিকল্প মডেল নির্বাচন করুন;

আউটপুট পরামিতি:

  • ID [integer] - বিকল্প আইডি নির্বাচন করুন;
  • Label [string] - বিকল্পের লেবেল নির্বাচন করুন;
  • Value [integer] - ড্রপডাউন তালিকায় বিকল্পের অর্ডার মান নির্বাচন করুন;
  • Icon [string] - নির্বাচন বিকল্প আইটেমে ব্যবহার করা আইকন;
  • Disabled [boolean] - সত্য হলে নির্বাচন বিকল্পটি নিষ্ক্রিয় করে;

Expand Select Option


ব্যবহারের উদাহরণ

ফ্রন্টএন্ড ব্যবসায়িক প্রক্রিয়ার মাধ্যমে ড্রপডাউন তালিকায় নতুন নির্বাচন বিকল্প আইটেমগুলি রচনা করা এবং যুক্ত করা সম্ভব।

যুক্তি নিম্নলিখিত হওয়া উচিত:

  • নির্দিষ্ট ক্ষেত্রগুলির সাথে একটি নতুন নির্বাচন বিকল্প আইটেম রচনা করুন ( Make Select Option )

  • বিদ্যমান Select Option আইটেম অ্যারে পান ( Select Get Properties ) এবং এটিকে আগে তৈরি করা নির্বাচন বিকল্প আইটেমের সাথে মার্জ করুন ( Append Array যুক্ত করুন )

  • নির্দিষ্ট নির্বাচন উপাদানের জন্য নির্বাচন বিকল্প আইটেম অ্যারে ( Select Update Properties ) আপডেট করুন