সুইচ

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

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

কাস্টম রঙ

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

@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 ডকুমেন্টেশন