উইজেট: নেভি বোতাম

<devsite-nav-buttons> কাস্টম উপাদান একটি ভিন্ন কোয়েরিস্ট্রিং পরামিতি সহ বর্তমান পৃষ্ঠাটি পুনরায় লোড করতে বোতামের একটি গ্রুপকে অনুমতি দেয়।

ডেমো

Java sample code

ব্যবহার

ব্যবহার করতে, একটি name বৈশিষ্ট্য সহ একটি <devsite-nav-buttons> উপাদান তৈরি করুন এবং এর মধ্যে বিভিন্ন value বৈশিষ্ট্য সহ একাধিক button উপাদান রাখুন। বোতামগুলির প্রতিটি গ্রুপের জন্য, উপাদানটিতে একটি default বৈশিষ্ট্য যোগ করে ডিফল্ট হিসাবে একটি নির্বাচন করুন।

<devsite-nav-buttons name="language">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

একটি মার্কডাউন ( .md ) ফাইলে, নিশ্চিত করুন যে কাস্টম উপাদানটি একটি আদর্শ HTML উপাদানের সাথে মোড়ানো হয়েছে, যেমন একটি section , div , বা p :

<div>
  <devsite-nav-buttons name="language">
    <button value="java" default>Java example</button>
    <button value="python">Python example</button>
    <button value="go">Go example</button>
  </devsite-nav-buttons>
</div>

তারপরে আপনি ডায়নামিক ট্যাগগুলি ব্যবহার করতে পারেন যা ব্যবহারকারীর কাছে কোন সামগ্রী প্রদর্শন করতে হবে তা নির্ধারণ করতে ক্যোয়ারী স্ট্রিং পরামিতিগুলি পরীক্ষা করে৷

{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}

একটি আইডির সাথে ইন-পেজ লিঙ্কিং

একটি সাধারণ নিয়ম হিসাবে, <devsite-nav-buttons> উপাদানটিকে পৃষ্ঠার শীর্ষের কাছে রাখা ভাল কারণ এর যেকোনো বোতামে ক্লিক করলে ব্যবহারকারী একটি নতুন URL-এ নিয়ে যায় এবং পৃষ্ঠাটি পুনরায় লোড করে৷ আপনি যদি একটি পৃষ্ঠার মাঝখানে উপাদানটি ব্যবহার করেন এবং/অথবা পৃষ্ঠায় উপাদানটির অবস্থান বুকমার্কযোগ্য হতে চান, তাহলে আপনাকে উপাদানটিতে একটি অনন্য id নির্দিষ্ট করতে হবে, যা URL-এ একটি নামযুক্ত অ্যাঙ্কর যুক্ত করবে এবং পৃষ্ঠাটিকে স্ক্রোল করবে পৃষ্ঠা লোড হলে উপাদানের অবস্থানে।

<devsite-nav-buttons name="language" id="code-examples">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

URL প্যারামিটার বিকল্প

ডিফল্টরূপে, ব্যবহারকারী একটি বোতামে ক্লিক করার পরে, বোতামের মান স্থানীয় স্টোরেজ এ সংরক্ষিত হয়। নির্বাচিত মানটি স্বয়ংক্রিয়ভাবে ঠিকানা বারে URL প্যারামিটার হিসাবে যুক্ত হয় অন্য পৃষ্ঠাগুলিতে <devsite-nav-buttons> উপাদানগুলির সাথে যেগুলি একই name এবং value ক্ষেত্রগুলি ব্যবহার করে৷

ডিফল্ট বোতামের জন্য URL প্যারামিটার সরান

ডিফল্ট আচরণ ওভাররাইড করতে এবং default বোতামটি ক্লিক করার সময় URL প্যারামিটারটি সরাতে, উপাদানটিতে param="reset" যোগ করুন:

<devsite-nav-buttons name="language" param="reset">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

ডিফল্ট বোতামের জন্য সর্বদা একটি URL প্যারামিটার প্রদর্শন করুন

যখন একজন ব্যবহারকারী প্রথমবার <devsite-nav-buttons> উপাদান সহ একটি পৃষ্ঠা পরিদর্শন করেন, তখন default বোতামটি হাইলাইট করা হয় এবং একটি বোতামে ক্লিক না করা পর্যন্ত ঠিকানা বারে কোন পরিবর্তন হয় না।

default বোতামের জন্য URL প্যারামিটারের সাথে ঠিকানা বার আপডেট করতে এবং <devsite-nav-buttons> উপাদান সহ পৃষ্ঠাগুলিতে সর্বদা একটি URL প্যারামিটার আছে তা নিশ্চিত করতে, উপাদানটিতে param="always" যোগ করুন:

<devsite-nav-buttons name="language" param="always">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

বোতাম স্টাইলিং

ডিফল্টরূপে, <devsite-nav-buttons> উপাদানের মধ্যে থাকা বোতামগুলিতে "চিপ" স্টাইলিং থাকে। বোতামগুলির চাক্ষুষ প্রভাব বাড়াতে বা কমাতে, আপনি filled বা text মান সহ একটি type বৈশিষ্ট্য যুক্ত করতে পারেন, যা প্রতিটি button উপাদানকে স্টাইল করবে।

type="filled" সহ বোতাম স্টাইলিং:

<devsite-nav-buttons name="language" type="filled">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

type="text" সহ বোতাম স্টাইলিং:

<devsite-nav-buttons name="language" type="text">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>