টুলটিপ

কোনও বোতাম বা অন্যান্য 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(
                painter = rememberVectorPainter(AppIcons.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(
                painter = rememberVectorPainter(AppIcons.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(
                painter = rememberVectorPainter(AppIcons.Camera),
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

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

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

ফলাফল

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

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

• মেটেরিয়াল ডিজাইন: টুলটিপ