টুলটিপ

একটি বাটন বা অন্য কোনো UI এলিমেন্টে প্রাসঙ্গিকতা যোগ করতে টুলটিপ ব্যবহার করুন। টুলটিপ দুই প্রকারের হয়:

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

এপিআই পৃষ্ঠ

আপনি আপনার অ্যাপে টুলটিপ প্রয়োগ করতে 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 "Add to favorites" লেখা সহ একটি টুলটিপ তৈরি করে।
  • TooltipDefaults.rememberPlainTooltipPositionProvider() সাধারণ টুলটিপগুলির জন্য ডিফল্ট অবস্থান প্রদান করে।
  • tooltip হলো একটি ল্যাম্বডা ফাংশন যা PlainTooltip কম্পোজেবল ব্যবহার করে টুলটিপের বিষয়বস্তু নির্ধারণ করে।
  • Text(plainTooltipText) টুলটিপের ভেতরে লেখাটি প্রদর্শন করে।
  • tooltipState টুলটিপের অবস্থা নিয়ন্ত্রণ করে।
• IconButton একটি আইকনসহ ক্লিকযোগ্য বাটন তৈরি করে।
  • Icon(...) বাটনের ভেতরে একটি হার্ট আইকন প্রদর্শন করে।
  • যখন কোনো ব্যবহারকারী IconButton এর সাথে ইন্টারঅ্যাক্ট করেন, তখন TooltipBox "Add to favorites" লেখা সহ টুলটিপটি প্রদর্শন করে। ডিভাইসের উপর নির্ভর করে, ব্যবহারকারীরা নিম্নলিখিত উপায়ে টুলটিপটি চালু করতে পারেন:
  • কার্সার দিয়ে আইকনের উপর হোভার করলে
  • মোবাইল ডিভাইসে আইকনটি দীর্ঘক্ষণ চেপে ধরে রাখুন

ফলাফল

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

একটি সমৃদ্ধ টুলটিপ প্রদর্শন করুন

একটি 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 প্যারামিটারটি টুলটিপের তীরের আকার পরিবর্তন করে।

ফলাফল

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

অতিরিক্ত সম্পদ

• উপাদান ডিজাইন: টুলটিপ