টুলটিপ

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

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

চিত্র ১. একটি সাধারণ টুলটিপ (১) এবং একটি সমৃদ্ধ টুলটিপ (২)।

এপিআই সারফেস

আপনার অ্যাপে টুলটিপস বাস্তবায়নের জন্য আপনি TooltipBox কম্পোজেবল ব্যবহার করতে পারেন। আপনি এই প্রধান প্যারামিটারগুলির সাহায্যে TooltipBox উপস্থিতি নিয়ন্ত্রণ করতে পারেন:

• positionProvider : অ্যাঙ্কর কন্টেন্টের সাথে সম্পর্কিত টুলটিপ স্থাপন করে। আপনি সাধারণত TooltipDefaults থেকে একটি ডিফল্ট পজিশন প্রোভাইডার ব্যবহার করেন, অথবা আপনার যদি কাস্টম পজিশনিং লজিকের প্রয়োজন হয় তবে আপনি নিজেরটিও প্রদান করতে পারেন।
• tooltip : টুলটিপের কন্টেন্ট ধারণকারী কম্পোজেবল। আপনি সাধারণত PlainTooltip অথবা RichTooltip কম্পোজেবল ব্যবহার করেন।
  • আইকন বোতামের উপাদান বা ক্রিয়া বর্ণনা করতে PlainTooltip ব্যবহার করুন।
  • আরও বিস্তারিত তথ্য প্রদানের জন্য RichTooltip ব্যবহার করুন, যেমন কোনও বৈশিষ্ট্যের মান বর্ণনা করা। Rich টুলটিপগুলিতে একটি ঐচ্ছিক শিরোনাম, লিঙ্ক এবং বোতাম অন্তর্ভুক্ত থাকতে পারে।
• 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 "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 কন্টেন্টের উপর ঘোরানোর মাধ্যমে, টুলটিপটি প্রায় এক সেকেন্ডের জন্য প্রদর্শিত হয়। আপনি স্ক্রিনের অন্য কোথাও ট্যাপ করে অথবা ডিসমিস অ্যাকশন বোতাম ব্যবহার করে এই টুলটিপটি ডিসমিস করতে পারেন।
• যখন dismiss অ্যাকশনটি কার্যকর হয়, তখন সিস্টেমটি tooltipState.dismiss কল করার জন্য একটি coroutine চালু করে। এটি যাচাই করে যে টুলটিপটি প্রদর্শিত হওয়ার সময় অ্যাকশন এক্সিকিউশন ব্লক করা হয়নি।
• onClick = coroutineScope.launch { tooltipState.show() } } tooltipState.show ব্যবহার করে টুলটিপটি ম্যানুয়ালি দেখানোর জন্য একটি coroutine চালু করে।
• action প্যারামিটারটি একটি টুলটিপে ইন্টারেক্টিভ উপাদান যোগ করার অনুমতি দেয়, যেমন একটি বোতাম।
• caretSize প্যারামিটার টুলটিপের তীরের আকার পরিবর্তন করে।

ফলাফল

এই উদাহরণটি নিম্নলিখিতগুলি তৈরি করে:

চিত্র ৪। ক্যামেরা আইকনের সাথে সংযুক্ত একটি ডিসমিস অ্যাকশন সহ একটি কাস্টম রিচ টুলটিপ।

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

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