সুইচ

Switch কম্পোনেন্ট ব্যবহারকারীদের দুটি স্ট্যাটাসের মধ্যে টগল করার অনুমতি দেয়: টিকচিহ্ন দেওয়া এবং টিকচিহ্ন সরানো। আপনার অ্যাপে, ব্যবহারকারীকে নিম্নলিখিতগুলির মধ্যে একটি করতে দেওয়ার জন্য আপনি একটি সুইচ ব্যবহার করতে পারেন:

• কোনও সেটিং চালু বা বন্ধ করা।
• কোনও ফিচার চালু বা বন্ধ করা।
• একটি বিকল্প বেছে নিন।

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

প্রাথমিক প্রয়োগ

সম্পূর্ণ API সংজ্ঞার জন্য Switch রেফারেন্স দেখুন। আপনাকে ব্যবহার করতে হতে পারে এমন কিছু গুরুত্বপূর্ণ প্যারামিটার নিচে উল্লেখ করা হল:

• checked: সুইচের প্রাথমিক অবস্থা।
• onCheckedChange: একটি কলব্যাক যা সুইচের স্ট্যাটাস পরিবর্তন হলে কল করা হয়।
• enabled: সুইচ চালু নাকি বন্ধ আছে।
• colors: সুইচের জন্য ব্যবহৃত রঙ।

নিম্নলিখিত উদাহরণটি Switch কম্পোজেবলের একটি ন্যূনতম বাস্তবায়ন।

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

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

চেক করা হলে এটি কেমন দেখাবে:

উন্নত প্রয়োগ

আরও উন্নত সুইচ প্রয়োগ করার সময় আপনি যেসব প্রাথমিক প্যারামিটার ব্যবহার করতে চাইতে পারেন, সেগুলি হল:

• thumbContent: থাম্ব চেক করা থাকলে, তার চেহারা কাস্টমাইজ করতে এটি ব্যবহার করুন।
• colors: ট্র্যাক ও থাম্বের রঙ কাস্টমাইজ করতে এটি ব্যবহার করুন।

কাস্টম থাম্বনেল

কাস্টম থাম্ব তৈরি করতে আপনি thumbContent প্যারামিটারের জন্য যেকোনও কম্পোজেবল পাস করতে পারবেন। নিচে এমন একটি সুইচের উদাহরণ দেওয়া হল যা থাম্বের জন্য কাস্টম আইকন ব্যবহার করে:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

এই ইমপ্লিমেন্টেশনে, আনচেক করা বক্সের চেহারা আগের বিভাগে দেখানো উদাহরণের মতোই। তবে, চেক করা হলে, এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

কাস্টম রঙ

সুইচ চেক করা আছে কিনা তা বিবেচনা করে, সুইচের থাম্ব এবং ট্র্যাকের রঙ পরিবর্তন করতে, আপনি কীভাবে কালার প্যারামিটার ব্যবহার করতে পারেন তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

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

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

• Material UI ডকুমেন্ট