টুলটিপ

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

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

API পৃষ্ঠ

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

• positionProvider : নোঙ্গর সামগ্রীর সাথে সম্পর্কিত টুলটিপ স্থাপন করে। আপনি সাধারণত TooltipDefaults থেকে একটি ডিফল্ট অবস্থান প্রদানকারী ব্যবহার করেন, অথবা আপনার যদি কাস্টম পজিশনিং লজিকের প্রয়োজন হয় তবে আপনি নিজের প্রদান করতে পারেন।
• tooltip : কম্পোজেবল যেটিতে টুলটিপের বিষয়বস্তু রয়েছে। আপনি সাধারণত PlainTooltip বা RichTooltip composables ব্যবহার করেন।
  • আইকন বোতামের উপাদান বা ক্রিয়া বর্ণনা করতে 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 ব্যবহার করে টুলটিপটি ম্যানুয়ালি দেখানোর জন্য একটি coroutine চালু করে।
• action প্যারামিটার একটি টুলটিপে ইন্টারেক্টিভ উপাদান যোগ করার অনুমতি দেয়, যেমন একটি বোতাম।
• caretSize প্যারামিটার টুলটিপের তীরের আকার পরিবর্তন করে।

ফলাফল

এই উদাহরণ নিম্নলিখিত উত্পাদন করে:

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

• উপাদান নকশা: টুলটিপস