টুলটিপ

কোনও বোতাম বা অন্যান্য UI এলিমেন্টে প্রাসঙ্গিক তথ্য যোগ করতে টুলটিপ ব্যবহার করুন। দু'ধরনের টুলটিপ আছে:

• সাধারণ টুলটিপ: আইকন বোতামের এলিমেন্ট বা অ্যাকশন বর্ণনা করে।
• রিচ টুলটিপ: আরও বিবরণ প্রদান করে, যেমন কোনও ফিচারের ভ্যালু বর্ণনা করা। এছাড়াও, ঐচ্ছিক শীর্ষক, লিঙ্ক ও বোতাম যোগ করা যেতে পারে।

API সারফেস

আপনার অ্যাপে টুলটিপ প্রয়োগ করতে, আপনি TooltipBox কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করতে পারবেন। আপনি এইসব মূল প্যারামিটার দিয়ে TooltipBox-এর চেহারা কন্ট্রোল করেন:

• positionProvider: অ্যাঙ্কর কন্টেন্টের সাপেক্ষে টুলটিপ প্লেস করে। আপনি সাধারণত TooltipDefaults থেকে ডিফল্ট পজিশন প্রদানকারী ব্যবহার করেন অথবা আপনি কাস্টম পজিশনিং লজিকের প্রয়োজন হলে নিজের পজিশন প্রদান করতে পারেন।
• tooltip: টুলটিপের কন্টেন্ট থাকা কম্পোজ করার উপযুক্ত আইটেম। আপনি সাধারণত PlainTooltip বা RichTooltip কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করেন।
  • আইকন বোতামের এলিমেন্ট বা অ্যাকশন বর্ণনা করতে PlainTooltip ব্যবহার করুন।
  • RichTooltip ব্যবহার করে আরও বিবরণ দিন, যেমন কোনও ফিচারের মূল্য বর্ণনা করা। রিচ টুলটিপে ঐচ্ছিক শিরোনাম, লিঙ্ক ও বোতাম থাকতে পারে।
• state: এই টুলটিপের জন্য UI লজিক ও এলিমেন্ট স্টেট ধারণকারী স্টেট হোল্ডার।
• content: টুলটিপ যে কম্পোজ করা যায় এমন কন্টেন্টের সাথে অ্যাঙ্কর করা আছে।

সাধারণ টুলটিপ দেখানো

UI এলিমেন্ট সম্পর্কে সংক্ষিপ্ত বিবরণ দিতে সাধারণ টুলটিপ ব্যবহার করুন। এই কোড স্নিপেটটি "পছন্দের তালিকায় যোগ করুন" লেবেলযুক্ত একটি আইকন বোতামের উপরে একটি সাধারণ টুলটিপ দেখায়:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• TooltipBox "পছন্দের তালিকায় যোগ করুন" টেক্সট সহ একটি টুলটিপ তৈরি করে।
  • TooltipDefaults.rememberPlainTooltipPositionProvider() সাধারণ টুলটিপের জন্য ডিফল্ট পজিশনিং প্রদান করে।
  • tooltip হল একটি ল্যাম্বডা ফাংশন যা PlainTooltip কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করে টুলটিপের কন্টেন্ট নির্ধারণ করে।
  • Text(plainTooltipText) টুলটিপের মধ্যে টেক্সট দেখায়।
  • tooltipState টুলটিপের স্ট্যাটাস কন্ট্রোল করে।
• IconButton আইকন সহ ক্লিক করা যায় এমন বোতাম তৈরি করে।
  • Icon(...) বোতামের মধ্যে একটি হার্ট আইকন দেখায়।
  • কোনও ব্যবহারকারী IconButton-এর সাথে ইন্টার‍্যাক্ট করলে, TooltipBox "পছন্দের তালিকায় যোগ করুন" টেক্সট সহ টুলটিপ দেখায়। ডিভাইসের উপর নির্ভর করে, ব্যবহারকারীরা নিম্নলিখিত উপায়ে টুলটিপ ট্রিগার করতে পারবেন:
  • কার্সর দিয়ে আইকনের উপর হোভার করা
  • মোবাইল ডিভাইসে আইকনটি দীর্ঘক্ষণ প্রেস করে

ফলাফল

এই উদাহরণটি একটি আইকনের উপরে একটি সাধারণ টুলটিপ তৈরি করে:

রিচ টুলটিপ দেখানো

UI এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য দিতে রিচ টুলটিপ ব্যবহার করুন। এই উদাহরণে, একটি শিরোনাম সহ একাধিক লাইনযুক্ত রিচ টুলটিপ তৈরি করা হয়েছে, যা একটি Icon:

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• TooltipBox ব্যবহারকারীর ইন্টার‍্যাকশনের জন্য ইভেন্ট লিসনার ম্যানেজ করে এবং সেই অনুযায়ী TooltipState আপডেট করে। TooltipState থেকে যদি বোঝা যায় যে টুলটিপ দেখানো উচিত, তাহলে টুলটিপ ল্যাম্বডা এক্সিকিউট হয় এবং TooltipBox থেকে RichTooltip দেখা যায়। TooltipBox আইকনটি কন্টেন্ট ও টুলটিপ, দু'টিরই অ্যাঙ্কর ও কন্টেনার হিসেবে কাজ করে।
  • এই ক্ষেত্রে, কন্টেন্ট হল একটি IconButton কম্পোনেন্ট, যা ট্যাপ করা যায় এমন অ্যাকশন আচরণ প্রদান করে। TooltipBox-এর কন্টেন্টের যেকোনও জায়গায় দীর্ঘক্ষণ প্রেস (টাচ ডিভাইসে) করলে বা মাউস নিয়ে গেলে (মাউস পয়েন্টারের সাহায্যে), আরও তথ্য দেখাতে টুলটিপ দেখানো হবে।
• RichTooltip কম্পোজ করার উপযুক্ত আইটেম টুলটিপের কন্টেন্ট নির্ধারণ করে, যার মধ্যে শিরোনাম ও মূল টেক্সট অন্তর্ভুক্ত। TooltipDefaults.rememberRichTooltipPositionProvider()-এ রিচ টুলটিপের জন্য পজিশনিং সংক্রান্ত তথ্য দেওয়া হয়।

ফলাফল

এই উদাহরণে, তথ্যের আইকনের সাথে একটি শীর্ষক যুক্ত করে একটি সমৃদ্ধ টুলটিপ তৈরি করা হয়েছে:

রিচ টুলটিপ কাস্টমাইজ করা

এই কোড স্নিপেটে একটি শিরোনাম, কাস্টম অ্যাকশন ও ক্যামেরা আইকন বোতামের উপরে দেখানো একটি কাস্টম ক্যারেট (তীর) সহ একটি উন্নত টুলটিপ দেখানো হয়েছে:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• RichTooltip-এ ক্লিক করলে, শিরোনাম ও বাতিল করার অ্যাকশন সহ টুলটিপ দেখানো হয়।
• মাউস পয়েন্টার দিয়ে TooltipBox কন্টেন্টের উপর হোভার করে অথবা বেশিক্ষণ প্রেস করে চালু করলে, টুলটিপটি প্রায় এক সেকেন্ডের জন্য দেখানো হয়। স্ক্রিনের অন্য কোথাও ট্যাপ করে অথবা বাতিল করার অ্যাকশন বোতাম ব্যবহার করে আপনি এই টুলটিপ বাতিল করতে পারবেন।
• বাতিল করার অ্যাকশন এক্সিকিউট হলে, সিস্টেম tooltipState.dismiss কল করার জন্য একটি কোরাউটিন লঞ্চ করে। এর ফলে, টুলটিপ দেখানো হওয়ার সময় অ্যাকশন এক্সিকিউশন ব্লক করা হয় না।
• onClick = coroutineScope.launch { tooltipState.show() } }, tooltipState.show ব্যবহার করে টুলটিপ ম্যানুয়ালি দেখানোর জন্য একটি কোরাউটিন লঞ্চ করে।
• action প্যারামিটারটি টুলটিপে বোতামের মতো ইন্টার‍্যাক্টিভ এলিমেন্ট যোগ করার অনুমতি দেয়।
• caretSize প্যারামিটারটি টুলটিপের তীরের সাইজ পরিবর্তন করে।

ফলাফল

এই উদাহরণ থেকে নিম্নলিখিত আউটপুট পাওয়া যায়:

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

• মেটেরিয়াল ডিজাইন: সহায়ক টেক্সট