प्रोग्रामिंग
Buttons, menus, forms, search, keyboard actions और feedback states का व्यवहार बताने के लिए संदर्भ।
47 परिणाम
पॉइंटर और टच
Click
onClickA pointer action where the user presses and releases a mouse button on an element.
Use click for actions such as opening menus, submitting buttons, selecting items, or navigating with links.
When the menu button is clicked, open the menu panel.
पॉइंटर और टच
Tap
touch / pointerA touch-screen action where the user touches and releases an element.
Tap should generally do the same important work as click on phones and tablets.
Hover-only behavior is unreliable on touch devices.
Make the category menu open by tap instead of hover on mobile.
पॉइंटर और टच
Hover
:hoverThe state when a mouse pointer is over an element.
Hover can preview affordance with color, underline, background, or shadow changes.
Do not make essential actions depend only on hover.
Change the menu item background when it is hovered.
पॉइंटर और टच
Long press
touch holdA touch action where the user holds a finger on an element for a longer moment.
Long press is often used for secondary actions, but it is less discoverable than a visible button.
Avoid long press as the only way to access important functionality.
Do not hide essential copy actions behind long press only.
पॉइंटर और टच
Drag
pointerdown + pointermoveA pointer action where the user holds and moves an element or selection.
Drag interactions need clear handles, boundaries, and fallback controls when precision matters.
Add a visible handle if a panel can be dragged.
पॉइंटर और टच
Swipe
touch moveA touch gesture where the user moves a finger quickly across the screen.
Swipe can move carousels or panels, but visible controls should still exist.
Allow swipe between examples, but keep arrow buttons visible.
कीबोर्ड
Keyboard event
keydown / keyupAn interaction caused by pressing or releasing a keyboard key.
Keyboard events are used for Escape-to-close, Enter-to-submit, arrow navigation, and shortcuts.
Close the dropdown when the Escape key is pressed.
कीबोर्ड
Escape key
EscapeA keyboard key commonly used to cancel, close, or exit a temporary UI.
Dropdowns, menus, modals, and popovers should usually close on Escape.
Make both the language dropdown and site menu close on Escape.
कीबोर्ड
Enter key
EnterA keyboard key often used to activate a focused control or submit a form.
A focused button should activate with Enter. Search forms may submit with Enter.
Let Enter run the search when the search field is focused.
कीबोर्ड
Tab key
TabA keyboard key used to move focus through interactive controls.
The Tab order should follow the visible reading and interaction order.
Keep the tab order natural across the header controls.
UI अवस्थाएँ
Focus
:focus / :focus-visibleThe state where an element is ready for keyboard input or activation.
Focused controls should have a visible outline or focus style.
Make the focused search input clearly visible.
UI अवस्थाएँ
Blur
blur / focusoutThe state change when an element loses focus.
Blur can validate input or close lightweight UI, but it should not surprise users.
Do not clear the search text when the input loses focus.
UI अवस्थाएँ
Active state
:activeA short state while a control is being pressed.
Active state can show a pressed effect with a slight background, border, or position change.
Add a subtle pressed state to icon buttons.
UI अवस्थाएँ
Selected state
selected / aria-currentThe state of an item that is currently chosen in a list, menu, tab group, or filter group.
Selected items should be visually different from unselected items.
Make the active category chip clearly different from inactive chips.
UI अवस्थाएँ
Disabled state
disabled / aria-disabledA state where a control is visible but cannot be used.
Disabled controls should look inactive but remain understandable.
Disable the submit button until required input is valid.
UI अवस्थाएँ
Checked state
checkedThe on or selected state of a checkbox, radio, or switch-like control.
Checked state should be visibly clear and announced by the control semantics.
Show a clear checked state for selected options.
खोलना और बंद करना
Toggle
toggle stateAn action that switches between two states, such as open and closed or on and off.
A toggle should show its current state and update that state predictably.
Use one button to toggle each menu category open and closed.
खोलना और बंद करना
Open / close
open / closedA visibility state where a panel, menu, or section is shown or hidden.
Open and close states should be controlled consistently by buttons, outside click, Escape, or selection.
Close the site menu when the language dropdown opens.
खोलना और बंद करना
Dropdown
button -> panelA floating list that appears from a button or field.
Dropdowns usually close after selection, outside click, or Escape.
When a language is selected, close the dropdown.
खोलना और बंद करना
Accordion
section toggleA UI pattern where section headers open or close their content.
Accordions should clearly indicate which sections are open.
Keep all accordion categories closed by default.
खोलना और बंद करना
Modal
open dialogA focused overlay that appears above the page and usually blocks the background content.
Modals need close controls, Escape behavior, focus handling, and clear purpose.
Add a close button and Escape-to-close behavior to the modal.
खोलना और बंद करना
Outside click
document pointerdownA click or tap outside a temporary panel such as a dropdown, menu, or popover.
Temporary panels commonly close when the user clicks outside them.
Controls that belong to the same header group may not count as outside unless the logic is written that way.
Close the menu when the user clicks outside the menu panel.
खोलना और बंद करना
Focus trap
modal openA behavior that keeps keyboard focus inside a modal or dialog while it is open.
Focus trap prevents keyboard users from accidentally moving behind an active modal.
Trap focus inside the modal until it is closed.
नेविगेशन
Link navigation
link clickMoving to another page, route, or section through a link.
Links should use correct destinations and close temporary menus after navigation.
Close the menu after a menu link is clicked.
नेविगेशन
Route change
router navigationA change from one application route or URL path to another.
Route changes should update page content, metadata, and active navigation state.
Update the active navigation state after route changes.
नेविगेशन
Scroll
wheel / touch scrollMoving the visible viewport through content that is larger than the screen.
Scrolling can happen on the page or inside a panel with its own overflow.
Make long dropdown menus scroll inside the panel instead of extending off screen.
नेविगेशन
Anchor scroll
href=#idA link behavior that scrolls to an element with a matching id on the same page.
Anchor links are useful for jumping to tools, references, or sections.
Make the Browse tools button scroll to the tools section.
इनपुट और फ़ॉर्म
Type
input eventEntering text or values into an input or textarea.
Typing can update state immediately, validate input, or wait until submission.
Update search results as the user types.
इनपुट और फ़ॉर्म
Submit
submit eventSending or applying form input.
Submit should validate required input, prevent accidental reloads when needed, and show feedback.
Prevent the form from reloading the page when it submits.
इनपुट और फ़ॉर्म
Reset
reset actionReturning controls or values to their default state.
Reset should be predictable and avoid erasing important work without warning.
Add a reset button that clears search and returns to all categories.
इनपुट और फ़ॉर्म
Validation
input / submitChecking whether user input is complete and valid.
Validation should explain what is wrong and how to fix it.
Show a validation message when the input value is invalid.
खोज और फ़िल्टर
Search
query changeFinding matching items based on text entered by the user.
Search should check useful fields such as names, aliases, descriptions, and examples.
Make the search match Korean words, English terms, aliases, and request examples.
खोज और फ़िल्टर
Filter
filter stateNarrowing a list to items that match a selected condition.
Filters should show which condition is active and how many items remain when useful.
Add category filters above the UI interaction term cards.
खोज और फ़िल्टर
Sort
sort optionChanging the order of items by a rule such as name, date, priority, or category.
Sorting should not remove items; it only changes their order.
Sort matching terms alphabetically after filtering.
खोज और फ़िल्टर
Debounce
delayed inputWaiting briefly after the user stops typing before running an expensive action.
Debounce prevents search, validation, or API calls from running on every single keystroke.
Debounce the search input if it becomes slow with many items.
खोज और फ़िल्टर
Clear
clear actionRemoving a typed value, selected filter, or temporary state.
Clear actions should affect only the intended field or state.
Add a clear button inside the search field.
प्रतिक्रिया
Loading
pending stateA temporary state while data, page content, or an action is still being prepared.
Loading feedback tells users that the app is working and prevents repeated actions when needed.
Show a loading state while the conversion result is being prepared.
प्रतिक्रिया
Spinner
loading visualA visual indicator that something is loading or processing.
Spinners work best for short waits; longer waits may need clearer progress or text.
Show a small spinner inside the button while submitting.
प्रतिक्रिया
Toast
temporary messageA short temporary message that appears after an action.
Toasts are useful for confirmations such as copied, saved, or updated.
Show a toast after copying text to the clipboard.
प्रतिक्रिया
Error state
errorA state that tells the user something went wrong.
Error messages should be specific, readable, and explain the next useful action.
Show a clear error message when the input cannot be converted.
प्रतिक्रिया
Success state
successA state that confirms an action completed successfully.
Success states can be subtle when the result is already visible.
Show a small success message after settings are saved.
प्रतिक्रिया
Empty state
empty resultA state shown when there is no data or no matching result.
Empty states should explain why nothing is shown and suggest a next step.
Show a no-results message when search returns no matching terms.
प्रतिक्रिया
Copy to clipboard
navigator.clipboardAn action that puts text into the user's clipboard.
Copy actions should give feedback so users know the text was copied.
Copy the CSS property when the property chip is clicked.
मोशन और टाइमिंग
Transition
CSS transitionA smooth change between two visual states, such as color, opacity, or position.
Transitions can make UI feel polished, but should stay quick for tools.
Add a short transition to menu item hover colors.
मोशन और टाइमिंग
Animation
CSS animationA visual motion sequence that can run once or repeatedly.
Animation should support the task, not distract from reading or repeated work.
Use a subtle slide-down animation when the dropdown opens.
मोशन और टाइमिंग
Delay
setTimeout / delayA wait before something happens or disappears.
Delays can make feedback readable, but long delays can make the UI feel slow.
Keep the copied toast visible for about one second.
मोशन और टाइमिंग
Throttle
limited repeated eventsLimiting how often a repeated event handler can run.
Throttle is useful for scroll or resize handlers that fire many times.
Throttle the scroll handler if the page becomes janky.