OOUI/Concepts/bn

This page is a translated version of the page OOUI/Concepts and the translation is 56% complete.

Outdated translations are marked like this.

Certain core ideas or similar configuration options are shared by various elements/widgets that are not directly related. This page documents some of them.

Overlays

Elements of certain widgets are positioned outside of normal flow, "on top of" everything else on the page, their dimensions constrained only by the browser viewport – for example, PopupButtonWidget 's popup, or DropdownWidget 's menu.

However, limitations of CSS occasionally prevent this. উদাহরণস্বরূপ:

যদি উইজেটটি একটি স্ট্যাকিং প্রসঙ্গ (রুটটি ব্যতীত) এর মধ্যে স্থাপন করা হয়, যেমন তৈরি করা হয় z-index প্রপার্টি ব্যবহার করে, সেই স্ট্যাকিং কনটেক্সটের বাইরে পপআপ "উপরে" কন্টেন্ট প্রদর্শন করা সম্ভব নয়।
যদি উইজেটটি একটি স্ক্রোলযোগ্য এলাকার মধ্যে স্থাপন করা হয়, যা overflow বৈশিষ্ট্য ব্যবহার করে তৈরি করা হয়, তাহলে পপআপের জন্য তার মাত্রার বাইরে প্রসারিত করা সম্ভব নয়।
- বিশেষ ক্ষেত্রে: যদি উইজেটটি একটি OOUI ডায়ালগ-এর ভিতরে রাখা হয়।

এটি এড়ানোর জন্য, আপনি একটি "ওভারলে" নির্দিষ্ট করতে পারেন ($overlay কনফিগারেশন বিকল্প ব্যবহার করে যার ভিতরে পপআপ স্থাপন করা হবে (উইজেটের ভিতরে থাকার পরিবর্তে) । ওভারলে হল একটি ডিওএম উপাদান যা প্রভাবিত এলাকার বাইরে থাকা উচিত, যার ফলে এর বিষয়বস্তু পছন্দসই উপায়ে স্থাপন করা যায়।

বেশিরভাগ ক্ষেত্রে, ওভারলে এমন একটি উপাদান হওয়া উচিত যা ‎<body> এর সরাসরি সন্তান। (বডি ব্যবহার করাও সমর্থিত, কিন্তু সুপারিশ করা হয় না কারণ এটি সেখানে পপআপগুলি কী ঢোকিয়েছে তার উপর নজর রাখা কঠিন করে তোলে। আপনি OO.ui.getDefaultOverlay()-এর মাধ্যমে স্বয়ংক্রিয়ভাবে এই ধরনের উপাদান তৈরি করতে true পাস করতে পারেন। ডায়ালগের ভিতরের উপাদানগুলির জন্য, আপনার ডায়ালগের this.$overlay বৈশিষ্ট্যটি ব্যবহার করা উচিত।

উইজেট এবং $overlay কনফিগারেশন বিকল্প সমর্থনকারী অন্যান্য উপাদানগুলির মধ্যে রয়েছে:

PopupButtonWidget
LookupElement
CapsuleMultiselectWidget
ComboBoxInputWidget
DropdownWidget
FieldLayout
FieldsetLayout

Example

এই উদাহরণে, একটি ডায়ালগের ভিতরে দুটি প্রায় অভিন্ন পপআপ বোতাম স্থাপন করা হয়। একমাত্র পার্থক্য হল একটি ওভারলে নির্দিষ্ট করা বা না করা। (বয়লারপ্লেট কোড সম্পর্কে আরো বিস্তারিত জানার জন্য OOUI/Windows/Dialogs এবং OOUI/উইজেট/বোতাম এবং সুইচ#পপআপ বোতাম পড়ুন।)

function MyDialog( config ) {
	MyDialog.super.call( this, config );
}

OO.inheritClass( MyDialog, OO.ui.Dialog );
MyDialog.static.name = 'myDialog';
MyDialog.static.title = 'Simple dialog';

MyDialog.prototype.initialize = function () {
	MyDialog.super.prototype.initialize.call( this );

	var popupButton1 = new OO.ui.PopupButtonWidget( {
			label: 'Popup button (without $overlay)',
			popup: {
				$content: $( '<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>' ),
				padded: true
			}
		} ),
		popupButton2 = new OO.ui.PopupButtonWidget( {
			$overlay: this.$overlay,
			label: 'Popup button (with $overlay)',
			popup: {
				$content: $( '<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>' ),
				padded: true
			}
		} ),

		panel = new OO.ui.PanelLayout( {
			padded: true,
			expanded: false
		} );

	panel.$element.append( popupButton1.$element, popupButton2.$element );
	this.$body.append( panel.$element );
};

MyDialog.prototype.getBodyHeight = function () {
	return 100;
};

var windowManager = new OO.ui.WindowManager();
$( document.body ).append( windowManager.$element );
windowManager.addWindows( [ new MyDialog() ] );
windowManager.openWindow( 'myDialog' );

প্রথম বোতামের পপআপ ডায়ালগের মাত্রার বাইরে প্রসারিত হতে পারে না, এর একটি ছোট অংশ প্রদর্শিত হয় এবং সম্পূর্ণ বিষয়বস্তু দেখতে এর জন্য স্ক্রোলিং প্রয়োজন। দ্বিতীয় বোতামের পপআপ সম্পূর্ণরূপে প্রদর্শিত হতে পারে।