বোতাম

বাটন হলো এমন একটি মৌলিক উপাদান যা ব্যবহারকারীকে একটি নির্দিষ্ট কাজ সম্পাদন করতে সাহায্য করে। পাঁচ ধরনের বাটন রয়েছে। এই সারণিতে পাঁচ ধরনের বাটনের প্রত্যেকটির চেহারা এবং কোথায় সেগুলো ব্যবহার করা উচিত তা বর্ণনা করা হয়েছে:

প্রকার চেহারা উদ্দেশ্য
ভরা নিরেট পটভূমিতে বৈসাদৃশ্যপূর্ণ লেখা। উচ্চ-গুরুত্বপূর্ণ বাটন। এগুলো অ্যাপ্লিকেশনের প্রধান কাজগুলোর জন্য ব্যবহৃত হয়, যেমন 'সাবমিট' এবং 'সেভ'। শ্যাডো ইফেক্টটি বাটনটির গুরুত্বকে তুলে ধরে।
ভরাট টোনাল পৃষ্ঠতলের সাথে সামঞ্জস্য রেখে পটভূমির রঙ পরিবর্তিত হয়। এছাড়াও প্রাথমিক বা গুরুত্বপূর্ণ কাজগুলোর জন্য। ভরাট রঙের বাটনগুলো আরও বেশি দৃষ্টি আকর্ষণ করে এবং 'অ্যাড টু কার্ট' ও 'সাইন ইন'-এর মতো ফাংশনগুলোর জন্য উপযুক্ত।
উন্নত ছায়া থাকার কারণে এটি আলাদাভাবে চোখে পড়ে। টোনাল বাটনের মতোই কাজ করে। বাটনটিকে আরও সুস্পষ্টভাবে দেখানোর জন্য এর উচ্চতা বাড়ানো হয়।
রূপরেখা এর একটি বর্ডার রয়েছে, কিন্তু তাতে কোনো ফিল নেই। মাঝারি গুরুত্বের বাটন, যেগুলিতে এমন সব কাজ থাকে যা গুরুত্বপূর্ণ কিন্তু প্রধান নয়। এগুলি অন্যান্য বাটনের সাথে ভালোভাবে কাজ করে 'বাতিল' বা 'ফিরে যান'-এর মতো বিকল্প, গৌণ কাজ নির্দেশ করতে।
পাঠ্য কোনো ব্যাকগ্রাউন্ড বা বর্ডার ছাড়া টেক্সট প্রদর্শন করে। কম গুরুত্বপূর্ণ বাটন, যা নেভিগেশনাল লিঙ্ক বা "আরও জানুন" বা "বিস্তারিত দেখুন"-এর মতো গৌণ ফাংশনের মতো কম গুরুত্বপূর্ণ কাজের জন্য আদর্শ।

এই চিত্রটিতে ম্যাটেরিয়াল ডিজাইনের পাঁচ ধরনের বাটন দেখানো হয়েছে:

বাটনের পাঁচটি উপাদানের প্রত্যেকটির একটি করে উদাহরণ, যেখানে তাদের স্বতন্ত্র বৈশিষ্ট্যগুলো তুলে ধরা হয়েছে।
চিত্র ১. বোতামের পাঁচটি উপাদান।

এপিআই পৃষ্ঠ

onClick
ব্যবহারকারী বাটন চাপলে সিস্টেম যে ফাংশনটি কল করে।
enabled
false হলে, এই প্যারামিটারটি বাটনটিকে অনুপলব্ধ এবং নিষ্ক্রিয় দেখায়।
colors
ButtonColors এর একটি ইনস্ট্যান্স যা বাটনে ব্যবহৃত রংগুলো নির্ধারণ করে।
contentPadding
বোতামের ভেতরের প্যাডিং।

ভরা বোতাম

ফিল্ড বাটন কম্পোনেন্টটি বেসিক Button কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি সলিড রঙ দিয়ে ভরা থাকে। নিচের কোড স্নিপেটটিতে দেখানো হয়েছে কীভাবে কম্পোনেন্টটি ইমপ্লিমেন্ট করতে হয়: 

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

এই বাস্তবায়নটি নিম্নরূপ:

বেগুনি পটভূমিতে একটি ভরাট বাটন, যাতে লেখা আছে, 'Filled'।
চিত্র ২. একটি ভরাট বোতাম।

ভরাট টোনাল বোতাম

ফিল্ড টোনাল বাটন কম্পোনেন্টটি FilledTonalButton কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি টোনাল রঙ দিয়ে পূর্ণ থাকে।

এই কোড স্নিপেটটি দেখায় কিভাবে কম্পোনেন্টটি ইমপ্লিমেন্ট করতে হয়: 

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

এই বাস্তবায়নটি নিম্নরূপ:

হালকা বেগুনি পটভূমিতে একটি টোনাল বাটন, যাতে 'Tonal' লেখা রয়েছে।
চিত্র ৩. একটি টোনাল বাটন।

রূপরেখা দেওয়া বোতাম

আউটলাইনড বাটন কম্পোনেন্টটি OutlinedButton কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি আউটলাইনসহ প্রদর্শিত হয়।

এই কোড স্নিপেটটি দেখায় কিভাবে কম্পোনেন্টটি ইমপ্লিমেন্ট করতে হয়: 

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

এই বাস্তবায়নটি নিম্নরূপ:

একটি স্বচ্ছ, রেখাঙ্কিত বোতাম যার চারপাশে গাঢ় বর্ডার এবং তাতে 'Outlined' লেখা রয়েছে।
চিত্র ৪। একটি রেখাচিত্রযুক্ত বোতাম।

উন্নত বোতাম

এলিভেটেড বাটন কম্পোনেন্টটি ElevatedButton কম্পোজেবল ব্যবহার করে। ডিফল্টরূপে এতে একটি শ্যাডো থাকে যা এলিভেশন ইফেক্টটি উপস্থাপন করে। এটি একটি ফিল্ড বাটন যাতে একটি শ্যাডো অন্তর্ভুক্ত রয়েছে।

এই কোড স্নিপেটটি দেখায় কিভাবে কম্পোনেন্টটি ইমপ্লিমেন্ট করতে হয়: 

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

এই বাস্তবায়নটি নিম্নরূপ:

ধূসর পটভূমিতে একটি উঁচু বোতাম, যাতে 'Elevated' লেখা রয়েছে।
চিত্র ৫. একটি উঁচু বোতাম।

টেক্সট বাটন

টেক্সট বাটন কম্পোনেন্টটি TextButton কম্পোজেবল ব্যবহার করে। চাপ না দেওয়া পর্যন্ত এটি শুধু টেক্সট হিসেবে প্রদর্শিত হয়। ডিফল্টভাবে এতে কোনো সলিড ফিল বা আউটলাইন থাকে না।

এই কোড স্নিপেটটি দেখায় কিভাবে কম্পোনেন্টটি ইমপ্লিমেন্ট করতে হয়: 

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

এই বাস্তবায়নটি নিম্নরূপ:

একটি টেক্সট বাটন যাতে লেখা আছে 'টেক্সট বাটন'
চিত্র ৬. একটি টেক্সট বাটন।

অতিরিক্ত সম্পদ