বোতাম

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

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

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

পাঁচটি বোতাম কম্পোনেন্টের প্রতিটির উদাহরণ, তাদের অনন্য বৈশিষ্ট্য হাইলাইট করা হয়েছে।
ছবি ১. পাঁচটি বোতাম কম্পোনেন্ট।

API সারফেস

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

ভরাট বোতাম

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

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

ফিল্ড টোনাল বোতাম

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

কম্পোনেন্ট কীভাবে প্রয়োগ করতে হয় এবং ইন্টার‍্যাক্টিভভাবে প্রিভিউ করতে হয় তা স্নিপেট থেকে বোঝা যায়:

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

আউটলাইন করা বোতাম

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

স্নিপেট থেকে বোঝা যায় কীভাবে কম্পোনেন্ট প্রয়োগ করতে হয় এবং ইন্টার‍্যাক্টিভভাবে তার প্রিভিউ দেখতে হয়:

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

এলিভেটেড বোতাম

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

কম্পোনেন্ট কীভাবে প্রয়োগ করতে হয় এবং ইন্টার‍্যাক্টিভভাবে প্রিভিউ করতে হয় তা স্নিপেট থেকে বোঝা যায়:

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

টেক্সট হেডিং সম্পর্কিত বোতাম

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

স্নিপেট থেকে বোঝা যায় কীভাবে কম্পোনেন্ট প্রয়োগ করতে হয় এবং ইন্টার‍্যাক্টিভভাবে তার প্রিভিউ দেখতে হয়:

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

অতিরিক্ত রিসোর্স