1767 lines
303 KiB
Markdown
1767 lines
303 KiB
Markdown
|
||
|
||
|
||
|
||
|
||
|
||
<!DOCTYPE html>
|
||
<html
|
||
lang="en"
|
||
|
||
data-color-mode="auto" data-light-theme="light" data-dark-theme="dark"
|
||
data-a11y-animated-images="system" data-a11y-link-underlines="true"
|
||
|
||
>
|
||
|
||
|
||
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="dns-prefetch" href="https://github.githubassets.com">
|
||
<link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
|
||
<link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
|
||
<link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
|
||
<link rel="preconnect" href="https://github.githubassets.com" crossorigin>
|
||
<link rel="preconnect" href="https://avatars.githubusercontent.com">
|
||
|
||
|
||
|
||
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-2ff56e1b36116ee2.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light_high_contrast-f7f95d7633592089.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-2d1fe43dbc9adf1f.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark_high_contrast-d530ee188d165539.css" /><link data-color-theme="light" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light-2ff56e1b36116ee2.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-f7f95d7633592089.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-e4bbc49fc7b82570.css" /><link data-color-theme="light_colorblind_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind_high_contrast-cc3f126b45166b83.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-652ca611ea4e33fe.css" /><link data-color-theme="light_tritanopia_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia_high_contrast-9e82d635cb6c3f49.css" /><link data-color-theme="dark" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark-2d1fe43dbc9adf1f.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-d530ee188d165539.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-3ad0ec21150df75b.css" /><link data-color-theme="dark_colorblind_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind_high_contrast-5691ff467f71a3f6.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-abee7710893cd168.css" /><link data-color-theme="dark_tritanopia_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia_high_contrast-eafcf6cd46158360.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-c7974682a1a84c8d.css" /><link data-color-theme="dark_dimmed_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed_high_contrast-f8dab3e04f94c501.css" />
|
||
|
||
<style type="text/css">
|
||
:root {
|
||
--tab-size-preference: 4;
|
||
}
|
||
|
||
pre, code {
|
||
tab-size: var(--tab-size-preference);
|
||
}
|
||
</style>
|
||
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-7f694b60439d06c0.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-b48faa60c69660fa.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-b40ec823a1a6a1af.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-f825c0edd7ad57f8.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-0751f482f5210958.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-c22301b4e838281c.css" />
|
||
|
||
|
||
|
||
<script type="application/json" id="client-env">{"locale":"en","featureFlags":["actions_custom_images_storage_billing_ui_visibility","actions_image_version_event","actions_workflow_language_service_allow_concurrency_queue","agent_conflict_resolution","alternate_user_config_repo","arianotify_comprehensive_migration","billing_discount_threshold_notification","code_scanning_dfa_degraded_experience_notice","codespaces_prebuild_region_target_update","codespaces_tab_react","coding_agent_model_selection","coding_agent_model_selection_all_skus","comment_viewer_copy_raw_markdown","contentful_primer_code_blocks","copilot_agent_snippy","copilot_api_agentic_issue_marshal_yaml","copilot_ask_mode_dropdown","copilot_automation_session_author","copilot_chat_attach_multiple_images","copilot_chat_category_rate_limit_messages","copilot_chat_clear_model_selection_for_default_change","copilot_chat_contextual_suggestions_updated","copilot_chat_enable_tool_call_logs","copilot_chat_file_redirect","copilot_chat_input_commands","copilot_chat_opening_thread_switch","copilot_chat_prettify_pasted_code","copilot_chat_reduce_quota_checks","copilot_chat_search_bar_redirect","copilot_chat_selection_attachments","copilot_chat_vision_in_claude","copilot_chat_vision_preview_gate","copilot_custom_copilots","copilot_custom_copilots_feature_preview","copilot_diff_explain_conversation_intent","copilot_diff_reference_context","copilot_duplicate_thread","copilot_extensions_hide_in_dotcom_chat","copilot_extensions_removal_on_marketplace","copilot_features_sql_server_logo","copilot_file_block_ref_matching","copilot_ftp_hyperspace_upgrade_prompt","copilot_icebreakers_experiment_dashboard","copilot_icebreakers_experiment_hyperspace","copilot_immersive_code_block_transition_wrap","copilot_immersive_embedded","copilot_immersive_embedded_deferred_payload","copilot_immersive_embedded_draggable","copilot_immersive_embedded_header_button","copilot_immersive_embedded_implicit_references","copilot_immersive_file_block_transition_open","copilot_immersive_file_preview_keep_mounted","copilot_immersive_job_result_preview","copilot_immersive_structured_model_picker","copilot_immersive_task_hyperlinking","copilot_immersive_task_within_chat_thread","copilot_mc_cli_resume_any_users_task","copilot_mission_control_always_send_integration_id","copilot_mission_control_cli_session_status","copilot_mission_control_initial_data_spinner","copilot_mission_control_logs_incremental","copilot_mission_control_task_alive_updates","copilot_org_policy_page_focus_mode","copilot_redirect_header_button_to_agents","copilot_resource_panel","copilot_scroll_preview_tabs","copilot_share_active_subthread","copilot_spaces_ga","copilot_spaces_individual_policies_ga","copilot_spaces_pagination","copilot_spark_empty_state","copilot_spark_handle_nil_friendly_name","copilot_swe_agent_hide_model_picker_if_only_auto","copilot_swe_agent_pr_comment_model_picker","copilot_swe_agent_use_subagents","copilot_task_api_github_rest_style","copilot_unconfigured_is_inherited","copilot_upgrade_freeze","copilot_usage_metrics_ga","copilot_workbench_slim_line_top_tabs","custom_instructions_file_references","dashboard_indexeddb_caching","dashboard_lists_max_age_filter","dashboard_universe_2025_feedback_dialog","dotgithub_fork_warning","flex_cta_groups_mvp","global_nav_react","hyperspace_2025_logged_out_batch_1","hyperspace_2025_logged_out_batch_2","hyperspace_2025_logged_out_batch_3","ipm_global_transactional_message_agents","ipm_global_transactional_message_copilot","ipm_global_transactional_message_issues","ipm_global_transactional_message_prs","ipm_global_transactional_message_repos","ipm_global_transactional_message_spaces","issue_cca_modal_open","issue_cca_multi_assign_modal","issue_cca_task_side_panel","issue_cca_visualization","issue_cca_visualization_session_panel","issue_fields_global_search","issues_expanded_file_types","issues_lazy_load_comment_box_suggestions","issues_react_bots_timeline_pagination","issues_react_chrome_container_query_fix","issues_search_type_gql","landing_pages_ninetailed","landing_pages_web_vitals_tracking","lifecycle_label_name_updates","low_quality_classifier","marketing_pages_search_explore_provider","memex_default_issue_create_repository","memex_live_update_hovercard","memex_mwl_filter_field_delimiter","memex_remove_deprecated_type_issue","merge_status_header_feedback","notifications_menu_defer_labels","oauth_authorize_clickjacking_protection","octocaptcha_origin_optimization","prs_conversations_react","prs_css_anchor_positioning","rules_insights_filter_bar_created","sample_network_conn_type","secret_scanning_pattern_alerts_link","security_center_artifact_filters_popover","session_logs_ungroup_reasoning_text","site_features_copilot_universe","site_homepage_collaborate_video","spark_prompt_secret_scanning","spark_server_connection_status","suppress_automated_browser_vitals","ui_skip_on_anchor_click","viewscreen_sandbox","warn_inaccessible_attachments","webp_support","workbench_store_readonly"],"copilotApiOverrideUrl":"https://api.githubcopilot.com"}</script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/high-contrast-cookie-218067197ba03c91.js"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-99fe43e971cd2379.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/fetch-utilities-3140609b5732710f.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/28839-7adfdde5afeb1a03.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/85924-ac5602ef611dc506.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/34646-4c7883eb242d5210.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/environment-a12df3cf35884818.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/runtime-helpers-cb4dfbc9d23f30be.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/2966-d68f2b4558d86113.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/96232-540ff5f81016a9ca.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/41013-647932573fc130af.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/51210-45dfb7dd106f6b96.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/64247-73a9861fe185671f.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/81683-382ccc88e034ea1d.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/9338-f6bee5a8d66d930f.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/46740-5a373320e5ef9c01.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/67466-79abcbf599986a00.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-61af8f0198be4afd.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-bb0ddc66dbc0b1de.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/react-core-1bf2dfbca21efd20.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-1353f2cef82bcdc0.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/58889-5b136bc717e57a8b.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/79039-69acf717ffc901a4.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/61110-073153e0413daf3a.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/2887-91b9c645d570616a.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/26533-f22c29ae5e9b1ed2.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/86483-c3a819d46503a3da.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/37460-fcd4830a1194eace.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/60481-24b13ea726837f7b.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/46287-853bfcb69bb5b3f9.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/2498-f0375ed070e22e54.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/61025-5b1312da907b4074.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/89627-40275597692dc855.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/79087-4f706db8aa2ec0fb.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/49029-42bd0899fca05960.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/99328-a2c6b180d25cb160.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-05170beef7088f93.js" defer="defer"></script>
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/react-core.f25ad6e4b6a65cba.module.css" />
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/4244-97fb660009234136.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-442a23b66c306470.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/39373-075d662e5ab13538.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-ad3e18f5935a3ed8.js" defer="defer"></script>
|
||
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-c90c0af6f94c2ff4.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-60e727d7a1b6f52c.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/89960-3369b8943362e07e.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/37869-3811d0fa923a406d.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/68751-830b37204cdf7847.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/7463-30e02617b93e1c07.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/15272-0fca7ba11b03440f.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/32769-abc9916acf2cd4f1.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/36505-9798da05fe2143ec.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/46148-264173ef30e2e838.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/57712-447a29413bbba322.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/61545-6a3a31f92bb5e61a.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/20999-9b5648501d55c42d.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/98228-7a59d90d972526cc.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/63991-466700d8cea41498.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/59852-fc77b3df0a08d405.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/3624-fdb7d4ead672734b.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/66231-a2e789b56df018f7.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/71001-7431ccad12c501aa.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/33684-bbaee6839ab84dd8.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/18222-8b85d637a2041072.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/96755-770967b1236437cd.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/4916-0bb8c44ba1b3d0f7.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/75674-28ffd7157e7cb9e8.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/75601-d9eafa1fbbb5172b.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/8987-366fbcea269300af.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/38184-1e8a3a630d385487.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/41110-df3d2329c8277a27.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/22216-7b6bcf152c4599f6.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/32639-b4f0cdce4bef4ac5.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/58085-77d3143b51231967.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/66519-27db8d6ec9c71a98.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/50110-0f4d902364ca3e5b.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/26497-bb0dd27f414e3e71.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/49135-5f8ca97edb189a81.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/71920-723318c28b0f8f3a.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/code-view-121a46f29c0d4946.js" defer="defer"></script>
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-view.63b52bc3543633b9.module.css" />
|
||
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/70234-1ee48b3a4eebdc7d.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-8cd581c0af350d7f.js" defer="defer"></script>
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.f6fd17c299e8bb6c.module.css" />
|
||
|
||
|
||
<title>microui/doc/usage.md at master · rxi/microui · GitHub</title>
|
||
|
||
|
||
|
||
<meta name="route-pattern" content="/:user_id/:repository/blob/*name(/*path)" data-turbo-transient>
|
||
<meta name="route-controller" content="blob" data-turbo-transient>
|
||
<meta name="route-action" content="show" data-turbo-transient>
|
||
<meta name="fetch-nonce" content="v2:e0672f82-d347-7703-92d1-f6d281f58d6d">
|
||
|
||
|
||
<meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb">
|
||
|
||
|
||
<meta name="request-id" content="9DD8:17B134:38BE2:45912:69F4A3C0" data-pjax-transient="true"/><meta name="html-safe-nonce" content="02e35ac80ccfec66dd8f2a3950c27daabf8e6c153d51c55e66d5352b4f1fc2bb" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5REQ4OjE3QjEzNDozOEJFMjo0NTkxMjo2OUY0QTNDMCIsInZpc2l0b3JfaWQiOiI0MDA0NDk4NDAxODUxMTIyNjI0IiwicmVnaW9uX2VkZ2UiOiJpYWQiLCJyZWdpb25fcmVuZGVyIjoiaWFkIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="a252d46daee1cea602e6cdf6ff98d9c68feb77e92904edd3b2613e69141fb893" data-pjax-transient="true"/>
|
||
|
||
|
||
<meta name="hovercard-subject-tag" content="repository:149854705" data-turbo-transient>
|
||
|
||
|
||
<meta name="github-keyboard-shortcuts" content="repository,source-code,file-tree,copilot" data-turbo-transient="true" />
|
||
|
||
|
||
<meta name="selected-link" value="repo_source" data-turbo-transient>
|
||
<link rel="assets" href="https://github.githubassets.com/">
|
||
|
||
<meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I">
|
||
|
||
<meta name="octolytics-url" content="https://collector.github.com/github/collect" />
|
||
|
||
|
||
|
||
|
||
|
||
<meta name="analytics-location" content="/<user-name>/<repo-name>/blob/show" data-turbo-transient="true" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta name="user-login" content="">
|
||
|
||
|
||
|
||
<meta name="viewport" content="width=device-width">
|
||
|
||
|
||
|
||
<meta name="description" content="A tiny immediate-mode UI library. Contribute to rxi/microui development by creating an account on GitHub.">
|
||
|
||
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
|
||
|
||
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
|
||
<meta property="fb:app_id" content="1401488693436528">
|
||
<meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/rxi/microui/blob/master/doc/usage.md" />
|
||
|
||
<meta name="twitter:image" content="https://opengraph.githubassets.com/fb782404943e40f6b55639439b9497c64d00b144e77dde51739df9a72e1be973/rxi/microui" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="microui/doc/usage.md at master · rxi/microui" /><meta name="twitter:description" content="A tiny immediate-mode UI library. Contribute to rxi/microui development by creating an account on GitHub." />
|
||
<meta property="og:image" content="https://opengraph.githubassets.com/fb782404943e40f6b55639439b9497c64d00b144e77dde51739df9a72e1be973/rxi/microui" /><meta property="og:image:alt" content="A tiny immediate-mode UI library. Contribute to rxi/microui development by creating an account on GitHub." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="microui/doc/usage.md at master · rxi/microui" /><meta property="og:url" content="https://github.com/rxi/microui/blob/master/doc/usage.md" /><meta property="og:description" content="A tiny immediate-mode UI library. Contribute to rxi/microui development by creating an account on GitHub." />
|
||
|
||
|
||
|
||
|
||
|
||
<meta name="hostname" content="github.com">
|
||
|
||
|
||
|
||
<meta name="expected-hostname" content="github.com">
|
||
|
||
|
||
<meta http-equiv="x-pjax-version" content="4027575eae1d4c63ba999bc6cb2cc82e3981750299181896e448e916aec89ad4" data-turbo-track="reload">
|
||
<meta http-equiv="x-pjax-csp-version" content="568c098497d98702bac1642a2a853732a047a6ced28eabd3e15d50041a890235" data-turbo-track="reload">
|
||
<meta http-equiv="x-pjax-css-version" content="87721d1504a187fb3fcbfa6e98526d058edf6fa1163680dbb36bf70525df6ac4" data-turbo-track="reload">
|
||
<meta http-equiv="x-pjax-js-version" content="7bda644c4a903bfe97bb83ffced7c7ca71341864bac00a5372fff3f7b11927a2" data-turbo-track="reload">
|
||
|
||
<meta name="turbo-cache-control" content="no-preview" data-turbo-transient="">
|
||
|
||
<meta name="turbo-cache-control" content="no-cache" data-turbo-transient>
|
||
|
||
<meta data-hydrostats="publish">
|
||
|
||
<meta name="go-import" content="github.com/rxi/microui git https://github.com/rxi/microui.git">
|
||
|
||
<meta name="octolytics-dimension-user_id" content="3920290" /><meta name="octolytics-dimension-user_login" content="rxi" /><meta name="octolytics-dimension-repository_id" content="149854705" /><meta name="octolytics-dimension-repository_nwo" content="rxi/microui" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="149854705" /><meta name="octolytics-dimension-repository_network_root_nwo" content="rxi/microui" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta name="turbo-body-classes" content="logged-out env-production page-responsive">
|
||
<meta name="disable-turbo" content="false">
|
||
|
||
|
||
<meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
|
||
|
||
<meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
|
||
|
||
<meta name="release" content="1e17ccea0664ae57163ca82c44e4b238911c3229">
|
||
<meta name="ui-target" content="full">
|
||
|
||
<link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000">
|
||
<link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png">
|
||
<link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon">
|
||
|
||
<meta name="theme-color" content="#1e2327">
|
||
<meta name="color-scheme" content="light dark" />
|
||
|
||
|
||
<link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
|
||
|
||
</head>
|
||
|
||
<body class="logged-out env-production page-responsive" style="word-wrap: break-word;" >
|
||
<div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;" >
|
||
<div id="__primerPortalRoot__" role="region" style="z-index: 1000; position: absolute; width: 100%;" data-turbo-permanent></div>
|
||
|
||
|
||
<div class="position-relative header-wrapper js-header-wrapper ">
|
||
<a href="#start-of-content" data-skip-target-assigned="false" class="px-2 tmp-py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a>
|
||
|
||
<span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full">
|
||
<span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span>
|
||
</span>
|
||
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/keyboard-shortcuts-dialog.1ac5611d6700bff4.module.css" />
|
||
|
||
<react-partial
|
||
partial-name="keyboard-shortcuts-dialog"
|
||
data-ssr="false"
|
||
data-attempted-ssr="false"
|
||
data-react-profiling="false"
|
||
>
|
||
|
||
<script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script>
|
||
<div data-target="react-partial.reactRoot"></div>
|
||
</react-partial>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/46752-7bd8967216f7ea42.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/90350-89ca7e5359af8f77.js" defer="defer"></script>
|
||
<script crossorigin="anonymous" type="application/javascript" src="https://github.githubassets.com/assets/sessions-e0da6ce03532723c.js" defer="defer"></script>
|
||
|
||
<style>
|
||
/* Override primer focus outline color for marketing header dropdown links for better contrast */
|
||
[data-color-mode="light"] .HeaderMenu-dropdown-link:focus-visible,
|
||
[data-color-mode="light"] .HeaderMenu-trailing-link a:focus-visible {
|
||
outline-color: var(--color-accent-fg);
|
||
}
|
||
</style>
|
||
|
||
<header class="HeaderMktg header-logged-out js-details-container js-header Details f4 tmp-py-3" role="banner" data-is-top="true" data-color-mode=auto data-light-theme=light data-dark-theme=dark>
|
||
<h2 class="sr-only">Navigation Menu</h2>
|
||
|
||
<button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation">
|
||
<span class="d-none">Toggle navigation</span>
|
||
</button>
|
||
|
||
<div class="d-flex flex-column flex-lg-row flex-items-center tmp-px-3 tmp-px-md-4 tmp-px-lg-5 height-full position-relative z-1">
|
||
<div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto">
|
||
<div class="flex-1">
|
||
<button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1 tmp-p-1"> <span class="Button-content">
|
||
<span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div>
|
||
<div class="HeaderMenu-toggle-bar rounded my-1"></div>
|
||
<div class="HeaderMenu-toggle-bar rounded my-1"></div></span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<a class="tmp-mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav"
|
||
href="/"
|
||
aria-label="Homepage"
|
||
data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}">
|
||
<svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github">
|
||
<path d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943"></path>
|
||
</svg>
|
||
</a>
|
||
|
||
<div class="d-flex flex-1 flex-order-2 text-right d-lg-none gap-2 flex-justify-end">
|
||
<a
|
||
href="/login?return_to=https%3A%2F%2Fgithub.com%2Frxi%2Fmicroui%2Fblob%2Fmaster%2Fdoc%2Fusage.md"
|
||
class="HeaderMenu-link HeaderMenu-button d-inline-flex f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav"
|
||
data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/rxi/microui/blob/master/doc/usage.md","user_id":null}}" data-hydro-click-hmac="7cdd986d4f5ca9a0fdea330bb2a561ec575cd91a8e0742c575348424eb6818d9"
|
||
data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}"
|
||
>
|
||
Sign in
|
||
</a>
|
||
<div class="AppHeader-appearanceSettings">
|
||
<react-partial-anchor>
|
||
<button data-target="react-partial-anchor.anchor" id="icon-button-19c037d6-61be-4fcc-9089-f8ec408d76e5" aria-labelledby="tooltip-e6de1935-0dcb-4268-a3fb-23e2be4dbb40" type="button" disabled="disabled" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium AppHeader-button HeaderMenu-link border cursor-wait"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sliders Button-visual">
|
||
<path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75Zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5Zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6ZM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8Zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2Zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z"></path>
|
||
</svg>
|
||
</button><tool-tip id="tooltip-e6de1935-0dcb-4268-a3fb-23e2be4dbb40" for="icon-button-19c037d6-61be-4fcc-9089-f8ec408d76e5" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Appearance settings</tool-tip>
|
||
|
||
<template data-target="react-partial-anchor.template">
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/appearance-settings.babbb060397858d0.module.css" />
|
||
|
||
<react-partial
|
||
partial-name="appearance-settings"
|
||
data-ssr="false"
|
||
data-attempted-ssr="false"
|
||
data-react-profiling="false"
|
||
>
|
||
|
||
<script type="application/json" data-target="react-partial.embeddedData">{"props":{}}</script>
|
||
<div data-target="react-partial.reactRoot"></div>
|
||
</react-partial>
|
||
|
||
|
||
</template>
|
||
</react-partial-anchor>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0">
|
||
<div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0">
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/marketing-navigation.958ac27fcac2300c.module.css" />
|
||
|
||
<react-partial
|
||
partial-name="marketing-navigation"
|
||
data-ssr="true"
|
||
data-attempted-ssr="true"
|
||
data-react-profiling="false"
|
||
>
|
||
|
||
<script type="application/json" data-target="react-partial.embeddedData">{"props":{"should_use_dotcom_links":true}}</script>
|
||
<div data-target="react-partial.reactRoot"><nav class="MarketingNavigation-module__nav__W0KYY" aria-label="Global"><ul class="MarketingNavigation-module__list__tFbMb"><li><div class="NavDropdown-module__container__l2YeI js-details-container js-header-menu-item"><button type="button" class="NavDropdown-module__button__PEHWX js-details-target" aria-expanded="false">Platform<svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavDropdown-module__buttonIcon__Tkl8_" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></button><div class="NavDropdown-module__dropdown__xm1jd"><ul class="NavDropdown-module__list__zuCgG"><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">AI CODE CREATION</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/features/copilot" data-analytics-event="{"action":"github_copilot","tag":"link","context":"platform","location":"navbar","label":"github_copilot_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-copilot NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path></svg><span class="NavLink-module__title__Q7t0p">GitHub Copilot</span><span class="NavLink-module__subtitle__X4gkW">Write better code with AI</span></div></a></li><li><a href="https://github.com/features/spark" data-analytics-event="{"action":"github_spark","tag":"link","context":"platform","location":"navbar","label":"github_spark_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-sparkle-fill NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M11.296 1.924c.24-.656 1.168-.656 1.408 0l.717 1.958a11.25 11.25 0 0 0 6.697 6.697l1.958.717c.657.24.657 1.168 0 1.408l-1.958.717a11.25 11.25 0 0 0-6.697 6.697l-.717 1.958c-.24.657-1.168.657-1.408 0l-.717-1.958a11.25 11.25 0 0 0-6.697-6.697l-1.958-.717c-.656-.24-.656-1.168 0-1.408l1.958-.717a11.25 11.25 0 0 0 6.697-6.697l.717-1.958Z"></path></svg><span class="NavLink-module__title__Q7t0p">GitHub Spark</span><span class="NavLink-module__subtitle__X4gkW">Build and deploy intelligent apps</span></div></a></li><li><a href="https://github.com/features/models" data-analytics-event="{"action":"github_models","tag":"link","context":"platform","location":"navbar","label":"github_models_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-ai-model NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M19.375 8.5a3.25 3.25 0 1 1-3.163 4h-3a3.252 3.252 0 0 1-4.443 2.509L7.214 17.76a3.25 3.25 0 1 1-1.342-.674l1.672-2.957A3.238 3.238 0 0 1 6.75 12c0-.907.371-1.727.97-2.316L6.117 6.846A3.253 3.253 0 0 1 1.875 3.75a3.25 3.25 0 1 1 5.526 2.32l1.603 2.836A3.25 3.25 0 0 1 13.093 11h3.119a3.252 3.252 0 0 1 3.163-2.5ZM10 10.25a1.75 1.75 0 1 0-.001 3.499A1.75 1.75 0 0 0 10 10.25ZM5.125 2a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Zm12.5 9.75a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Zm-14.25 8.5a1.75 1.75 0 1 0 3.501-.001 1.75 1.75 0 0 0-3.501.001Z"></path></svg><span class="NavLink-module__title__Q7t0p">GitHub Models</span><span class="NavLink-module__subtitle__X4gkW">Manage and compare prompts</span></div></a></li><li><a href="https://github.com/mcp" data-analytics-event="{"action":"mcp_registry","tag":"link","context":"platform","location":"navbar","label":"mcp_registry_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-mcp NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.795 1.694a4.287 4.287 0 0 1 6.061 0 4.28 4.28 0 0 1 1.181 3.819 4.282 4.282 0 0 1 3.819 1.181 4.287 4.287 0 0 1 0 6.061l-6.793 6.793a.249.249 0 0 0 0 .353l2.617 2.618a.75.75 0 1 1-1.061 1.061l-2.617-2.618a1.75 1.75 0 0 1 0-2.475l6.793-6.793a2.785 2.785 0 1 0-3.939-3.939l-5.9 5.9a.734.734 0 0 1-.249.165.749.749 0 0 1-.812-1.225l5.9-5.901a2.785 2.785 0 1 0-3.939-3.939L2.931 10.68A.75.75 0 1 1 1.87 9.619l7.925-7.925Z"></path><path d="M12.42 4.069a.752.752 0 0 1 1.061 0 .752.752 0 0 1 0 1.061L7.33 11.28a2.788 2.788 0 0 0 0 3.94 2.788 2.788 0 0 0 3.94 0l6.15-6.151a.752.752 0 0 1 1.061 0 .752.752 0 0 1 0 1.061l-6.151 6.15a4.285 4.285 0 1 1-6.06-6.06l6.15-6.151Z"></path></svg><span class="NavLink-module__title__Q7t0p">MCP Registry<sup class="NavLink-module__label__bil7n">New</sup></span><span class="NavLink-module__subtitle__X4gkW">Integrate external tools</span></div></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">DEVELOPER WORKFLOWS</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/features/actions" data-analytics-event="{"action":"actions","tag":"link","context":"platform","location":"navbar","label":"actions_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-workflow NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path></svg><span class="NavLink-module__title__Q7t0p">Actions</span><span class="NavLink-module__subtitle__X4gkW">Automate any workflow</span></div></a></li><li><a href="https://github.com/features/codespaces" data-analytics-event="{"action":"codespaces","tag":"link","context":"platform","location":"navbar","label":"codespaces_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-codespaces NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path></svg><span class="NavLink-module__title__Q7t0p">Codespaces</span><span class="NavLink-module__subtitle__X4gkW">Instant dev environments</span></div></a></li><li><a href="https://github.com/features/issues" data-analytics-event="{"action":"issues","tag":"link","context":"platform","location":"navbar","label":"issues_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-issue-opened NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path></svg><span class="NavLink-module__title__Q7t0p">Issues</span><span class="NavLink-module__subtitle__X4gkW">Plan and track work</span></div></a></li><li><a href="https://github.com/features/code-review" data-analytics-event="{"action":"code_review","tag":"link","context":"platform","location":"navbar","label":"code_review_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-code NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06Zm-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0Z"></path></svg><span class="NavLink-module__title__Q7t0p">Code Review</span><span class="NavLink-module__subtitle__X4gkW">Manage code changes</span></div></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">APPLICATION SECURITY</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/security/advanced-security" data-analytics-event="{"action":"github_advanced_security","tag":"link","context":"platform","location":"navbar","label":"github_advanced_security_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-shield-check NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path></svg><span class="NavLink-module__title__Q7t0p">GitHub Advanced Security</span><span class="NavLink-module__subtitle__X4gkW">Find and fix vulnerabilities</span></div></a></li><li><a href="https://github.com/security/advanced-security/code-security" data-analytics-event="{"action":"code_security","tag":"link","context":"platform","location":"navbar","label":"code_security_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-code-square NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path></svg><span class="NavLink-module__title__Q7t0p">Code security</span><span class="NavLink-module__subtitle__X4gkW">Secure your code as you build</span></div></a></li><li><a href="https://github.com/security/advanced-security/secret-protection" data-analytics-event="{"action":"secret_protection","tag":"link","context":"platform","location":"navbar","label":"secret_protection_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-lock NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6 9V7.25C6 3.845 8.503 1 12 1s6 2.845 6 6.25V9h.5a2.5 2.5 0 0 1 2.5 2.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 19.5v-8A2.5 2.5 0 0 1 5.5 9Zm-1.5 2.5v8a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-13a1 1 0 0 0-1 1Zm3-4.25V9h9V7.25c0-2.67-1.922-4.75-4.5-4.75-2.578 0-4.5 2.08-4.5 4.75Z"></path></svg><span class="NavLink-module__title__Q7t0p">Secret protection</span><span class="NavLink-module__subtitle__X4gkW">Stop leaks before they start</span></div></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ NavGroup-module__hasSeparator__FnMrN"><span class="NavGroup-module__title__Wzxz2">EXPLORE</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/why-github" data-analytics-event="{"action":"why_github","tag":"link","context":"platform","location":"navbar","label":"why_github_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Why GitHub</span></a></li><li><a href="https://docs.github.com" data-analytics-event="{"action":"documentation","tag":"link","context":"platform","location":"navbar","label":"documentation_link_platform_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Documentation</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://github.blog" data-analytics-event="{"action":"blog","tag":"link","context":"platform","location":"navbar","label":"blog_link_platform_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Blog</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://github.blog/changelog" data-analytics-event="{"action":"changelog","tag":"link","context":"platform","location":"navbar","label":"changelog_link_platform_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Changelog</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://github.com/marketplace" data-analytics-event="{"action":"marketplace","tag":"link","context":"platform","location":"navbar","label":"marketplace_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Marketplace</span></a></li></ul></div></li></ul><div class="NavDropdown-module__trailingLinkContainer__VgJGL"><a href="https://github.com/features" data-analytics-event="{"action":"view_all_features","tag":"link","context":"platform","location":"navbar","label":"view_all_features_link_platform_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">View all features</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavLink-module__arrowIcon__amekg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a></div></div></div></li><li><div class="NavDropdown-module__container__l2YeI js-details-container js-header-menu-item"><button type="button" class="NavDropdown-module__button__PEHWX js-details-target" aria-expanded="false">Solutions<svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavDropdown-module__buttonIcon__Tkl8_" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></button><div class="NavDropdown-module__dropdown__xm1jd"><ul class="NavDropdown-module__list__zuCgG"><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">BY COMPANY SIZE</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/enterprise" data-analytics-event="{"action":"enterprises","tag":"link","context":"solutions","location":"navbar","label":"enterprises_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Enterprises</span></a></li><li><a href="https://github.com/team" data-analytics-event="{"action":"small_and_medium_teams","tag":"link","context":"solutions","location":"navbar","label":"small_and_medium_teams_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Small and medium teams</span></a></li><li><a href="https://github.com/enterprise/startups" data-analytics-event="{"action":"startups","tag":"link","context":"solutions","location":"navbar","label":"startups_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Startups</span></a></li><li><a href="https://github.com/solutions/industry/nonprofits" data-analytics-event="{"action":"nonprofits","tag":"link","context":"solutions","location":"navbar","label":"nonprofits_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Nonprofits</span></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">BY USE CASE</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/solutions/use-case/app-modernization" data-analytics-event="{"action":"app_modernization","tag":"link","context":"solutions","location":"navbar","label":"app_modernization_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">App Modernization</span></a></li><li><a href="https://github.com/solutions/use-case/devsecops" data-analytics-event="{"action":"devsecops","tag":"link","context":"solutions","location":"navbar","label":"devsecops_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">DevSecOps</span></a></li><li><a href="https://github.com/solutions/use-case/devops" data-analytics-event="{"action":"devops","tag":"link","context":"solutions","location":"navbar","label":"devops_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">DevOps</span></a></li><li><a href="https://github.com/solutions/use-case/ci-cd" data-analytics-event="{"action":"ci/cd","tag":"link","context":"solutions","location":"navbar","label":"ci/cd_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">CI/CD</span></a></li><li><a href="https://github.com/solutions/use-case" data-analytics-event="{"action":"view_all_use_cases","tag":"link","context":"solutions","location":"navbar","label":"view_all_use_cases_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">View all use cases</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavLink-module__arrowIcon__amekg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">BY INDUSTRY</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/solutions/industry/healthcare" data-analytics-event="{"action":"healthcare","tag":"link","context":"solutions","location":"navbar","label":"healthcare_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Healthcare</span></a></li><li><a href="https://github.com/solutions/industry/financial-services" data-analytics-event="{"action":"financial_services","tag":"link","context":"solutions","location":"navbar","label":"financial_services_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Financial services</span></a></li><li><a href="https://github.com/solutions/industry/manufacturing" data-analytics-event="{"action":"manufacturing","tag":"link","context":"solutions","location":"navbar","label":"manufacturing_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Manufacturing</span></a></li><li><a href="https://github.com/solutions/industry/government" data-analytics-event="{"action":"government","tag":"link","context":"solutions","location":"navbar","label":"government_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Government</span></a></li><li><a href="https://github.com/solutions/industry" data-analytics-event="{"action":"view_all_industries","tag":"link","context":"solutions","location":"navbar","label":"view_all_industries_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">View all industries</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavLink-module__arrowIcon__amekg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a></li></ul></div></li></ul><div class="NavDropdown-module__trailingLinkContainer__VgJGL"><a href="https://github.com/solutions" data-analytics-event="{"action":"view_all_solutions","tag":"link","context":"solutions","location":"navbar","label":"view_all_solutions_link_solutions_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">View all solutions</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavLink-module__arrowIcon__amekg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a></div></div></div></li><li><div class="NavDropdown-module__container__l2YeI js-details-container js-header-menu-item"><button type="button" class="NavDropdown-module__button__PEHWX js-details-target" aria-expanded="false">Resources<svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavDropdown-module__buttonIcon__Tkl8_" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></button><div class="NavDropdown-module__dropdown__xm1jd"><ul class="NavDropdown-module__list__zuCgG"><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">EXPLORE BY TOPIC</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/resources/articles?topic=ai" data-analytics-event="{"action":"ai","tag":"link","context":"resources","location":"navbar","label":"ai_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">AI</span></a></li><li><a href="https://github.com/resources/articles?topic=software-development" data-analytics-event="{"action":"software_development","tag":"link","context":"resources","location":"navbar","label":"software_development_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Software Development</span></a></li><li><a href="https://github.com/resources/articles?topic=devops" data-analytics-event="{"action":"devops","tag":"link","context":"resources","location":"navbar","label":"devops_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">DevOps</span></a></li><li><a href="https://github.com/resources/articles?topic=security" data-analytics-event="{"action":"security","tag":"link","context":"resources","location":"navbar","label":"security_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Security</span></a></li><li><a href="https://github.com/resources/articles" data-analytics-event="{"action":"view_all_topics","tag":"link","context":"resources","location":"navbar","label":"view_all_topics_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">View all topics</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavLink-module__arrowIcon__amekg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">EXPLORE BY TYPE</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/customer-stories" data-analytics-event="{"action":"customer_stories","tag":"link","context":"resources","location":"navbar","label":"customer_stories_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Customer stories</span></a></li><li><a href="https://github.com/resources/events" data-analytics-event="{"action":"events__webinars","tag":"link","context":"resources","location":"navbar","label":"events__webinars_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Events & webinars</span></a></li><li><a href="https://github.com/resources/whitepapers" data-analytics-event="{"action":"ebooks__reports","tag":"link","context":"resources","location":"navbar","label":"ebooks__reports_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Ebooks & reports</span></a></li><li><a href="https://github.com/solutions/executive-insights" data-analytics-event="{"action":"business_insights","tag":"link","context":"resources","location":"navbar","label":"business_insights_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Business insights</span></a></li><li><a href="https://skills.github.com" data-analytics-event="{"action":"github_skills","tag":"link","context":"resources","location":"navbar","label":"github_skills_link_resources_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">GitHub Skills</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">SUPPORT & SERVICES</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://docs.github.com" data-analytics-event="{"action":"documentation","tag":"link","context":"resources","location":"navbar","label":"documentation_link_resources_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Documentation</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://support.github.com" data-analytics-event="{"action":"customer_support","tag":"link","context":"resources","location":"navbar","label":"customer_support_link_resources_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Customer support</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://github.com/orgs/community/discussions" data-analytics-event="{"action":"community_forum","tag":"link","context":"resources","location":"navbar","label":"community_forum_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Community forum</span></a></li><li><a href="https://github.com/trust-center" data-analytics-event="{"action":"trust_center","tag":"link","context":"resources","location":"navbar","label":"trust_center_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Trust center</span></a></li><li><a href="https://github.com/partners" data-analytics-event="{"action":"partners","tag":"link","context":"resources","location":"navbar","label":"partners_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Partners</span></a></li></ul></div></li></ul><div class="NavDropdown-module__trailingLinkContainer__VgJGL"><a href="https://github.com/resources" data-analytics-event="{"action":"view_all_resources","tag":"link","context":"resources","location":"navbar","label":"view_all_resources_link_resources_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">View all resources</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavLink-module__arrowIcon__amekg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></a></div></div></div></li><li><div class="NavDropdown-module__container__l2YeI js-details-container js-header-menu-item"><button type="button" class="NavDropdown-module__button__PEHWX js-details-target" aria-expanded="false">Open Source<svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavDropdown-module__buttonIcon__Tkl8_" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></button><div class="NavDropdown-module__dropdown__xm1jd"><ul class="NavDropdown-module__list__zuCgG"><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">COMMUNITY</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/sponsors" data-analytics-event="{"action":"github_sponsors","tag":"link","context":"open_source","location":"navbar","label":"github_sponsors_link_open_source_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-sponsor-tiers NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M16.004 1.25C18.311 1.25 20 3.128 20 5.75c0 2.292-1.23 4.464-3.295 6.485-.481.47-.98.909-1.482 1.31l.265 1.32 1.375 7.5a.75.75 0 0 1-.982.844l-3.512-1.207a.75.75 0 0 0-.488 0L8.37 23.209a.75.75 0 0 1-.982-.844l1.378-7.512.261-1.309c-.5-.4-1-.838-1.481-1.31C5.479 10.215 4.25 8.043 4.25 5.75c0-2.622 1.689-4.5 3.996-4.5 1.55 0 2.947.752 3.832 1.967l.047.067.047-.067a4.726 4.726 0 0 1 3.612-1.962l.22-.005ZM13.89 14.531c-.418.285-.828.542-1.218.77l-.18.103a.75.75 0 0 1-.734 0l-.071-.04-.46-.272c-.282-.173-.573-.36-.868-.562l-.121.605-1.145 6.239 2.3-.79a2.248 2.248 0 0 1 1.284-.054l.18.053 2.299.79-1.141-6.226-.125-.616ZM16.004 2.75c-1.464 0-2.731.983-3.159 2.459-.209.721-1.231.721-1.44 0-.428-1.476-1.695-2.459-3.16-2.459-1.44 0-2.495 1.173-2.495 3 0 1.811 1.039 3.647 2.844 5.412a19.624 19.624 0 0 0 3.734 2.84l-.019-.011-.184-.111.147-.088a19.81 19.81 0 0 0 3.015-2.278l.37-.352C17.46 9.397 18.5 7.561 18.5 5.75c0-1.827-1.055-3-2.496-3Z"></path></svg><span class="NavLink-module__title__Q7t0p">GitHub Sponsors</span><span class="NavLink-module__subtitle__X4gkW">Fund open source developers</span></div></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">PROGRAMS</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://securitylab.github.com" data-analytics-event="{"action":"security_lab","tag":"link","context":"open_source","location":"navbar","label":"security_lab_link_open_source_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Security Lab</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://maintainers.github.com" data-analytics-event="{"action":"maintainer_community","tag":"link","context":"open_source","location":"navbar","label":"maintainer_community_link_open_source_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Maintainer Community</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://github.com/accelerator" data-analytics-event="{"action":"accelerator","tag":"link","context":"open_source","location":"navbar","label":"accelerator_link_open_source_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Accelerator</span></a></li><li><a href="https://stars.github.com" data-analytics-event="{"action":"github_stars","tag":"link","context":"open_source","location":"navbar","label":"github_stars_link_open_source_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">GitHub Stars</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li><li><a href="https://archiveprogram.github.com" data-analytics-event="{"action":"archive_program","tag":"link","context":"open_source","location":"navbar","label":"archive_program_link_open_source_navbar"}" class="NavLink-module__link__EG3d4" target="_blank" rel="noreferrer"><span class="NavLink-module__title__Q7t0p">Archive Program</span><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-link-external NavLink-module__externalIcon__eWIry" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">REPOSITORIES</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/topics" data-analytics-event="{"action":"topics","tag":"link","context":"open_source","location":"navbar","label":"topics_link_open_source_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Topics</span></a></li><li><a href="https://github.com/trending" data-analytics-event="{"action":"trending","tag":"link","context":"open_source","location":"navbar","label":"trending_link_open_source_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Trending</span></a></li><li><a href="https://github.com/collections" data-analytics-event="{"action":"collections","tag":"link","context":"open_source","location":"navbar","label":"collections_link_open_source_navbar"}" class="NavLink-module__link__EG3d4"><span class="NavLink-module__title__Q7t0p">Collections</span></a></li></ul></div></li></ul></div></div></li><li><div class="NavDropdown-module__container__l2YeI js-details-container js-header-menu-item"><button type="button" class="NavDropdown-module__button__PEHWX js-details-target" aria-expanded="false">Enterprise<svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-chevron-right NavDropdown-module__buttonIcon__Tkl8_" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg></button><div class="NavDropdown-module__dropdown__xm1jd"><ul class="NavDropdown-module__list__zuCgG"><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">ENTERPRISE SOLUTIONS</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/enterprise" data-analytics-event="{"action":"enterprise_platform","tag":"link","context":"enterprise","location":"navbar","label":"enterprise_platform_link_enterprise_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-stack NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path></svg><span class="NavLink-module__title__Q7t0p">Enterprise platform</span><span class="NavLink-module__subtitle__X4gkW">AI-powered developer platform</span></div></a></li></ul></div></li><li><div class="NavGroup-module__group__W8SqJ"><span class="NavGroup-module__title__Wzxz2">AVAILABLE ADD-ONS</span><ul class="NavGroup-module__list__UCOFy"><li><a href="https://github.com/security/advanced-security" data-analytics-event="{"action":"github_advanced_security","tag":"link","context":"enterprise","location":"navbar","label":"github_advanced_security_link_enterprise_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-shield-check NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path></svg><span class="NavLink-module__title__Q7t0p">GitHub Advanced Security</span><span class="NavLink-module__subtitle__X4gkW">Enterprise-grade security features</span></div></a></li><li><a href="https://github.com/features/copilot/copilot-business" data-analytics-event="{"action":"copilot_for_business","tag":"link","context":"enterprise","location":"navbar","label":"copilot_for_business_link_enterprise_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-copilot NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path></svg><span class="NavLink-module__title__Q7t0p">Copilot for Business</span><span class="NavLink-module__subtitle__X4gkW">Enterprise-grade AI features</span></div></a></li><li><a href="https://github.com/premium-support" data-analytics-event="{"action":"premium_support","tag":"link","context":"enterprise","location":"navbar","label":"premium_support_link_enterprise_navbar"}" class="NavLink-module__link__EG3d4"><div class="NavLink-module__text__XvpLQ"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-comment-discussion NavLink-module__icon__ltGNM" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path></svg><span class="NavLink-module__title__Q7t0p">Premium Support</span><span class="NavLink-module__subtitle__X4gkW">Enterprise-grade 24/7 support</span></div></a></li></ul></div></li></ul></div></div></li><li><a href="https://github.com/pricing" data-analytics-event="{"action":"pricing","tag":"link","context":"pricing","location":"navbar","label":"pricing_link_pricing_navbar"}" class="NavLink-module__link__EG3d4 MarketingNavigation-module__navLink__hUomM"><span class="NavLink-module__title__Q7t0p">Pricing</span></a></li></ul></nav><script type="application/json" id="__PRIMER_DATA__R_0___">{"resolvedServerColorMode":"day"}</script></div>
|
||
</react-partial>
|
||
|
||
|
||
|
||
<div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center tmp-mt-3 tmp-mt-lg-0 text-lg-left tmp-ml-lg-3">
|
||
|
||
|
||
|
||
<qbsearch-input class="search-input" data-scope="repo:rxi/microui" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="8-dgE8bNvjHTqEmWQSNlphLAppdi6oJCqEZu3WGPGApVCY7vcKiVfW8oPQDUZ9CePqWuaKxCUm5z5yOuSWRR0g" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="rxi/microui" data-current-org="" data-current-owner="rxi" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true">
|
||
<div
|
||
class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center tmp-mr-4 rounded"
|
||
data-action="click:qbsearch-input#searchInputContainerClicked"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none"
|
||
data-target="qbsearch-input.inputButton"
|
||
aria-label="Search or jump to…"
|
||
aria-haspopup="dialog"
|
||
placeholder="Search or jump to..."
|
||
data-hotkey=s,/
|
||
autocapitalize="off"
|
||
data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}"
|
||
data-action="click:qbsearch-input#handleExpand"
|
||
>
|
||
<div class="mr-2 color-fg-muted">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search">
|
||
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
|
||
</svg>
|
||
</div>
|
||
<span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span>
|
||
<div class="d-flex" data-target="qbsearch-input.hotkeyIndicator">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg>
|
||
</div>
|
||
</button>
|
||
|
||
<input type="hidden" name="type" class="js-site-search-type-field">
|
||
|
||
|
||
<div class="Overlay--hidden " data-modal-dialog-overlay>
|
||
<modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto">
|
||
<h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1>
|
||
<div class="Overlay-body Overlay-body--paddingNone">
|
||
|
||
<div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container"
|
||
style="border-radius: 12px;"
|
||
data-target="qbsearch-input.queryBuilderContainer"
|
||
hidden
|
||
>
|
||
<!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get">
|
||
<query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder">
|
||
<div class="FormControl FormControl--fullWidth">
|
||
<label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only">
|
||
Search
|
||
</label>
|
||
<div
|
||
class="QueryBuilder-StyledInput width-fit "
|
||
data-target="query-builder.styledInput"
|
||
>
|
||
<span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual">
|
||
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
|
||
</svg>
|
||
</span>
|
||
<div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer">
|
||
<div
|
||
aria-hidden="true"
|
||
class="QueryBuilder-StyledInputContent"
|
||
data-target="query-builder.styledInputContent"
|
||
></div>
|
||
<div class="QueryBuilder-InputWrapper">
|
||
<div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div>
|
||
<input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-cec40d6d-5add-4f9e-bdb4-59fb380d376c" data-target="query-builder.input" data-action="
|
||
input:query-builder#inputChange
|
||
blur:query-builder#inputBlur
|
||
keydown:query-builder#inputKeydown
|
||
focus:query-builder#inputFocus
|
||
" data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" />
|
||
</div>
|
||
</div>
|
||
<span data-target="query-builder.clearButton" hidden>
|
||
<span class="sr-only" id="query-builder-test-clear">Clear</span>
|
||
<button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-action="
|
||
click:query-builder#clear
|
||
focus:query-builder#clearButtonFocus
|
||
blur:query-builder#clearButtonBlur
|
||
" variant="small" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 tmp-mr-1 px-2 tmp-px-2 py-0 tmp-py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual">
|
||
<path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path>
|
||
</svg>
|
||
</button>
|
||
|
||
</span>
|
||
</div>
|
||
<template id="search-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search">
|
||
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="code-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code">
|
||
<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="file-code-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code">
|
||
<path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="history-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history">
|
||
<path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="repo-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo">
|
||
<path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="bookmark-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark">
|
||
<path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="plus-circle-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle">
|
||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="circle-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill">
|
||
<path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="trash-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash">
|
||
<path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="team-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people">
|
||
<path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="project-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project">
|
||
<path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="pencil-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil">
|
||
<path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="copilot-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot">
|
||
<path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="copilot-error-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error">
|
||
<path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="workflow-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow">
|
||
<path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="book-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book">
|
||
<path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="code-review-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review">
|
||
<path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="codespaces-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces">
|
||
<path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="comment-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment">
|
||
<path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="comment-discussion-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion">
|
||
<path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="organization-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization">
|
||
<path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="rocket-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket">
|
||
<path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="shield-check-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check">
|
||
<path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="heart-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart">
|
||
<path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="server-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server">
|
||
<path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="globe-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe">
|
||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="issue-opened-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened">
|
||
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="device-mobile-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile">
|
||
<path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="package-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package">
|
||
<path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="credit-card-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card">
|
||
<path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="play-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play">
|
||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="gift-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift">
|
||
<path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="code-square-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square">
|
||
<path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<template id="device-desktop-icon">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop">
|
||
<path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path>
|
||
</svg>
|
||
</template>
|
||
|
||
<div class="position-relative">
|
||
<ul
|
||
role="listbox"
|
||
class="ActionListWrap QueryBuilder-ListWrap"
|
||
aria-label="Suggestions"
|
||
data-action="
|
||
combobox-commit:query-builder#comboboxCommit
|
||
mousedown:query-builder#resultsMousedown
|
||
"
|
||
data-target="query-builder.resultsList"
|
||
data-persist-list=false
|
||
id="query-builder-test-results"
|
||
tabindex="-1"
|
||
></ul>
|
||
|
||
</div>
|
||
<div class="FormControl-inlineValidation" id="validation-cec40d6d-5add-4f9e-bdb4-59fb380d376c" hidden="hidden">
|
||
<span class="FormControl-inlineValidation--visual">
|
||
<svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
|
||
<path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
|
||
</svg>
|
||
</span>
|
||
<span></span>
|
||
</div> </div>
|
||
<div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div>
|
||
</query-builder></form>
|
||
<div class="d-flex flex-row color-fg-muted tmp-px-3 text-small color-bg-default search-feedback-prompt">
|
||
<a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2 tmp-ml-2">Search syntax tips</a> <div class="d-flex flex-1"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</modal-dialog></div>
|
||
</div>
|
||
<div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div>
|
||
<div class="color-fg-default">
|
||
|
||
<dialog-helper>
|
||
<dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll">
|
||
<div data-view-component="true" class="Overlay-header">
|
||
<div class="Overlay-headerContentWrap">
|
||
<div class="Overlay-titleWrap">
|
||
<h1 class="Overlay-title " id="feedback-dialog-title">
|
||
Provide feedback
|
||
</h1>
|
||
|
||
</div>
|
||
<div class="Overlay-actionWrap">
|
||
<button data-close-dialog-id="feedback-dialog" aria-label="Close" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
|
||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg></button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<scrollable-region data-labelled-by="feedback-dialog-title">
|
||
<div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="GkOjnpLzaYQaMc2iUTYlN6wyM2VjFzdCtm9RYMDTDrZoPBEOOvwfY9pDq189B/S4WLvXDiZ2trUrWC02d5jW1A==" />
|
||
<p>We read every piece of feedback, and take your input very seriously.</p>
|
||
<textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea>
|
||
<input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox">
|
||
<label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label>
|
||
</form></div>
|
||
</scrollable-region>
|
||
<div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel
|
||
</button>
|
||
<button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback
|
||
</button>
|
||
</div>
|
||
</dialog></dialog-helper>
|
||
|
||
<custom-scopes data-target="qbsearch-input.customScopesManager">
|
||
|
||
<dialog-helper>
|
||
<dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll">
|
||
<div data-view-component="true" class="Overlay-header Overlay-header--divided">
|
||
<div class="Overlay-headerContentWrap">
|
||
<div class="Overlay-titleWrap">
|
||
<h1 class="Overlay-title " id="custom-scopes-dialog-title">
|
||
Saved searches
|
||
</h1>
|
||
<h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2>
|
||
</div>
|
||
<div class="Overlay-actionWrap">
|
||
<button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
|
||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg></button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<scrollable-region data-labelled-by="custom-scopes-dialog-title">
|
||
<div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div>
|
||
|
||
<div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm">
|
||
<!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="Q+mkbypeFoCtmkK2P+XrUe+URjXl0iYmLXStLAiX7z9ipT01K+ATO1FJOW19DWgPHFK12scCHnRf9HwKHcn5sw==" />
|
||
<div data-target="custom-scopes.customScopesModalDialogFlash"></div>
|
||
|
||
<input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField">
|
||
|
||
<div class="form-group">
|
||
<label for="custom_scope_name">Name</label>
|
||
<auto-check src="/search/custom_scopes/check_name" required>
|
||
<input
|
||
type="text"
|
||
name="custom_scope_name"
|
||
id="custom_scope_name"
|
||
data-target="custom-scopes.customScopesNameField"
|
||
class="form-control"
|
||
autocomplete="off"
|
||
placeholder="github-ruby"
|
||
required
|
||
maxlength="50">
|
||
<input type="hidden" data-csrf="true" value="vt22MvSW1cacEy5tYG6+X71+FtbGcZuIeZjgULSzz9SqMirFQsCSUM+JREfJ3Kw9et9n2YuIYH0d6xhpvFTE0g==" />
|
||
</auto-check>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="custom_scope_query">Query</label>
|
||
<input
|
||
type="text"
|
||
name="custom_scope_query"
|
||
id="custom_scope_query"
|
||
data-target="custom-scopes.customScopesQueryField"
|
||
class="form-control"
|
||
autocomplete="off"
|
||
placeholder="(repo:mona/a OR repo:mona/b) AND lang:python"
|
||
required
|
||
maxlength="500">
|
||
</div>
|
||
|
||
<p class="text-small color-fg-muted">
|
||
To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>.
|
||
</p>
|
||
</form> </div>
|
||
|
||
<div data-target="custom-scopes.manageCustomScopesForm">
|
||
<div data-target="custom-scopes.list"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</scrollable-region>
|
||
<div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel
|
||
</button>
|
||
<button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search
|
||
</button>
|
||
</div>
|
||
</dialog></dialog-helper>
|
||
</custom-scopes>
|
||
</div>
|
||
</qbsearch-input>
|
||
|
||
|
||
<div class="position-relative HeaderMenu-link-wrap d-lg-inline-block">
|
||
<a
|
||
href="/login?return_to=https%3A%2F%2Fgithub.com%2Frxi%2Fmicroui%2Fblob%2Fmaster%2Fdoc%2Fusage.md"
|
||
class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded px-2 py-1"
|
||
style="margin-left: 12px;"
|
||
data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/rxi/microui/blob/master/doc/usage.md","user_id":null}}" data-hydro-click-hmac="7cdd986d4f5ca9a0fdea330bb2a561ec575cd91a8e0742c575348424eb6818d9"
|
||
data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}"
|
||
>
|
||
Sign in
|
||
</a>
|
||
</div>
|
||
|
||
<a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fblob%2Fshow&source=header-repo&source_repo=rxi%2Fmicroui"
|
||
class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1"
|
||
data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/rxi/microui/blob/master/doc/usage.md","user_id":null}}" data-hydro-click-hmac="7cdd986d4f5ca9a0fdea330bb2a561ec575cd91a8e0742c575348424eb6818d9"
|
||
data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/blob/show;ref_cta:Sign up;ref_loc:header logged out"}"
|
||
>
|
||
Sign up
|
||
</a>
|
||
|
||
<div class="AppHeader-appearanceSettings">
|
||
<react-partial-anchor>
|
||
<button data-target="react-partial-anchor.anchor" id="icon-button-f1ed9c8b-59fa-451b-b975-fe63510450e7" aria-labelledby="tooltip-8bc6f88e-6c0c-4f08-b0d2-4e2375d711fb" type="button" disabled="disabled" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium AppHeader-button HeaderMenu-link border cursor-wait"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-sliders Button-visual">
|
||
<path d="M15 2.75a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75Zm-8.5.75v1.25a.75.75 0 0 0 1.5 0v-4a.75.75 0 0 0-1.5 0V2H1.75a.75.75 0 0 0 0 1.5H6.5Zm1.25 5.25a.75.75 0 0 0 0-1.5h-6a.75.75 0 0 0 0 1.5h6ZM15 8a.75.75 0 0 1-.75.75H11.5V10a.75.75 0 1 1-1.5 0V6a.75.75 0 0 1 1.5 0v1.25h2.75A.75.75 0 0 1 15 8Zm-9 5.25v-2a.75.75 0 0 0-1.5 0v1.25H1.75a.75.75 0 0 0 0 1.5H4.5v1.25a.75.75 0 0 0 1.5 0v-2Zm9 0a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z"></path>
|
||
</svg>
|
||
</button><tool-tip id="tooltip-8bc6f88e-6c0c-4f08-b0d2-4e2375d711fb" for="icon-button-f1ed9c8b-59fa-451b-b975-fe63510450e7" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Appearance settings</tool-tip>
|
||
|
||
<template data-target="react-partial-anchor.template">
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react-css.00ba154d21e54e53.module.css" />
|
||
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/appearance-settings.babbb060397858d0.module.css" />
|
||
|
||
<react-partial
|
||
partial-name="appearance-settings"
|
||
data-ssr="false"
|
||
data-attempted-ssr="false"
|
||
data-react-profiling="false"
|
||
>
|
||
|
||
<script type="application/json" data-target="react-partial.embeddedData">{"props":{}}</script>
|
||
<div data-target="react-partial.reactRoot"></div>
|
||
</react-partial>
|
||
|
||
|
||
</template>
|
||
</react-partial-anchor>
|
||
</div>
|
||
|
||
<button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Resetting focus</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
|
||
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
|
||
</svg>
|
||
<span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span>
|
||
<span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span>
|
||
<span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span>
|
||
|
||
<button id="icon-button-826a9c3d-0d50-41a6-93d0-77c37dcd6b65" aria-labelledby="tooltip-efa1dc30-9f40-4ac2-b7a9-246ccd1d2607" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual">
|
||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</button><tool-tip id="tooltip-efa1dc30-9f40-4ac2-b7a9-246ccd1d2607" for="icon-button-826a9c3d-0d50-41a6-93d0-77c37dcd6b65" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="start-of-content" class="show-on-focus"></div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div id="js-flash-container" class="flash-container" data-turbo-replace>
|
||
|
||
|
||
|
||
|
||
<template class="js-flash-template">
|
||
|
||
<div class="flash flash-full {{ className }}">
|
||
<div >
|
||
<button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
|
||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</button>
|
||
<div aria-atomic="true" role="alert" class="js-flash-alert">
|
||
|
||
<div>{{ message }}</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div
|
||
class="application-main "
|
||
data-commit-hovercards-enabled
|
||
data-discussion-hovercards-enabled
|
||
data-issue-and-pr-hovercards-enabled
|
||
data-project-hovercards-enabled
|
||
>
|
||
<div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
|
||
<main id="js-repo-pjax-container" >
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div id="repository-container-header" class="tmp-pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace>
|
||
|
||
<div class="d-flex flex-nowrap flex-justify-end tmp-mb-3 tmp-px-3 tmp-px-lg-5" style="gap: 1rem;">
|
||
|
||
<div class="flex-auto min-width-0 width-fit">
|
||
|
||
<div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2 tmp-mr-2">
|
||
<path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path>
|
||
</svg>
|
||
|
||
<span class="author flex-self-stretch" itemprop="author">
|
||
<a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/rxi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/rxi">
|
||
rxi
|
||
</a> </span>
|
||
<span class="mx-1 flex-self-stretch color-fg-muted">/</span>
|
||
<strong itemprop="name" class="mr-2 flex-self-stretch">
|
||
<a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/rxi/microui">microui</a>
|
||
</strong>
|
||
|
||
<span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;">
|
||
<ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;">
|
||
|
||
<li>
|
||
<include-fragment src="/rxi/microui/sponsor_button" data-nonce="v2:e0672f82-d347-7703-92d1-f6d281f58d6d" data-view-component="true">
|
||
|
||
<div data-show-on-forbidden-error hidden>
|
||
<div class="Box">
|
||
<div class="blankslate-container">
|
||
<div data-view-component="true" class="blankslate blankslate-spacious color-bg-default rounded-2">
|
||
|
||
|
||
<h3 data-view-component="true" class="blankslate-heading"> Uh oh!
|
||
</h3>
|
||
<p data-view-component="true" class="blankslate-description"> <p class="color-fg-muted my-2 mb-2 ws-normal">There was an error while loading. <a class="Link--inTextBlock" data-turbo="false" href="" aria-label="Please reload this page">Please reload this page</a>.</p>
|
||
</p>
|
||
|
||
</div> </div>
|
||
</div> </div>
|
||
</include-fragment>
|
||
</li>
|
||
|
||
|
||
|
||
<li>
|
||
<a href="/login?return_to=%2Frxi%2Fmicroui" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/rxi/microui/blob/master/doc/usage.md","user_id":null}}" data-hydro-click-hmac="e244658171ffe681351efcd0bab4c3f55c818cd841c305c1e6bff46a741519b3" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2 tmp-mr-2">
|
||
<path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path>
|
||
</svg>Notifications
|
||
</a> <tool-tip id="tooltip-81d87b12-bee9-4348-875c-ae4d5a5cc27a" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a icon="repo-forked" id="fork-button" href="/login?return_to=%2Frxi%2Fmicroui" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":149854705,"auth_type":"LOG_IN","originating_url":"https://github.com/rxi/microui/blob/master/doc/usage.md","user_id":null}}" data-hydro-click-hmac="26d9d3edf64701cb058f3d376106bbed0fb477f8844da1b4db0bc7135da75227" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2 tmp-mr-2">
|
||
<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
|
||
</svg>Fork
|
||
<span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="364" data-view-component="true" class="Counter">364</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<div data-view-component="true" class="BtnGroup d-flex">
|
||
<a href="/login?return_to=%2Frxi%2Fmicroui" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":149854705,"auth_type":"LOG_IN","originating_url":"https://github.com/rxi/microui/blob/master/doc/usage.md","user_id":null}}" data-hydro-click-hmac="b6f769b6782e333d414c8a953c2e65950296afca1bdcbc138e74f40fbf8477f4" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2 tmp-mr-2">
|
||
<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
|
||
</svg><span data-view-component="true" class="d-inline">
|
||
Star
|
||
</span> <span id="repo-stars-counter-star" aria-label="5845 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="5,845" data-view-component="true" class="Counter js-social-count">5.8k</span>
|
||
</a></div>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="responsive-meta-container" data-turbo-replace>
|
||
</div>
|
||
|
||
|
||
<nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 tmp-px-3 px-md-4 tmp-px-md-4 px-lg-5 tmp-px-lg-5">
|
||
|
||
<ul data-view-component="true" class="UnderlineNav-body list-style-none">
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="code-tab" href="/rxi/microui" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /rxi/microui" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-command-id="repositories:go-to-code" data-react-nav="code-view" data-react-nav-anchor="code-view-repo-link" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
<span data-content="Code">Code</span>
|
||
<span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span>
|
||
|
||
|
||
|
||
</a></li>
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="issues-tab" href="/rxi/microui/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /rxi/microui/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-command-id="repositories:go-to-issues" data-react-nav="issues-react" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
|
||
</svg>
|
||
<span data-content="Issues">Issues</span>
|
||
<span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="22" data-view-component="true" class="Counter">22</span>
|
||
|
||
|
||
|
||
</a></li>
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="pull-requests-tab" href="/rxi/microui/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /rxi/microui/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-command-id="repositories:go-to-pull-requests" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path>
|
||
</svg>
|
||
<span data-content="Pull requests">Pull requests</span>
|
||
<span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="16" data-view-component="true" class="Counter">16</span>
|
||
|
||
|
||
|
||
</a></li>
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="actions-tab" href="/rxi/microui/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /rxi/microui/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-command-id="repositories:go-to-actions" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path>
|
||
</svg>
|
||
<span data-content="Actions">Actions</span>
|
||
<span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span>
|
||
|
||
|
||
|
||
</a></li>
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="projects-tab" href="/rxi/microui/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /rxi/microui/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-command-id="repositories:go-to-projects" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path>
|
||
</svg>
|
||
<span data-content="Projects">Projects</span>
|
||
<span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span>
|
||
|
||
|
||
|
||
</a></li>
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="security-and-quality-tab" href="/rxi/microui/security" data-tab-item="i5security-and-quality-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /rxi/microui/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-command-id="repositories:go-to-security" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security and quality","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
|
||
</svg>
|
||
<span data-content="Security and quality">Security and quality</span>
|
||
<span id="security-and-quality-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span>
|
||
|
||
|
||
|
||
</a></li>
|
||
<li data-view-component="true" class="d-inline-flex">
|
||
<a id="insights-tab" href="/rxi/microui/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /rxi/microui/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-command-id="repositories:go-to-insights" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
|
||
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline">
|
||
<path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
|
||
</svg>
|
||
<span data-content="Insights">Insights</span>
|
||
<span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span>
|
||
|
||
|
||
|
||
</a></li>
|
||
</ul>
|
||
<div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 tmp-pr-3 pr-md-4 tmp-pr-md-4 pr-lg-5 tmp-pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true">
|
||
<focus-group direction="vertical" mnemonics retain>
|
||
<button id="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-button" popovertarget="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-overlay" aria-controls="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-list" aria-haspopup="true" aria-labelledby="tooltip-a631206c-2c21-43cf-988e-711091fd6498" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual">
|
||
<path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
|
||
</svg>
|
||
</button><tool-tip id="tooltip-a631206c-2c21-43cf-988e-711091fd6498" for="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip>
|
||
|
||
|
||
<anchored-position data-target="action-menu.overlay" id="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-overlay" anchor="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true">
|
||
<div data-view-component="true" class="Overlay Overlay--size-auto">
|
||
|
||
<div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list>
|
||
<div data-view-component="true">
|
||
<ul aria-labelledby="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-button" id="action-menu-615df279-ef34-442b-93ee-d1b8fa291e63-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap">
|
||
<li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-21ee382d-d390-4c16-b4e3-58def344583e" href="/rxi/microui" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code">
|
||
<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Code
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-faaab1ed-10e0-4891-bee5-610b0a67b5c1" href="/rxi/microui/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened">
|
||
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Issues
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-abbe330c-5dcd-4a14-8bee-0eea70557295" href="/rxi/microui/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request">
|
||
<path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Pull requests
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li hidden="hidden" data-menu-item="i3actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-918ed193-76f5-4b85-9c30-d6eb22ceed6f" href="/rxi/microui/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play">
|
||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Actions
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li hidden="hidden" data-menu-item="i4projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-475635d4-4782-4178-b354-c0dbf471ca3e" href="/rxi/microui/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table">
|
||
<path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Projects
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li hidden="hidden" data-menu-item="i5security-and-quality-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-2e905dc7-e2b9-4955-9c76-209c92183a9d" href="/rxi/microui/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield">
|
||
<path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Security and quality
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li hidden="hidden" data-menu-item="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem">
|
||
|
||
|
||
<a tabindex="-1" id="item-09b4ee35-fa32-49b7-824e-9ec8d5f08778" href="/rxi/microui/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
|
||
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph">
|
||
<path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
|
||
</svg>
|
||
</span>
|
||
|
||
<span data-view-component="true" class="ActionListItem-label">
|
||
Insights
|
||
</span>
|
||
</a>
|
||
|
||
</li>
|
||
</ul>
|
||
</div></action-list>
|
||
|
||
|
||
</div>
|
||
|
||
</div></anchored-position> </focus-group>
|
||
</action-menu></div>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class="">
|
||
<div id="repo-content-pjax-container" class="repository-content " >
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<react-app
|
||
app-name="code-view"
|
||
initial-path="/rxi/microui/blob/master/doc/usage.md"
|
||
style="display: block; min-height: calc(100vh - 64px);"
|
||
data-attempted-ssr="true"
|
||
data-ssr="true"
|
||
data-lazy="false"
|
||
data-alternate="false"
|
||
data-data-router-enabled="true"
|
||
data-react-profiling="false"
|
||
>
|
||
|
||
<script type="application/json" data-target="react-app.embeddedData">{"payload":{"codeViewBlobRoute":{"csv":null,"csvError":null,"headerInfo":{"toc":[{"level":1,"text":"Usage","anchor":"usage","htmlText":"Usage"},{"level":2,"text":"Overview","anchor":"overview","htmlText":"Overview"},{"level":2,"text":"Getting Started","anchor":"getting-started","htmlText":"Getting Started"},{"level":2,"text":"Layout System","anchor":"layout-system","htmlText":"Layout System"},{"level":2,"text":"Style Customisation","anchor":"style-customisation","htmlText":"Style Customisation"},{"level":2,"text":"Custom Controls","anchor":"custom-controls","htmlText":"Custom Controls"}]},"issueTemplate":null,"discussionTemplate":null,"richText":"\u003carticle class=\"markdown-body entry-content container-lg\" itemprop=\"text\"\u003e\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eUsage\u003c/h1\u003e\u003ca id=\"user-content-usage\" class=\"anchor\" aria-label=\"Permalink: Usage\" href=\"#usage\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ca href=\"#overview\"\u003eOverview\u003c/a\u003e\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ca href=\"#layout-system\"\u003eLayout System\u003c/a\u003e\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ca href=\"#style-customisation\"\u003eStyle Customisation\u003c/a\u003e\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003ca href=\"#custom-controls\"\u003eCustom Controls\u003c/a\u003e\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eOverview\u003c/h2\u003e\u003ca id=\"user-content-overview\" class=\"anchor\" aria-label=\"Permalink: Overview\" href=\"#overview\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe overall structure when using the library is as follows:\u003c/p\u003e\n\u003cdiv class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"initialise `mu_Context`\n\nmain loop:\n call `mu_input_...` functions\n call `mu_begin()`\n process ui\n call `mu_end()`\n iterate commands using `mu_command_next()`\"\u003e\u003cpre class=\"notranslate\"\u003e\u003ccode\u003einitialise `mu_Context`\n\nmain loop:\n call `mu_input_...` functions\n call `mu_begin()`\n process ui\n call `mu_end()`\n iterate commands using `mu_command_next()`\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eGetting Started\u003c/h2\u003e\u003ca id=\"user-content-getting-started\" class=\"anchor\" aria-label=\"Permalink: Getting Started\" href=\"#getting-started\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBefore use a \u003ccode\u003emu_Context\u003c/code\u003e should be initialised:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_Context *ctx = malloc(sizeof(mu_Context));\nmu_init(ctx);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003emu_Context\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e*\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003emalloc\u003c/span\u003e(\u003cspan class=\"pl-k\"\u003esizeof\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003emu_Context\u003c/span\u003e));\n\u003cspan class=\"pl-en\"\u003emu_init\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eFollowing which the context's \u003ccode\u003etext_width\u003c/code\u003e and \u003ccode\u003etext_height\u003c/code\u003e callback functions\nshould be set:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"ctx-\u0026gt;text_width = text_width;\nctx-\u0026gt;text_height = text_height;\"\u003e\u003cpre\u003e\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext_width\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etext_width\u003c/span\u003e;\n\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext_height\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003etext_height\u003c/span\u003e;\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIn your main loop you should first pass user input to microui using the\n\u003ccode\u003emu_input_...\u003c/code\u003e functions. It is safe to call the input functions multiple times\nif the same input event occurs in a single frame.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAfter handling the input the \u003ccode\u003emu_begin()\u003c/code\u003e function must be called before\nprocessing your UI:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_begin(ctx);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003emu_begin\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eBefore any controls can be used we must begin a window using one of the\n\u003ccode\u003emu_begin_window...\u003c/code\u003e or \u003ccode\u003emu_begin_popup...\u003c/code\u003e functions. The \u003ccode\u003emu_begin_...\u003c/code\u003e window\nfunctions return a truthy value if the window is open, if this is not the case\nwe should not process the window any further. When we are finished processing\nthe window's ui the \u003ccode\u003emu_end_...\u003c/code\u003e window function should be called.\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"if (mu_begin_window(ctx, \u0026quot;My Window\u0026quot;, mu_rect(10, 10, 300, 400))) {\n /* process ui here... */\n mu_end_window(ctx);\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-en\"\u003emu_begin_window\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"My Window\"\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003emu_rect\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e300\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e400\u003c/span\u003e))) {\n \u003cspan class=\"pl-c\"\u003e/* process ui here... */\u003c/span\u003e\n \u003cspan class=\"pl-en\"\u003emu_end_window\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIt is safe to nest \u003ccode\u003emu_begin_window()\u003c/code\u003e calls, this can be useful for things like\ncontext menus; the windows will still render separate from one another like\nnormal.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eWhile inside a window block we can safely process controls. Controls that allow\nuser interaction return a bitset of \u003ccode\u003eMU_RES_...\u003c/code\u003e values. Some controls — such\nas buttons — can only potentially return a single \u003ccode\u003eMU_RES_...\u003c/code\u003e, thus their\nreturn value can be treated as a boolean:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"if (mu_button(ctx, \u0026quot;My Button\u0026quot;)) {\n printf(\u0026quot;'My Button' was pressed\\n\u0026quot;);\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-en\"\u003emu_button\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"My Button\"\u003c/span\u003e)) {\n \u003cspan class=\"pl-en\"\u003eprintf\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"'My Button' was pressed\\n\"\u003c/span\u003e);\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe library generates unique IDs for controls internally to keep track of which\nare focused, hovered, etc. These are typically generated from the name/label\npassed to the function, or, in the case of sliders and checkboxes the value\npointer. An issue arises then if you have several buttons in a window or panel\nthat use the same label. The \u003ccode\u003emu_push_id()\u003c/code\u003e and \u003ccode\u003emu_pop_id()\u003c/code\u003e functions are\nprovided for such situations, allowing you to push additional data that will be\nmixed into the unique ID:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"for (int i = 0; i \u0026lt; 10; i++) {\n mu_push_id(ctx, \u0026amp;i, sizeof(i));\n if (mu_button(ctx, \u0026quot;x\u0026quot;)) {\n printf(\u0026quot;Pressed button %d\\n\u0026quot;, i);\n }\n mu_pop_id(ctx);\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003efor\u003c/span\u003e (\u003cspan class=\"pl-smi\"\u003eint\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ei\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e; \u003cspan class=\"pl-s1\"\u003ei\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e\u0026lt;\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e10\u003c/span\u003e; \u003cspan class=\"pl-s1\"\u003ei\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e++\u003c/span\u003e) {\n \u003cspan class=\"pl-en\"\u003emu_push_id\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e\u0026amp;\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ei\u003c/span\u003e, \u003cspan class=\"pl-k\"\u003esizeof\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ei\u003c/span\u003e));\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-en\"\u003emu_button\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"x\"\u003c/span\u003e)) {\n \u003cspan class=\"pl-en\"\u003eprintf\u003c/span\u003e(\u003cspan class=\"pl-s\"\u003e\"Pressed button %d\\n\"\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ei\u003c/span\u003e);\n }\n \u003cspan class=\"pl-en\"\u003emu_pop_id\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen we're finished processing the UI for this frame the \u003ccode\u003emu_end()\u003c/code\u003e function\nshould be called:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_end(ctx);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003emu_end\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen we're ready to draw the UI the \u003ccode\u003emu_next_command()\u003c/code\u003e can be used to iterate\nthe resultant commands. The function expects a \u003ccode\u003emu_Command\u003c/code\u003e pointer initialised\nto \u003ccode\u003eNULL\u003c/code\u003e. It is safe to iterate through the commands list any number of times:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_Command *cmd = NULL;\nwhile (mu_next_command(ctx, \u0026amp;cmd)) {\n if (cmd-\u0026gt;type == MU_COMMAND_TEXT) {\n render_text(cmd-\u0026gt;text.font, cmd-\u0026gt;text.text, cmd-\u0026gt;text.pos.x, cmd-\u0026gt;text.pos.y, cmd-\u0026gt;text.color);\n }\n if (cmd-\u0026gt;type == MU_COMMAND_RECT) {\n render_rect(cmd-\u0026gt;rect.rect, cmd-\u0026gt;rect.color);\n }\n if (cmd-\u0026gt;type == MU_COMMAND_ICON) {\n render_icon(cmd-\u0026gt;icon.id, cmd-\u0026gt;icon.rect, cmd-\u0026gt;icon.color);\n }\n if (cmd-\u0026gt;type == MU_COMMAND_CLIP) {\n set_clip_rect(cmd-\u0026gt;clip.rect);\n }\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003emu_Command\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e*\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eNULL\u003c/span\u003e;\n\u003cspan class=\"pl-k\"\u003ewhile\u003c/span\u003e (\u003cspan class=\"pl-en\"\u003emu_next_command\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e\u0026amp;\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e)) {\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e==\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMU_COMMAND_TEXT\u003c/span\u003e) {\n \u003cspan class=\"pl-en\"\u003erender_text\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003efont\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003etext\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003epos\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003ex\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003epos\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003ey\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etext\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003ecolor\u003c/span\u003e);\n }\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e==\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMU_COMMAND_RECT\u003c/span\u003e) {\n \u003cspan class=\"pl-en\"\u003erender_rect\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003erect\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003erect\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003erect\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003ecolor\u003c/span\u003e);\n }\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e==\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMU_COMMAND_ICON\u003c/span\u003e) {\n \u003cspan class=\"pl-en\"\u003erender_icon\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eicon\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003eid\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eicon\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003erect\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eicon\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003ecolor\u003c/span\u003e);\n }\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003etype\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e==\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMU_COMMAND_CLIP\u003c/span\u003e) {\n \u003cspan class=\"pl-en\"\u003eset_clip_rect\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ecmd\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003eclip\u003c/span\u003e.\u003cspan class=\"pl-c1\"\u003erect\u003c/span\u003e);\n }\n}\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eSee the \u003ca href=\"/rxi/microui/blob/master/demo\"\u003e\u003ccode\u003edemo\u003c/code\u003e\u003c/a\u003e directory for a usage example.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eLayout System\u003c/h2\u003e\u003ca id=\"user-content-layout-system\" class=\"anchor\" aria-label=\"Permalink: Layout System\" href=\"#layout-system\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe layout system is primarily based around \u003cem\u003erows\u003c/em\u003e — Each row\ncan contain a number of \u003cem\u003eitems\u003c/em\u003e or \u003cem\u003ecolumns\u003c/em\u003e each column can itself\ncontain a number of rows and so forth. A row is initialised using the\n\u003ccode\u003emu_layout_row()\u003c/code\u003e function, the user should specify the number of items\non the row, an array containing the width of each item, and the height\nof the row:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"/* initialise a row of 3 items: the first item with a width\n** of 90 and the remaining two with the width of 100 */\nmu_layout_row(ctx, 3, (int[]) { 90, 100, 100 }, 0);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e/* initialise a row of 3 items: the first item with a width\u003c/span\u003e\n\u003cspan class=\"pl-c\"\u003e** of 90 and the remaining two with the width of 100 */\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003emu_layout_row\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e, (\u003cspan class=\"pl-smi\"\u003eint\u003c/span\u003e[]) { \u003cspan class=\"pl-c1\"\u003e90\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e100\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e100\u003c/span\u003e }, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eWhen a row is filled the next row is started, for example, in the above\ncode 6 buttons immediately after would result in two rows. The function\ncan be called again to begin a new row.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eAs well as absolute values, width and height can be specified as \u003ccode\u003e0\u003c/code\u003e\nwhich will result in the Context's \u003ccode\u003estyle.size\u003c/code\u003e value being used, or a\nnegative value which will size the item relative to the right/bottom edge,\nthus if we wanted a row with a small button at the left, a textbox filling\nmost the row and a larger button at the right, we could do the following:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_layout_row(ctx, 3, (int[]) { 30, -90, -1 }, 0);\nmu_button(ctx, \u0026quot;X\u0026quot;);\nmu_textbox(ctx, buf, sizeof(buf));\nmu_button(ctx, \u0026quot;Submit\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003emu_layout_row\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e3\u003c/span\u003e, (\u003cspan class=\"pl-smi\"\u003eint\u003c/span\u003e[]) { \u003cspan class=\"pl-c1\"\u003e30\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e-90\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e-1\u003c/span\u003e }, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_button\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"X\"\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_textbox\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e, \u003cspan class=\"pl-k\"\u003esizeof\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e));\n\u003cspan class=\"pl-en\"\u003emu_button\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"Submit\"\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf the \u003ccode\u003eitems\u003c/code\u003e parameter is \u003ccode\u003e0\u003c/code\u003e, the \u003ccode\u003ewidths\u003c/code\u003e parameter is ignored\nand controls will continue to be added to the row at the width last\nspecified by \u003ccode\u003emu_layout_width()\u003c/code\u003e or \u003ccode\u003estyle.size.x\u003c/code\u003e if this function has\nnot been called:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_layout_row(ctx, 0, NULL, 0);\nmu_layout_width(ctx, -90);\nmu_textbox(ctx, buf, sizeof(buf));\nmu_layout_width(ctx, -1);\nmu_button(ctx, \u0026quot;Submit\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-en\"\u003emu_layout_row\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003eNULL\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_layout_width\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e-90\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_textbox\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e, \u003cspan class=\"pl-k\"\u003esizeof\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e));\n\u003cspan class=\"pl-en\"\u003emu_layout_width\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e-1\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_button\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"Submit\"\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA column can be started at any point on a row using the\n\u003ccode\u003emu_layout_begin_column()\u003c/code\u003e function. Once begun, rows will act inside\nthe body of the column — all negative size values will be relative to\nthe column's body as opposed to the body of the container. All new rows\nwill be contained within this column until the \u003ccode\u003emu_layout_end_column()\u003c/code\u003e\nfunction is called.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eInternally controls use the \u003ccode\u003emu_layout_next()\u003c/code\u003e function to retrieve the\nnext screen-positioned-Rect and advance the layout system, you should use\nthis function when making custom controls or if you want to advance the\nlayout system without placing a control.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe \u003ccode\u003emu_layout_set_next()\u003c/code\u003e function is provided to set the next layout\nRect explicitly. This will be returned by \u003ccode\u003emu_layout_next()\u003c/code\u003e when it is\nnext called. By using the \u003ccode\u003erelative\u003c/code\u003e boolean you can choose to provide\na screen-space Rect or a Rect which will have the container's position\nand scroll offset applied to it. You can peek the next Rect from the\nlayout system by using the \u003ccode\u003emu_layout_next()\u003c/code\u003e function to retrieve it,\nfollowed by \u003ccode\u003emu_layout_set_next()\u003c/code\u003e to return it:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"mu_Rect rect = mu_layout_next(ctx);\nmu_layout_set_next(ctx, rect, 0);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003emu_Rect\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003erect\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003emu_layout_next\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_layout_set_next\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003erect\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eIf you want to position controls arbitrarily inside a container the\n\u003ccode\u003erelative\u003c/code\u003e argument of \u003ccode\u003emu_layout_set_next()\u003c/code\u003e should be true:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"/* place a (40, 40) sized button at (300, 300) inside the container: */\nmu_layout_set_next(ctx, mu_rect(300, 300, 40, 40), 1);\nmu_button(ctx, \u0026quot;X\u0026quot;);\"\u003e\u003cpre\u003e\u003cspan class=\"pl-c\"\u003e/* place a (40, 40) sized button at (300, 300) inside the container: */\u003c/span\u003e\n\u003cspan class=\"pl-en\"\u003emu_layout_set_next\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-en\"\u003emu_rect\u003c/span\u003e(\u003cspan class=\"pl-c1\"\u003e300\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e300\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e40\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e40\u003c/span\u003e), \u003cspan class=\"pl-c1\"\u003e1\u003c/span\u003e);\n\u003cspan class=\"pl-en\"\u003emu_button\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"X\"\u003c/span\u003e);\u003c/pre\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eA Rect set with \u003ccode\u003erelative\u003c/code\u003e true will also effect the \u003ccode\u003econtent_size\u003c/code\u003e\nof the container, causing it to effect the scrollbars if it exceeds the\nwidth or height of the container's body.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eStyle Customisation\u003c/h2\u003e\u003ca id=\"user-content-style-customisation\" class=\"anchor\" aria-label=\"Permalink: Style Customisation\" href=\"#style-customisation\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe library provides styling support via the \u003ccode\u003emu_Style\u003c/code\u003e struct and, if you\nwant greater control over the look, the \u003ccode\u003edraw_frame()\u003c/code\u003e callback function.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe \u003ccode\u003emu_Style\u003c/code\u003e struct contains spacing and sizing information, as well\nas a \u003ccode\u003ecolors\u003c/code\u003e array which maps \u003ccode\u003ecolorid\u003c/code\u003e to \u003ccode\u003emu_Color\u003c/code\u003e. The library uses\nthe \u003ccode\u003estyle\u003c/code\u003e pointer field of the context to resolve colors and spacing,\nit is safe to change this pointer or modify any fields of the resultant\nstruct at any point. See \u003ca href=\"/rxi/microui/blob/master/src/microui.h\"\u003e\u003ccode\u003emicroui.h\u003c/code\u003e\u003c/a\u003e for the struct's\nimplementation.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eIn addition to the style struct the context stores a \u003ccode\u003edraw_frame()\u003c/code\u003e\ncallback function which is used whenever the \u003cem\u003eframe\u003c/em\u003e of a control needs\nto be drawn, by default this function draws a rectangle using the color\nof the \u003ccode\u003ecolorid\u003c/code\u003e argument, with a one-pixel border around it using the\n\u003ccode\u003eMU_COLOR_BORDER\u003c/code\u003e color.\u003c/p\u003e\n\u003cdiv class=\"markdown-heading\" dir=\"auto\"\u003e\u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCustom Controls\u003c/h2\u003e\u003ca id=\"user-content-custom-controls\" class=\"anchor\" aria-label=\"Permalink: Custom Controls\" href=\"#custom-controls\"\u003e\u003csvg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cp dir=\"auto\"\u003eThe library exposes the functions used by built-in controls to allow the\nuser to make custom controls. A control should take a \u003ccode\u003emu_Context*\u003c/code\u003e value\nas its first argument and return a \u003ccode\u003eMU_RES_...\u003c/code\u003e value. Your control's\nimplementation should use \u003ccode\u003emu_layout_next()\u003c/code\u003e to get its destination\nRect and advance the layout system. \u003ccode\u003emu_get_id()\u003c/code\u003e should be used with\nsome data unique to the control to generate an ID for that control and\n\u003ccode\u003emu_update_control()\u003c/code\u003e should be used to update the context's \u003ccode\u003ehover\u003c/code\u003e\nand \u003ccode\u003efocus\u003c/code\u003e values based on the mouse input state.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eThe \u003ccode\u003eMU_OPT_HOLDFOCUS\u003c/code\u003e opt value can be passed to \u003ccode\u003emu_update_control()\u003c/code\u003e\nif we want the control to retain focus when the mouse button is released\n— this behaviour is used by textboxes which we want to stay focused\nto allow for text input.\u003c/p\u003e\n\u003cp dir=\"auto\"\u003eA control that acts as a button which displays an integer and, when\nclicked increments that integer, could be implemented as such:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-c notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"int incrementer(mu_Context *ctx, int *value) {\n mu_Id id = mu_get_id(ctx, \u0026amp;value, sizeof(value));\n mu_Rect rect = mu_layout_next(ctx);\n mu_update_control(ctx, id, rect, 0);\n\n /* handle input */\n int res = 0;\n if (ctx-\u0026gt;mouse_pressed == MU_MOUSE_LEFT \u0026amp;\u0026amp; ctx-\u0026gt;focus == id) {\n (*value)++;\n res |= MU_RES_CHANGE;\n }\n\n /* draw */\n char buf[32];\n sprintf(buf, \u0026quot;%d\u0026quot;, *value);\n mu_draw_control_frame(ctx, id, rect, MU_COLOR_BUTTON, 0);\n mu_draw_control_text(ctx, buf, rect, MU_COLOR_TEXT, MU_OPT_ALIGNCENTER);\n\n return res;\n}\"\u003e\u003cpre\u003e\u003cspan class=\"pl-smi\"\u003eint\u003c/span\u003e \u003cspan class=\"pl-en\"\u003eincrementer\u003c/span\u003e(\u003cspan class=\"pl-smi\"\u003emu_Context\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e*\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-smi\"\u003eint\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e*\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e) {\n \u003cspan class=\"pl-smi\"\u003emu_Id\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003emu_get_id\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e\u0026amp;\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e, \u003cspan class=\"pl-k\"\u003esizeof\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e));\n \u003cspan class=\"pl-smi\"\u003emu_Rect\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003erect\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-en\"\u003emu_layout_next\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e);\n \u003cspan class=\"pl-en\"\u003emu_update_control\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003erect\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\n\n \u003cspan class=\"pl-c\"\u003e/* handle input */\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003eint\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eres\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e=\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e;\n \u003cspan class=\"pl-k\"\u003eif\u003c/span\u003e (\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003emouse_pressed\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e==\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003eMU_MOUSE_LEFT\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e\u0026amp;\u0026amp;\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003e-\u0026gt;\u003c/span\u003e\u003cspan class=\"pl-c1\"\u003efocus\u003c/span\u003e \u003cspan class=\"pl-c1\"\u003e==\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e) {\n (\u003cspan class=\"pl-c1\"\u003e*\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e)\u003cspan class=\"pl-c1\"\u003e++\u003c/span\u003e;\n \u003cspan class=\"pl-s1\"\u003eres\u003c/span\u003e |= \u003cspan class=\"pl-c1\"\u003eMU_RES_CHANGE\u003c/span\u003e;\n }\n\n \u003cspan class=\"pl-c\"\u003e/* draw */\u003c/span\u003e\n \u003cspan class=\"pl-smi\"\u003echar\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e[\u003cspan class=\"pl-c1\"\u003e32\u003c/span\u003e];\n \u003cspan class=\"pl-en\"\u003esprintf\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e, \u003cspan class=\"pl-s\"\u003e\"%d\"\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e*\u003c/span\u003e\u003cspan class=\"pl-s1\"\u003evalue\u003c/span\u003e);\n \u003cspan class=\"pl-en\"\u003emu_draw_control_frame\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003eid\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003erect\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003eMU_COLOR_BUTTON\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003e0\u003c/span\u003e);\n \u003cspan class=\"pl-en\"\u003emu_draw_control_text\u003c/span\u003e(\u003cspan class=\"pl-s1\"\u003ectx\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003ebuf\u003c/span\u003e, \u003cspan class=\"pl-s1\"\u003erect\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003eMU_COLOR_TEXT\u003c/span\u003e, \u003cspan class=\"pl-c1\"\u003eMU_OPT_ALIGNCENTER\u003c/span\u003e);\n\n \u003cspan class=\"pl-k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"pl-s1\"\u003eres\u003c/span\u003e;\n}\u003c/pre\u003e\u003c/div\u003e\n\u003c/article\u003e","richTextTruncated":false,"renderedFileInfo":null,"symbols":{"timed_out":false,"not_analyzed":false,"symbols":[{"name":"Usage","kind":"section_1","ident_start":2,"ident_end":7,"extent_start":0,"extent_end":9303,"fully_qualified_name":"Usage","ident_utf16":{"start":{"line_number":0,"utf16_col":2},"end":{"line_number":0,"utf16_col":7}},"extent_utf16":{"start":{"line_number":0,"utf16_col":0},"end":{"line_number":251,"utf16_col":0}}},{"name":"Overview","kind":"section_2","ident_start":212,"ident_end":220,"extent_start":209,"extent_end":454,"fully_qualified_name":"Overview","ident_utf16":{"start":{"line_number":7,"utf16_col":3},"end":{"line_number":7,"utf16_col":11}},"extent_utf16":{"start":{"line_number":7,"utf16_col":0},"end":{"line_number":20,"utf16_col":0}}},{"name":"Getting Started","kind":"section_2","ident_start":457,"ident_end":472,"extent_start":454,"extent_end":3684,"fully_qualified_name":"Getting Started","ident_utf16":{"start":{"line_number":20,"utf16_col":3},"end":{"line_number":20,"utf16_col":18}},"extent_utf16":{"start":{"line_number":20,"utf16_col":0},"end":{"line_number":118,"utf16_col":0}}},{"name":"Layout System","kind":"section_2","ident_start":3687,"ident_end":3700,"extent_start":3684,"extent_end":6954,"fully_qualified_name":"Layout System","ident_utf16":{"start":{"line_number":118,"utf16_col":3},"end":{"line_number":118,"utf16_col":16}},"extent_utf16":{"start":{"line_number":118,"utf16_col":0},"end":{"line_number":194,"utf16_col":0}}},{"name":"Style Customisation","kind":"section_2","ident_start":6957,"ident_end":6976,"extent_start":6954,"extent_end":7816,"fully_qualified_name":"Style Customisation","ident_utf16":{"start":{"line_number":194,"utf16_col":3},"end":{"line_number":194,"utf16_col":22}},"extent_utf16":{"start":{"line_number":194,"utf16_col":0},"end":{"line_number":212,"utf16_col":0}}},{"name":"Custom Controls","kind":"section_2","ident_start":7819,"ident_end":7834,"extent_start":7816,"extent_end":9303,"fully_qualified_name":"Custom Controls","ident_utf16":{"start":{"line_number":212,"utf16_col":3},"end":{"line_number":212,"utf16_col":18}},"extent_utf16":{"start":{"line_number":212,"utf16_col":0},"end":{"line_number":251,"utf16_col":0}}}]}},"codeViewLayoutRoute":{"repo":{"id":149854705,"defaultBranch":"master","name":"microui","ownerLogin":"rxi","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2018-09-22T07:17:38.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/3920290?v=4","public":true,"private":false,"isOrgOwned":false},"currentUser":null,"uploadToken":"zLfBPUoL9pXW4Eksnezq3AbQhdCN711ttBfuDh0e9gRn7VSCEOj1gKJKK0wgWagaxMIak83kb6VKZbF8Gof7hA","allShortcutsEnabled":false,"treeExpanded":true,"path":"doc/usage.md","symbolsExpanded":false,"refInfo":{"name":"master","listCacheKey":"v0:1582575758.0","canEdit":false,"currentOid":"0850aba860959c3e75fb3e97120ca92957f9d057"},"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-378c581dbdb2429c.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-82470c2dd86b326d.js","githubDevUrl":null},"codeViewFileTreeLayoutRoute":{"fileTree":{"doc":{"items":[{"name":"usage.md","path":"doc/usage.md","contentType":"file"}],"totalCount":1},"":{"items":[{"name":".github","path":".github","contentType":"directory"},{"name":"demo","path":"demo","contentType":"directory"},{"name":"doc","path":"doc","contentType":"directory"},{"name":"src","path":"src","contentType":"directory"},{"name":"LICENSE","path":"LICENSE","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"}],"totalCount":6}},"fileTreeProcessingTime":32.685862,"foldersToFetch":[]},"codeViewBlobLayoutRoute":{"codeLineWrapEnabled":false,"refInfo":{"name":"master","listCacheKey":"v0:1582575758.0","canEdit":false,"refType":"branch","currentOid":"0850aba860959c3e75fb3e97120ca92957f9d057","canEditOnDefaultBranch":false,"fileExistsOnDefault":true},"path":"doc/usage.md","blob":{"copilotSWEAgentEnabled":false,"dependabotInfo":{"showConfigurationBanner":false,"configFilePath":null,"networkDependabotPath":"/rxi/microui/network/updates","dismissConfigurationNoticePath":"/settings/dismiss-notice/dependabot_configuration_notice","configurationNoticeDismissed":null},"displayName":"usage.md","displayUrl":"https://github.com/rxi/microui/blob/master/doc/usage.md?raw=true","headerInfo":{"blobSize":"9.08 KB","deleteTooltip":"You must be signed in to make or propose changes","editTooltip":"You must be signed in to make or propose changes","ghDesktopPath":"https://desktop.github.com","isGitLfs":false,"onBranch":true,"shortPath":"b757bec","siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Frxi%2Fmicroui%2Fblob%2Fmaster%2Fdoc%2Fusage.md","isCSV":false,"isRichtext":true,"lineInfo":{"truncatedLoc":"251","truncatedSloc":"218"},"mode":"file"},"image":false,"isCodeownersFile":null,"isPlain":false,"isValidLegacyIssueTemplate":false,"isIssueTemplate":false,"isDiscussionTemplate":false,"language":"Markdown","languageID":222,"large":false,"planSupportInfo":{"repoIsFork":null,"repoOwnedByCurrentUser":null,"requestFullPath":"/rxi/microui/blob/master/doc/usage.md","showFreeOrgGatedFeatureMessage":null,"showPlanSupportBanner":null,"upgradeDataAttributes":null,"upgradePath":null},"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_dockerfile","releasePath":"/rxi/microui/releases/new?marketplace=true","showPublishActionBanner":false},"rawBlobUrl":"https://github.com/rxi/microui/raw/refs/heads/master/doc/usage.md","renderImageOrRaw":false,"shortPath":null,"symbolsEnabled":true,"tabSize":4,"topBannersInfo":{"overridingGlobalFundingFile":false,"globalPreferredFundingPath":null,"showInvalidCitationWarning":false,"citationHelpUrl":"https://docs.github.com/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-citation-files","actionsOnboardingTip":null},"truncated":false,"viewable":true,"workflowRedirectUrl":null},"copilotInfo":null,"copilotAccessAllowed":false,"copilotSpacesEnabled":false,"modelsAccessAllowed":false,"modelsRepoIntegrationEnabled":false,"isMarketplaceEnabled":true},"codeViewBlobLayoutRoute.StyledBlob":{"rawLines":["# Usage","* **[Overview](#overview)**","* **[Getting Started](#getting-started)**","* **[Layout System](#layout-system)**","* **[Style Customisation](#style-customisation)**","* **[Custom Controls](#custom-controls)**","","## Overview","The overall structure when using the library is as follows:","```","initialise `mu_Context`","","main loop:"," call `mu_input_...` functions"," call `mu_begin()`"," process ui"," call `mu_end()`"," iterate commands using `mu_command_next()`","```","","## Getting Started","Before use a `mu_Context` should be initialised:","```c","mu_Context *ctx = malloc(sizeof(mu_Context));","mu_init(ctx);","```","","Following which the context's `text_width` and `text_height` callback functions","should be set:","```c","ctx-\u003etext_width = text_width;","ctx-\u003etext_height = text_height;","```","","In your main loop you should first pass user input to microui using the","`mu_input_...` functions. It is safe to call the input functions multiple times","if the same input event occurs in a single frame.","","After handling the input the `mu_begin()` function must be called before","processing your UI:","```c","mu_begin(ctx);","```","","Before any controls can be used we must begin a window using one of the","`mu_begin_window...` or `mu_begin_popup...` functions. The `mu_begin_...` window","functions return a truthy value if the window is open, if this is not the case","we should not process the window any further. When we are finished processing","the window's ui the `mu_end_...` window function should be called.","","```c","if (mu_begin_window(ctx, \"My Window\", mu_rect(10, 10, 300, 400))) {"," /* process ui here... */"," mu_end_window(ctx);","}","```","","It is safe to nest `mu_begin_window()` calls, this can be useful for things like","context menus; the windows will still render separate from one another like","normal.","","While inside a window block we can safely process controls. Controls that allow","user interaction return a bitset of `MU_RES_...` values. Some controls — such","as buttons — can only potentially return a single `MU_RES_...`, thus their","return value can be treated as a boolean:","```c","if (mu_button(ctx, \"My Button\")) {"," printf(\"'My Button' was pressed\\n\");","}","```","","The library generates unique IDs for controls internally to keep track of which","are focused, hovered, etc. These are typically generated from the name/label","passed to the function, or, in the case of sliders and checkboxes the value","pointer. An issue arises then if you have several buttons in a window or panel","that use the same label. The `mu_push_id()` and `mu_pop_id()` functions are","provided for such situations, allowing you to push additional data that will be","mixed into the unique ID:","```c","for (int i = 0; i \u003c 10; i++) {"," mu_push_id(ctx, \u0026i, sizeof(i));"," if (mu_button(ctx, \"x\")) {"," printf(\"Pressed button %d\\n\", i);"," }"," mu_pop_id(ctx);","}","```","","When we're finished processing the UI for this frame the `mu_end()` function","should be called:","```c","mu_end(ctx);","```","","When we're ready to draw the UI the `mu_next_command()` can be used to iterate","the resultant commands. The function expects a `mu_Command` pointer initialised","to `NULL`. It is safe to iterate through the commands list any number of times:","```c","mu_Command *cmd = NULL;","while (mu_next_command(ctx, \u0026cmd)) {"," if (cmd-\u003etype == MU_COMMAND_TEXT) {"," render_text(cmd-\u003etext.font, cmd-\u003etext.text, cmd-\u003etext.pos.x, cmd-\u003etext.pos.y, cmd-\u003etext.color);"," }"," if (cmd-\u003etype == MU_COMMAND_RECT) {"," render_rect(cmd-\u003erect.rect, cmd-\u003erect.color);"," }"," if (cmd-\u003etype == MU_COMMAND_ICON) {"," render_icon(cmd-\u003eicon.id, cmd-\u003eicon.rect, cmd-\u003eicon.color);"," }"," if (cmd-\u003etype == MU_COMMAND_CLIP) {"," set_clip_rect(cmd-\u003eclip.rect);"," }","}","```","","See the [`demo`](../demo) directory for a usage example.","","","## Layout System","The layout system is primarily based around *rows* — Each row","can contain a number of *items* or *columns* each column can itself","contain a number of rows and so forth. A row is initialised using the","`mu_layout_row()` function, the user should specify the number of items","on the row, an array containing the width of each item, and the height","of the row:","```c","/* initialise a row of 3 items: the first item with a width","** of 90 and the remaining two with the width of 100 */","mu_layout_row(ctx, 3, (int[]) { 90, 100, 100 }, 0);","```","When a row is filled the next row is started, for example, in the above","code 6 buttons immediately after would result in two rows. The function","can be called again to begin a new row.","","As well as absolute values, width and height can be specified as `0`","which will result in the Context's `style.size` value being used, or a","negative value which will size the item relative to the right/bottom edge,","thus if we wanted a row with a small button at the left, a textbox filling","most the row and a larger button at the right, we could do the following:","```c","mu_layout_row(ctx, 3, (int[]) { 30, -90, -1 }, 0);","mu_button(ctx, \"X\");","mu_textbox(ctx, buf, sizeof(buf));","mu_button(ctx, \"Submit\");","```","","If the `items` parameter is `0`, the `widths` parameter is ignored","and controls will continue to be added to the row at the width last","specified by `mu_layout_width()` or `style.size.x` if this function has","not been called:","```c","mu_layout_row(ctx, 0, NULL, 0);","mu_layout_width(ctx, -90);","mu_textbox(ctx, buf, sizeof(buf));","mu_layout_width(ctx, -1);","mu_button(ctx, \"Submit\");","```","","A column can be started at any point on a row using the","`mu_layout_begin_column()` function. Once begun, rows will act inside","the body of the column — all negative size values will be relative to","the column's body as opposed to the body of the container. All new rows","will be contained within this column until the `mu_layout_end_column()`","function is called.","","Internally controls use the `mu_layout_next()` function to retrieve the","next screen-positioned-Rect and advance the layout system, you should use","this function when making custom controls or if you want to advance the","layout system without placing a control.","","The `mu_layout_set_next()` function is provided to set the next layout","Rect explicitly. This will be returned by `mu_layout_next()` when it is","next called. By using the `relative` boolean you can choose to provide","a screen-space Rect or a Rect which will have the container's position","and scroll offset applied to it. You can peek the next Rect from the","layout system by using the `mu_layout_next()` function to retrieve it,","followed by `mu_layout_set_next()` to return it:","```c","mu_Rect rect = mu_layout_next(ctx);","mu_layout_set_next(ctx, rect, 0);","```","","If you want to position controls arbitrarily inside a container the","`relative` argument of `mu_layout_set_next()` should be true:","```c","/* place a (40, 40) sized button at (300, 300) inside the container: */","mu_layout_set_next(ctx, mu_rect(300, 300, 40, 40), 1);","mu_button(ctx, \"X\");","```","A Rect set with `relative` true will also effect the `content_size`","of the container, causing it to effect the scrollbars if it exceeds the","width or height of the container's body.","","","## Style Customisation","The library provides styling support via the `mu_Style` struct and, if you","want greater control over the look, the `draw_frame()` callback function.","","The `mu_Style` struct contains spacing and sizing information, as well","as a `colors` array which maps `colorid` to `mu_Color`. The library uses","the `style` pointer field of the context to resolve colors and spacing,","it is safe to change this pointer or modify any fields of the resultant","struct at any point. See [`microui.h`](../src/microui.h) for the struct's","implementation.","","In addition to the style struct the context stores a `draw_frame()`","callback function which is used whenever the *frame* of a control needs","to be drawn, by default this function draws a rectangle using the color","of the `colorid` argument, with a one-pixel border around it using the","`MU_COLOR_BORDER` color.","","","## Custom Controls","The library exposes the functions used by built-in controls to allow the","user to make custom controls. A control should take a `mu_Context*` value","as its first argument and return a `MU_RES_...` value. Your control's","implementation should use `mu_layout_next()` to get its destination","Rect and advance the layout system. `mu_get_id()` should be used with","some data unique to the control to generate an ID for that control and","`mu_update_control()` should be used to update the context's `hover`","and `focus` values based on the mouse input state.","","The `MU_OPT_HOLDFOCUS` opt value can be passed to `mu_update_control()`","if we want the control to retain focus when the mouse button is released","— this behaviour is used by textboxes which we want to stay focused","to allow for text input.","","A control that acts as a button which displays an integer and, when","clicked increments that integer, could be implemented as such:","```c","int incrementer(mu_Context *ctx, int *value) {"," mu_Id id = mu_get_id(ctx, \u0026value, sizeof(value));"," mu_Rect rect = mu_layout_next(ctx);"," mu_update_control(ctx, id, rect, 0);",""," /* handle input */"," int res = 0;"," if (ctx-\u003emouse_pressed == MU_MOUSE_LEFT \u0026\u0026 ctx-\u003efocus == id) {"," (*value)++;"," res |= MU_RES_CHANGE;"," }",""," /* draw */"," char buf[32];"," sprintf(buf, \"%d\", *value);"," mu_draw_control_frame(ctx, id, rect, MU_COLOR_BUTTON, 0);"," mu_draw_control_text(ctx, buf, rect, MU_COLOR_TEXT, MU_OPT_ALIGNCENTER);",""," return res;","}","```"],"stylingDirectives":[[[0,7,"pl-mh"],[2,7,"pl-en"]],[[0,1,"pl-v"],[2,4,"pl-s"],[4,5,"pl-s"],[13,14,"pl-s"],[14,15,"pl-s"],[15,24,"pl-corl"],[24,25,"pl-s"],[25,27,"pl-s"]],[[0,1,"pl-v"],[2,4,"pl-s"],[4,5,"pl-s"],[20,21,"pl-s"],[21,22,"pl-s"],[22,38,"pl-corl"],[38,39,"pl-s"],[39,41,"pl-s"]],[[0,1,"pl-v"],[2,4,"pl-s"],[4,5,"pl-s"],[18,19,"pl-s"],[19,20,"pl-s"],[20,34,"pl-corl"],[34,35,"pl-s"],[35,37,"pl-s"]],[[0,1,"pl-v"],[2,4,"pl-s"],[4,5,"pl-s"],[24,25,"pl-s"],[25,26,"pl-s"],[26,46,"pl-corl"],[46,47,"pl-s"],[47,49,"pl-s"]],[[0,1,"pl-v"],[2,4,"pl-s"],[4,5,"pl-s"],[20,21,"pl-s"],[21,22,"pl-s"],[22,38,"pl-corl"],[38,39,"pl-s"],[39,41,"pl-s"]],[],[[0,11,"pl-mh"],[3,11,"pl-en"]],[],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,23,"pl-c1"]],[[0,0,"pl-c1"]],[[0,10,"pl-c1"]],[[0,31,"pl-c1"]],[[0,19,"pl-c1"]],[[0,12,"pl-c1"]],[[0,17,"pl-c1"]],[[0,44,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]],[],[[0,18,"pl-mh"],[3,18,"pl-en"]],[[13,14,"pl-s"],[14,24,"pl-c1"],[24,25,"pl-s"]],[[0,3,"pl-s"],[3,4,"pl-en"]],[[25,31,"pl-k"]],[[0,7,"pl-en"]],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,0,"pl-c1"]],[[0,79,"pl-c1"]],[[0,14,"pl-c1"]],[[0,4,"pl-c1"]],[[0,29,"pl-c1"]],[[0,31,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]],[],[],[[0,1,"pl-s"],[1,13,"pl-c1"],[13,14,"pl-s"]],[],[],[[29,30,"pl-s"],[30,40,"pl-c1"],[40,41,"pl-s"]],[],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,8,"pl-en"]],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,0,"pl-c1"]],[[0,71,"pl-c1"]],[[0,80,"pl-c1"]],[[0,78,"pl-c1"]],[[0,77,"pl-c1"]],[[0,66,"pl-c1"]],[[0,0,"pl-c1"]],[[0,4,"pl-c1"]],[[0,67,"pl-c1"]],[[0,26,"pl-c1"]],[[0,21,"pl-c1"]],[[0,1,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]],[],[[19,20,"pl-s"],[20,37,"pl-c1"],[37,38,"pl-s"]],[],[],[],[],[[36,37,"pl-s"],[37,47,"pl-c1"],[47,48,"pl-s"]],[[50,51,"pl-s"],[51,61,"pl-c1"],[61,62,"pl-s"]],[],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,2,"pl-k"],[19,30,"pl-s"],[19,20,"pl-pds"],[29,30,"pl-pds"]],[[2,8,"pl-c1"]],[],[[0,3,"pl-s"]],[],[],[],[],[],[[29,30,"pl-s"],[30,42,"pl-c1"],[42,43,"pl-s"],[48,49,"pl-s"],[49,60,"pl-c1"],[60,61,"pl-s"]],[],[],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,3,"pl-k"],[5,8,"pl-k"],[13,14,"pl-c1"],[20,22,"pl-c1"]],[[2,12,"pl-c1"]],[],[],[],[[2,11,"pl-c1"]],[],[[0,3,"pl-s"]],[],[[57,58,"pl-s"],[58,66,"pl-c1"],[66,67,"pl-s"]],[],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,6,"pl-en"]],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,0,"pl-c1"]],[[0,78,"pl-c1"]],[[0,79,"pl-c1"]],[[0,79,"pl-c1"]],[[0,4,"pl-c1"]],[[0,23,"pl-c1"]],[[0,36,"pl-c1"]],[[0,37,"pl-c1"]],[[0,99,"pl-c1"]],[[0,3,"pl-c1"]],[[0,37,"pl-c1"]],[[0,49,"pl-c1"]],[[0,3,"pl-c1"]],[[0,37,"pl-c1"]],[[0,63,"pl-c1"]],[[0,3,"pl-c1"]],[[0,37,"pl-c1"]],[[0,34,"pl-c1"]],[[0,3,"pl-c1"]],[[0,1,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]],[],[[8,9,"pl-s"],[9,10,"pl-s"],[10,14,"pl-c1"],[14,15,"pl-s"],[15,16,"pl-s"],[16,17,"pl-s"],[17,24,"pl-corl"],[24,25,"pl-s"]],[],[],[[0,16,"pl-mh"],[3,16,"pl-en"]],[[44,45,"pl-s"],[49,50,"pl-s"]],[[24,25,"pl-s"],[30,31,"pl-s"],[35,36,"pl-s"],[43,44,"pl-s"]],[],[[0,1,"pl-s"],[1,16,"pl-c1"],[16,17,"pl-s"]],[],[],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,59,"pl-c"],[0,2,"pl-c"]],[[0,55,"pl-c"],[53,55,"pl-c"]],[[0,13,"pl-en"],[26,27,"pl-s"],[27,28,"pl-s"]],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,71,"pl-c1"]],[[0,71,"pl-c1"]],[[0,39,"pl-c1"]],[[0,0,"pl-c1"]],[[0,68,"pl-c1"]],[[0,70,"pl-c1"]],[[0,74,"pl-c1"]],[[0,74,"pl-c1"]],[[0,73,"pl-c1"]],[[0,4,"pl-c1"]],[[0,50,"pl-c1"]],[[0,20,"pl-c1"]],[[0,34,"pl-c1"]],[[0,25,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]],[],[[7,8,"pl-s"],[8,13,"pl-c1"],[13,14,"pl-s"],[28,29,"pl-s"],[29,30,"pl-c1"],[30,31,"pl-s"],[37,38,"pl-s"],[38,44,"pl-c1"],[44,45,"pl-s"]],[],[[13,14,"pl-s"],[14,31,"pl-c1"],[31,32,"pl-s"],[36,37,"pl-s"],[37,49,"pl-c1"],[49,50,"pl-s"]],[],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,13,"pl-en"]],[],[],[],[],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,0,"pl-c1"]],[[0,55,"pl-c1"]],[[0,69,"pl-c1"]],[[0,69,"pl-c1"]],[[0,71,"pl-c1"]],[[0,71,"pl-c1"]],[[0,19,"pl-c1"]],[[0,0,"pl-c1"]],[[0,71,"pl-c1"]],[[0,73,"pl-c1"]],[[0,71,"pl-c1"]],[[0,40,"pl-c1"]],[[0,0,"pl-c1"]],[[0,70,"pl-c1"]],[[0,71,"pl-c1"]],[[0,70,"pl-c1"]],[[0,70,"pl-c1"]],[[0,68,"pl-c1"]],[[0,70,"pl-c1"]],[[0,48,"pl-c1"]],[[0,4,"pl-c1"]],[[0,35,"pl-c1"]],[[0,33,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]],[],[],[[0,1,"pl-s"],[1,9,"pl-c1"],[9,10,"pl-s"],[23,24,"pl-s"],[24,44,"pl-c1"],[44,45,"pl-s"]],[[0,3,"pl-s"],[3,4,"pl-en"]],[[0,71,"pl-c"],[0,2,"pl-c"],[69,71,"pl-c"]],[[0,18,"pl-en"]],[],[[0,3,"pl-s"],[3,3,"pl-c1"]],[[0,67,"pl-c1"]],[[0,71,"pl-c1"]],[[0,40,"pl-c1"]],[[0,0,"pl-c1"]],[[0,0,"pl-c1"]],[[0,22,"pl-c1"]],[[0,74,"pl-c1"]],[[0,73,"pl-c1"]],[[0,0,"pl-c1"]],[[0,70,"pl-c1"]],[[0,72,"pl-c1"]],[[0,71,"pl-c1"]],[[0,71,"pl-c1"]],[[0,73,"pl-c1"]],[[0,15,"pl-c1"]],[[0,0,"pl-c1"]],[[0,67,"pl-c1"]],[[0,71,"pl-c1"]],[[0,71,"pl-c1"]],[[0,70,"pl-c1"]],[[0,24,"pl-c1"]],[[0,0,"pl-c1"]],[[0,0,"pl-c1"]],[[0,18,"pl-c1"]],[[0,72,"pl-c1"]],[[0,73,"pl-c1"]],[[0,69,"pl-c1"]],[[0,67,"pl-c1"]],[[0,69,"pl-c1"]],[[0,70,"pl-c1"]],[[0,68,"pl-c1"]],[[0,50,"pl-c1"]],[[0,0,"pl-c1"]],[[0,71,"pl-c1"]],[[0,72,"pl-c1"]],[[0,67,"pl-c1"]],[[0,24,"pl-c1"]],[[0,0,"pl-c1"]],[[0,67,"pl-c1"]],[[0,62,"pl-c1"]],[[0,4,"pl-c1"]],[[0,46,"pl-c1"]],[[0,55,"pl-c1"]],[[0,37,"pl-c1"]],[[0,38,"pl-c1"]],[[0,0,"pl-c1"]],[[0,20,"pl-c1"]],[[0,14,"pl-c1"]],[[0,64,"pl-c1"]],[[0,15,"pl-c1"]],[[0,25,"pl-c1"]],[[0,3,"pl-c1"]],[[0,0,"pl-c1"]],[[0,12,"pl-c1"]],[[0,15,"pl-c1"]],[[0,29,"pl-c1"]],[[0,59,"pl-c1"]],[[0,74,"pl-c1"]],[[0,0,"pl-c1"]],[[0,13,"pl-c1"]],[[0,1,"pl-c1"]],[[0,0,"pl-c1"],[0,3,"pl-s"]]],"colorizedLines":null}},"title":"microui/doc/usage.md at master · rxi/microui","appPayload":{},"meta":{"title":"microui/doc/usage.md at master · rxi/microui"}}</script>
|
||
<div data-target="react-app.reactRoot"><meta name="github-code-view-meta-stats" id="github-code-view-meta-stats" data-hydrostats="publish"/> <!-- --> <a hidden="" id="code-view-repo-link" href="/rxi/microui" data-discover="true"></a> <div class="d-none"></div><div><div style="--spacing:var(--spacing-none)" class="prc-PageLayout-PageLayoutRoot--KH-d"><div class="prc-PageLayout-PageLayoutWrapper-2BhU2" data-width="full"><div class="prc-PageLayout-PageLayoutContent-BneH9"><div class="CodeViewFileTreeLayout-module__sidebar__n_Aau" tabindex="0"><div class="prc-PageLayout-PaneWrapper-pHPop ReposFileTreePane-module__Pane__rBZpI ReposFileTreePane-module__HideTree__AYZnm ReposFileTreePane-module__HidePane__VHAVt" style="--offset-header:0px;--spacing-row:var(--spacing-none);--spacing-column:var(--spacing-none)" data-is-hidden="false" data-position="start" data-sticky="true"><div class="prc-PageLayout-HorizontalDivider-JLVqp prc-PageLayout-PaneHorizontalDivider-9tbnE" data-variant-regular="none" data-variant-narrow="none" data-position="start" style="--spacing-divider:var(--spacing-none);--spacing:var(--spacing-none)"></div><div class="prc-PageLayout-Pane-AyzHK" data-resizable="true" style="--spacing:var(--spacing-none);--pane-min-width:256px;--pane-max-width:calc(100vw - var(--pane-max-width-diff));--pane-width-size:var(--pane-width-large);--pane-width:320px"></div><div class="prc-PageLayout-VerticalDivider-9QRmK prc-PageLayout-PaneVerticalDivider-le57g" data-variant-narrow="none" data-variant-regular="line" data-variant-wide="line" data-position="start" style="--spacing:var(--spacing-none)"><div class="prc-PageLayout-DraggableHandle-9s6B4" role="slider" aria-label="Draggable pane splitter" aria-valuemin="256" aria-valuemax="600" aria-valuenow="320" aria-valuetext="Pane width 320 pixels" tabindex="0"></div></div></div></div><div class="prc-PageLayout-ContentWrapper-gR9eG"><div class="prc-PageLayout-Content-xWL-A" data-width="full" style="--spacing:var(--spacing-none)"><div class="SharedPageLayout-module__content__IwGAp" data-selector="repos-split-pane-content" tabindex="0"> <!-- --> <div class="container CodeViewHeader-module__Box__JkPOb"><div class="CodeViewHeader-module__StickyHeader__Qn7UN" id="StickyHeader"><div class="CodeViewHeader-module__Box_1__SbNDV"><div class="CodeViewHeader-module__Box_2__TB46f"><div class="react-code-view-header-wrap--narrow CodeViewHeader-module__Box_3__q1zUL"><div class="CodeViewHeader-module__treeToggleWrapper__RQ__9"><h2 class="use-tree-pane-module__Heading__s4QbZ prc-Heading-Heading-MtWFE"><button data-component="Button" type="button" aria-label="Expand file tree" data-testid="expand-file-tree-button-mobile" class="prc-Button-ButtonBase-9n-Xk ExpandFileTreeButton-module__Button_1__Svs95" data-loading="false" data-size="medium" data-variant="invisible"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="leadingVisual" class="prc-Button-Visual-YNt2F prc-Button-VisualWrap-E4cnq"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-arrow-left" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"></path></svg></span><span data-component="text" class="prc-Button-Label-FWkx3">Files</span></span></button><button data-component="IconButton" type="button" data-testid="expand-file-tree-button" aria-controls="repos-file-tree" class="prc-Button-ButtonBase-9n-Xk position-relative ExpandFileTreeButton-module__expandButton__hDOcv ExpandFileTreeButton-module__filesButtonBreakpoint__zEvz3 fgColor-muted prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-labelledby="_R_2aql3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-sidebar-collapse" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M6.823 7.823a.25.25 0 0 1 0 .354l-2.396 2.396A.25.25 0 0 1 4 10.396V5.604a.25.25 0 0 1 .427-.177Z"></path><path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25H9.5v-13H1.75a.25.25 0 0 0-.25.25ZM11 14.5h3.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H11Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="se" data-component="Tooltip" aria-hidden="true" id="_R_2aql3al1d_">Expand file tree</span><div class="d-none"></div></h2></div><div class="react-code-view-header-mb--narrow mr-2"><button data-component="Button" type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="master branch" data-testid="anchor-button" data-icv-name="Switch branches/tags" class="prc-Button-ButtonBase-9n-Xk ref-selector-class RefSelectorAnchoredOverlay-module__RefSelectorOverlayBtn__a3WK3" data-loading="false" data-size="medium" data-variant="default" id="ref-picker-repos-header-ref-selector-wide"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="text" class="prc-Button-Label-FWkx3"><div class="RefSelectorAnchoredOverlay-module__RefSelectorOverlayContainer__yaf4p"><div class="RefSelectorAnchoredOverlay-module__RefSelectorOverlayHeader__XtXRG"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div style="max-width:125px" class="ref-selector-button-text-container RefSelectorAnchoredOverlay-module__RefSelectorBtnTextContainer__Di3rk"><span class="RefSelectorAnchoredOverlay-module__RefSelectorText__w_fmP"> <!-- -->master</span></div></div></span><span data-component="trailingVisual" class="prc-Button-Visual-YNt2F prc-Button-VisualWrap-E4cnq"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><div class="d-none"></div></div><div class="react-code-view-header-mb--narrow CodeViewHeader-module__Box_5__MQ0hL"><div class="Breadcrumb-module__container__Vxvev Breadcrumb-module__lg__Rjz0A"><nav data-testid="breadcrumbs" aria-labelledby="repos-header-breadcrumb-heading" id="repos-header-breadcrumb" class="Breadcrumb-module__nav__rQFDj"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone__rwWIk prc-Heading-Heading-MtWFE" data-testid="screen-reader-heading" id="repos-header-breadcrumb-heading">Breadcrumbs</h2><ol class="Breadcrumb-module__list__ZH6zr"><li class="Breadcrumb-module__listItem__Ib0x_"><a class="Breadcrumb-module__repoLink__O2Nbs prc-Link-Link-9ZwDx" data-component="Link" data-testid="breadcrumbs-repo-link" href="/rxi/microui/tree/master" data-discover="true">microui</a></li><li class="Breadcrumb-module__listItem__Ib0x_"><span class="Breadcrumb-module__separator__eNwsI Breadcrumb-module__lg__Rjz0A" aria-hidden="true">/</span><a class="Breadcrumb-module__directoryLink__kQy_t prc-Link-Link-9ZwDx" data-component="Link" href="/rxi/microui/tree/master/doc" data-discover="true">doc</a></li></ol></nav><div data-testid="breadcrumbs-filename" class="Breadcrumb-module__filename__equZR"><span class="Breadcrumb-module__separator__eNwsI Breadcrumb-module__lg__Rjz0A" aria-hidden="true">/</span><h1 class="Breadcrumb-module__filenameHeading__MNMtw Breadcrumb-module__lg__Rjz0A prc-Heading-Heading-MtWFE" tabindex="-1" id="file-name-id">usage.md</h1></div><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-9n-Xk ml-2 prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="small" data-variant="invisible" aria-labelledby="_R_3qql3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="CopyToClipboardButton-module__tooltip__BhMvU prc-TooltipV2-Tooltip-tLeuB" data-direction="nw" data-component="Tooltip" aria-label="Copy path" aria-hidden="true" id="_R_3qql3al1d_">Copy path</span></div></div></div><div class="react-code-view-header-element--wide"><div class="CodeViewHeader-module__Box_7___0R6c"><div class="d-flex gap-2"><div><div class="CodeViewHeader-module__FileResultsList__JDzUy"><span class="d-flex FileResultsList-module__FilesSearchBox__ivVkc TextInput-wrapper prc-components-TextInputWrapper-Hpdqi prc-components-TextInputBaseWrapper-wY-n0" data-component="TextInput" data-leading-visual="true" data-trailing-visual="true" aria-busy="false"><span class="TextInput-icon" id="_R_2pcql3al1d_" aria-hidden="true" data-component="TextInput.LeadingVisual"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg></span><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellCheck="false" placeholder="Go to file" aria-describedby="_R_2pcql3al1d_ _R_2pcql3al1dH1_" data-component="input" class="prc-components-Input-IwWrt" value=""/><span class="TextInput-icon" id="_R_2pcql3al1dH1_" aria-hidden="true" data-component="TextInput.TrailingVisual"></span></span></div><div class="d-none"></div></div><button data-component="Button" type="button" style="display:none" class="prc-Button-ButtonBase-9n-Xk NavigationMenu-module__Button__LpKgm" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="text" class="prc-Button-Label-FWkx3">Blame</span></span></button><div class="d-none"></div><button data-component="IconButton" type="button" data-testid="more-file-actions-button-nav-menu-wide" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-9n-Xk js-blob-dropdown-click NavigationMenu-module__IconButton__HpX3G prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-labelledby="_R_ficql3al1d_" id="_R_icql3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="nw" data-component="Tooltip" aria-hidden="true" id="_R_ficql3al1d_">More file actions</span></div></div></div><div class="react-code-view-header-element--narrow"><div class="CodeViewHeader-module__Box_7___0R6c"><div class="d-flex gap-2"><button data-component="Button" type="button" style="display:none" class="prc-Button-ButtonBase-9n-Xk NavigationMenu-module__Button__LpKgm" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="text" class="prc-Button-Label-FWkx3">Blame</span></span></button><div class="d-none"></div><button data-component="IconButton" type="button" data-testid="more-file-actions-button-nav-menu-narrow" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-9n-Xk js-blob-dropdown-click NavigationMenu-module__IconButton__HpX3G prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="default" aria-labelledby="_R_fieql3al1d_" id="_R_ieql3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="nw" data-component="Tooltip" aria-hidden="true" id="_R_fieql3al1d_">More file actions</span></div></div></div></div></div></div></div><div class="CodeView-module__contentWrapper__cG2JH"><div class="react-code-view-bottom-padding"><div class="BlobTopBanners-module__Box__v_nvx"></div></div> <div class="d-none"></div><div class="d-flex flex-column border rounded-2 tmp-mb-3 pl-1"><div class="LatestCommit-module__Box__B25ZT"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone__rwWIk prc-Heading-Heading-MtWFE" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone__rwWIk prc-Heading-Heading-MtWFE" data-testid="screen-reader-heading">History</h2><a data-component="LinkButton" href="/rxi/microui/commits/master/doc/usage.md" class="prc-Button-ButtonBase-9n-Xk d-none d-lg-flex LinkButton-module__linkButton__nFnov flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="leadingVisual" class="prc-Button-Visual-YNt2F prc-Button-VisualWrap-E4cnq"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span><span data-component="text" class="prc-Button-Label-FWkx3"><span class="fgColor-default">History</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><a data-component="LinkButton" aria-label="View commit history for this file." href="/rxi/microui/commits/master/doc/usage.md" class="prc-Button-ButtonBase-9n-Xk LinkButton-module__linkButton__nFnov flex-items-center fgColor-default" data-loading="false" data-size="small" data-variant="invisible" aria-describedby="_R_2balal3al1d_"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="leadingVisual" class="prc-Button-Visual-YNt2F prc-Button-VisualWrap-E4cnq"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span></span></a><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="s" data-component="Tooltip" role="tooltip" aria-hidden="true" id="_R_2balal3al1d_">History</span></div></div></div></div></div><div class="d-flex flex-row"><div class="container BlobViewContent-module__blobContainer__DtH2d"><div class="react-code-size-details-banner BlobViewContent-module__codeSizeDetails__e5sUw"><div class="react-code-size-details-banner CodeSizeDetails-module__Box__VcD6l"><div class="text-mono CodeSizeDetails-module__Box_1__GVxQL"><div data-testid="blob-size" class="CodeSizeDetails-module__Truncate_1__lE93V prc-Truncate-Truncate-2G1eo" data-inline="true" title="9.08 KB" style="--truncate-max-width:100%"><span>251 lines (218 loc) · 9.08 KB</span></div></div></div></div><div class="react-blob-view-header-sticky BlobViewContent-module__stickyHeader__VwxB5" id="repos-sticky-header"><div class="BlobViewHeader-module__Box__yhm9u"><div class="react-blob-sticky-header"><div class="FileNameStickyHeader-module__outerWrapper__ZL4Xc FileNameStickyHeader-module__outerWrapperHidden__Zpynk"><div class="FileNameStickyHeader-module__Box_1__Hazu5"><div class="FileNameStickyHeader-module__Box_2__hoolP"><div class="FileNameStickyHeader-module__Box_3__MVKsk"><button data-component="Button" type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="master branch" data-testid="anchor-button" data-icv-name="Switch branches/tags" class="prc-Button-ButtonBase-9n-Xk ref-selector-class RefSelectorAnchoredOverlay-module__RefSelectorOverlayBtn__a3WK3" data-loading="false" data-size="medium" data-variant="default" id="ref-picker-repos-header-ref-selector"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="text" class="prc-Button-Label-FWkx3"><div class="RefSelectorAnchoredOverlay-module__RefSelectorOverlayContainer__yaf4p"><div class="RefSelectorAnchoredOverlay-module__RefSelectorOverlayHeader__XtXRG"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div style="max-width:125px" class="ref-selector-button-text-container RefSelectorAnchoredOverlay-module__RefSelectorBtnTextContainer__Di3rk"><span class="RefSelectorAnchoredOverlay-module__RefSelectorText__w_fmP"> <!-- -->master</span></div></div></span><span data-component="trailingVisual" class="prc-Button-Visual-YNt2F prc-Button-VisualWrap-E4cnq"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><div class="d-none"></div></div><div class="FileNameStickyHeader-module__Box_4__FLhtt"><div class="Breadcrumb-module__container__Vxvev Breadcrumb-module__md__Wb1Gs"><nav data-testid="breadcrumbs" aria-labelledby="sticky-breadcrumb-heading" id="sticky-breadcrumb" class="Breadcrumb-module__nav__rQFDj"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone__rwWIk prc-Heading-Heading-MtWFE" data-testid="screen-reader-heading" id="sticky-breadcrumb-heading">Breadcrumbs</h2><ol class="Breadcrumb-module__list__ZH6zr"><li class="Breadcrumb-module__listItem__Ib0x_"><a class="Breadcrumb-module__repoLink__O2Nbs prc-Link-Link-9ZwDx" data-component="Link" data-testid="breadcrumbs-repo-link" href="/rxi/microui/tree/master" data-discover="true">microui</a></li><li class="Breadcrumb-module__listItem__Ib0x_"><span class="Breadcrumb-module__separator__eNwsI Breadcrumb-module__md__Wb1Gs" aria-hidden="true">/</span><a class="Breadcrumb-module__directoryLink__kQy_t prc-Link-Link-9ZwDx" data-component="Link" href="/rxi/microui/tree/master/doc" data-discover="true">doc</a></li></ol></nav><div data-testid="breadcrumbs-filename" class="Breadcrumb-module__filename__equZR"><span class="Breadcrumb-module__separator__eNwsI Breadcrumb-module__md__Wb1Gs" aria-hidden="true">/</span><h1 class="Breadcrumb-module__filenameHeading__MNMtw Breadcrumb-module__md__Wb1Gs prc-Heading-Heading-MtWFE" tabindex="-1" id="sticky-file-name-id">usage.md</h1></div></div></div></div><button data-component="Button" type="button" class="prc-Button-ButtonBase-9n-Xk FileNameStickyHeader-module__Button__LSEU_ FileNameStickyHeader-module__GoToTopButton__nxAFn" data-loading="false" data-size="small" data-variant="invisible"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="leadingVisual" class="prc-Button-Visual-YNt2F prc-Button-VisualWrap-E4cnq"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-arrow-up" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M3.47 7.78a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018L9 4.81v7.44a.75.75 0 0 1-1.5 0V4.81L4.53 7.78a.75.75 0 0 1-1.06 0Z"></path></svg></span><span data-component="text" class="prc-Button-Label-FWkx3">Top</span></span></button></div></div></div><div class="BlobViewHeader-module__Box_1__VEmuQ"><h2 class="sr-only ScreenReaderHeading-module__userSelectNone__rwWIk prc-Heading-Heading-MtWFE" data-testid="screen-reader-heading">File metadata and controls</h2><div class="BlobViewHeader-module__Box_2__icUs2"><ul aria-label="File view" class="prc-SegmentedControl-SegmentedControl-lqIXp BlobTabButtons-module__SegmentedControl__jen2u" data-variant="default" data-size="small"><li class="prc-SegmentedControl-Item-tSCQh" data-selected=""><button aria-current="true" class="prc-SegmentedControl-Button-E48xz" type="button" style="--separator-color:transparent"><span class="prc-SegmentedControl-Content-1COlk segmentedControl-content"><div class="prc-SegmentedControl-Text-7S2y2 segmentedControl-text" data-text="Preview">Preview</div></span></button></li><li class="prc-SegmentedControl-Item-tSCQh"><button aria-current="false" class="prc-SegmentedControl-Button-E48xz" type="button" style="--separator-color:var(--borderColor-default)"><span class="prc-SegmentedControl-Content-1COlk segmentedControl-content"><div class="prc-SegmentedControl-Text-7S2y2 segmentedControl-text" data-text="Code">Code</div></span></button></li><li class="prc-SegmentedControl-Item-tSCQh"><button aria-current="false" class="prc-SegmentedControl-Button-E48xz" type="button" style="--separator-color:var(--borderColor-default)"><span class="prc-SegmentedControl-Content-1COlk segmentedControl-content"><div class="prc-SegmentedControl-Text-7S2y2 segmentedControl-text" data-text="Blame">Blame</div></span></button></li></ul><div class="d-none"></div><div class="react-code-size-details-in-header CodeSizeDetails-module__Box__VcD6l"><div class="text-mono CodeSizeDetails-module__Box_1__GVxQL"><div data-testid="blob-size" class="CodeSizeDetails-module__Truncate_1__lE93V prc-Truncate-Truncate-2G1eo" data-inline="true" title="9.08 KB" style="--truncate-max-width:100%"><span>251 lines (218 loc) · 9.08 KB</span></div></div></div></div><div class="BlobViewHeader-module__Box_3__ng6v2"><div class="d-none"></div><div class="react-blob-header-edit-and-raw-actions BlobViewHeader-module__Box_4__J4Y4W"><div class="d-none"></div><div class="prc-ButtonGroup-ButtonGroup-vFUrY"><div><a data-component="LinkButton" href="https://github.com/rxi/microui/raw/refs/heads/master/doc/usage.md" data-testid="raw-button" class="prc-Button-ButtonBase-9n-Xk LinkButton-module__linkButton__nFnov BlobViewHeader-module__LinkButton__X9kx2" data-loading="false" data-no-visuals="true" data-size="small" data-variant="default"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-Iohp5"><span data-component="text" class="prc-Button-Label-FWkx3">Raw</span></span></a></div><div><button data-component="IconButton" type="button" data-testid="copy-raw-button" class="prc-Button-ButtonBase-9n-Xk prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="small" data-variant="default" aria-labelledby="_R_d5f6clal3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="n" data-component="Tooltip" aria-hidden="true" id="_R_d5f6clal3al1d_">Copy raw file</span></div><div><button data-component="IconButton" type="button" data-testid="download-raw-button" class="prc-Button-ButtonBase-9n-Xk BlobViewHeader-module__downloadButton__ef459 prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="small" data-variant="default" aria-labelledby="_R_75f6clal3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-download" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="n" data-component="Tooltip" aria-hidden="true" id="_R_75f6clal3al1d_">Download raw file</span></div></div></div><button data-component="IconButton" type="button" aria-pressed="false" class="prc-Button-ButtonBase-9n-Xk tmp-mr-2 TableOfContents-module__IconButton__jrlNM prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="small" data-variant="invisible" aria-labelledby="_R_1v6clal3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-list-unordered" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="n" data-component="Tooltip" aria-hidden="true" id="_R_1v6clal3al1d_">Outline</span><div class="react-blob-header-edit-and-raw-actions-combined"><button data-component="IconButton" type="button" title="More file actions" data-testid="more-file-actions-button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-9n-Xk js-blob-dropdown-click BlobViewHeader-module__IconButton__XrMQY prc-Button-IconButton-fyge7" data-loading="false" data-no-visuals="true" data-size="small" data-variant="invisible" aria-labelledby="_R_7q76clal3al1d_" id="_R_a76clal3al1d_"><svg data-component="Octicon" aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-tLeuB" data-direction="nw" data-component="Tooltip" aria-hidden="true" id="_R_7q76clal3al1d_">Edit and raw actions</span></div></div></div></div><div></div></div><div class="BlobViewContent-module__blobContentWrapper__JS0W6"><section aria-labelledby="file-name-id-wide file-name-id-mobile" class="BlobContent-module__blobContentSection__VOgZq BlobContent-module__blobContentSectionMarkdown__mPLOK" style="margin-top:46px"><div class="js-snippet-clipboard-copy-unpositioned BlobContent-module__markdownBlob__T8jpG" data-hpc="true"><article class="markdown-body entry-content container-lg" itemprop="text"><div class="markdown-heading" dir="auto"><h1 tabindex="-1" class="heading-element" dir="auto">Usage</h1><a id="user-content-usage" class="anchor" aria-label="Permalink: Usage" href="#usage"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
|
||
<ul dir="auto">
|
||
<li><strong><a href="#overview">Overview</a></strong></li>
|
||
<li><strong><a href="#getting-started">Getting Started</a></strong></li>
|
||
<li><strong><a href="#layout-system">Layout System</a></strong></li>
|
||
<li><strong><a href="#style-customisation">Style Customisation</a></strong></li>
|
||
<li><strong><a href="#custom-controls">Custom Controls</a></strong></li>
|
||
</ul>
|
||
<div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Overview</h2><a id="user-content-overview" class="anchor" aria-label="Permalink: Overview" href="#overview"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
|
||
<p dir="auto">The overall structure when using the library is as follows:</p>
|
||
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="initialise `mu_Context`
|
||
|
||
main loop:
|
||
call `mu_input_...` functions
|
||
call `mu_begin()`
|
||
process ui
|
||
call `mu_end()`
|
||
iterate commands using `mu_command_next()`"><pre class="notranslate"><code>initialise `mu_Context`
|
||
|
||
main loop:
|
||
call `mu_input_...` functions
|
||
call `mu_begin()`
|
||
process ui
|
||
call `mu_end()`
|
||
iterate commands using `mu_command_next()`
|
||
</code></pre></div>
|
||
<div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Getting Started</h2><a id="user-content-getting-started" class="anchor" aria-label="Permalink: Getting Started" href="#getting-started"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
|
||
<p dir="auto">Before use a <code>mu_Context</code> should be initialised:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_Context *ctx = malloc(sizeof(mu_Context));
|
||
mu_init(ctx);"><pre><span class="pl-smi">mu_Context</span> <span class="pl-c1">*</span><span class="pl-s1">ctx</span> <span class="pl-c1">=</span> <span class="pl-en">malloc</span>(<span class="pl-k">sizeof</span>(<span class="pl-s1">mu_Context</span>));
|
||
<span class="pl-en">mu_init</span>(<span class="pl-s1">ctx</span>);</pre></div>
|
||
<p dir="auto">Following which the context's <code>text_width</code> and <code>text_height</code> callback functions
|
||
should be set:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="ctx->text_width = text_width;
|
||
ctx->text_height = text_height;"><pre><span class="pl-s1">ctx</span><span class="pl-c1">-></span><span class="pl-c1">text_width</span> <span class="pl-c1">=</span> <span class="pl-s1">text_width</span>;
|
||
<span class="pl-s1">ctx</span><span class="pl-c1">-></span><span class="pl-c1">text_height</span> <span class="pl-c1">=</span> <span class="pl-s1">text_height</span>;</pre></div>
|
||
<p dir="auto">In your main loop you should first pass user input to microui using the
|
||
<code>mu_input_...</code> functions. It is safe to call the input functions multiple times
|
||
if the same input event occurs in a single frame.</p>
|
||
<p dir="auto">After handling the input the <code>mu_begin()</code> function must be called before
|
||
processing your UI:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_begin(ctx);"><pre><span class="pl-en">mu_begin</span>(<span class="pl-s1">ctx</span>);</pre></div>
|
||
<p dir="auto">Before any controls can be used we must begin a window using one of the
|
||
<code>mu_begin_window...</code> or <code>mu_begin_popup...</code> functions. The <code>mu_begin_...</code> window
|
||
functions return a truthy value if the window is open, if this is not the case
|
||
we should not process the window any further. When we are finished processing
|
||
the window's ui the <code>mu_end_...</code> window function should be called.</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (mu_begin_window(ctx, "My Window", mu_rect(10, 10, 300, 400))) {
|
||
/* process ui here... */
|
||
mu_end_window(ctx);
|
||
}"><pre><span class="pl-k">if</span> (<span class="pl-en">mu_begin_window</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"My Window"</span>, <span class="pl-en">mu_rect</span>(<span class="pl-c1">10</span>, <span class="pl-c1">10</span>, <span class="pl-c1">300</span>, <span class="pl-c1">400</span>))) {
|
||
<span class="pl-c">/* process ui here... */</span>
|
||
<span class="pl-en">mu_end_window</span>(<span class="pl-s1">ctx</span>);
|
||
}</pre></div>
|
||
<p dir="auto">It is safe to nest <code>mu_begin_window()</code> calls, this can be useful for things like
|
||
context menus; the windows will still render separate from one another like
|
||
normal.</p>
|
||
<p dir="auto">While inside a window block we can safely process controls. Controls that allow
|
||
user interaction return a bitset of <code>MU_RES_...</code> values. Some controls — such
|
||
as buttons — can only potentially return a single <code>MU_RES_...</code>, thus their
|
||
return value can be treated as a boolean:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (mu_button(ctx, "My Button")) {
|
||
printf("'My Button' was pressed\n");
|
||
}"><pre><span class="pl-k">if</span> (<span class="pl-en">mu_button</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"My Button"</span>)) {
|
||
<span class="pl-en">printf</span>(<span class="pl-s">"'My Button' was pressed\n"</span>);
|
||
}</pre></div>
|
||
<p dir="auto">The library generates unique IDs for controls internally to keep track of which
|
||
are focused, hovered, etc. These are typically generated from the name/label
|
||
passed to the function, or, in the case of sliders and checkboxes the value
|
||
pointer. An issue arises then if you have several buttons in a window or panel
|
||
that use the same label. The <code>mu_push_id()</code> and <code>mu_pop_id()</code> functions are
|
||
provided for such situations, allowing you to push additional data that will be
|
||
mixed into the unique ID:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="for (int i = 0; i < 10; i++) {
|
||
mu_push_id(ctx, &i, sizeof(i));
|
||
if (mu_button(ctx, "x")) {
|
||
printf("Pressed button %d\n", i);
|
||
}
|
||
mu_pop_id(ctx);
|
||
}"><pre><span class="pl-k">for</span> (<span class="pl-smi">int</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span>; <span class="pl-s1">i</span> <span class="pl-c1"><</span> <span class="pl-c1">10</span>; <span class="pl-s1">i</span><span class="pl-c1">++</span>) {
|
||
<span class="pl-en">mu_push_id</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">&</span><span class="pl-s1">i</span>, <span class="pl-k">sizeof</span>(<span class="pl-s1">i</span>));
|
||
<span class="pl-k">if</span> (<span class="pl-en">mu_button</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"x"</span>)) {
|
||
<span class="pl-en">printf</span>(<span class="pl-s">"Pressed button %d\n"</span>, <span class="pl-s1">i</span>);
|
||
}
|
||
<span class="pl-en">mu_pop_id</span>(<span class="pl-s1">ctx</span>);
|
||
}</pre></div>
|
||
<p dir="auto">When we're finished processing the UI for this frame the <code>mu_end()</code> function
|
||
should be called:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_end(ctx);"><pre><span class="pl-en">mu_end</span>(<span class="pl-s1">ctx</span>);</pre></div>
|
||
<p dir="auto">When we're ready to draw the UI the <code>mu_next_command()</code> can be used to iterate
|
||
the resultant commands. The function expects a <code>mu_Command</code> pointer initialised
|
||
to <code>NULL</code>. It is safe to iterate through the commands list any number of times:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_Command *cmd = NULL;
|
||
while (mu_next_command(ctx, &cmd)) {
|
||
if (cmd->type == MU_COMMAND_TEXT) {
|
||
render_text(cmd->text.font, cmd->text.text, cmd->text.pos.x, cmd->text.pos.y, cmd->text.color);
|
||
}
|
||
if (cmd->type == MU_COMMAND_RECT) {
|
||
render_rect(cmd->rect.rect, cmd->rect.color);
|
||
}
|
||
if (cmd->type == MU_COMMAND_ICON) {
|
||
render_icon(cmd->icon.id, cmd->icon.rect, cmd->icon.color);
|
||
}
|
||
if (cmd->type == MU_COMMAND_CLIP) {
|
||
set_clip_rect(cmd->clip.rect);
|
||
}
|
||
}"><pre><span class="pl-smi">mu_Command</span> <span class="pl-c1">*</span><span class="pl-s1">cmd</span> <span class="pl-c1">=</span> <span class="pl-c1">NULL</span>;
|
||
<span class="pl-k">while</span> (<span class="pl-en">mu_next_command</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">&</span><span class="pl-s1">cmd</span>)) {
|
||
<span class="pl-k">if</span> (<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">type</span> <span class="pl-c1">==</span> <span class="pl-c1">MU_COMMAND_TEXT</span>) {
|
||
<span class="pl-en">render_text</span>(<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">text</span>.<span class="pl-c1">font</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">text</span>.<span class="pl-c1">text</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">text</span>.<span class="pl-c1">pos</span>.<span class="pl-c1">x</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">text</span>.<span class="pl-c1">pos</span>.<span class="pl-c1">y</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">text</span>.<span class="pl-c1">color</span>);
|
||
}
|
||
<span class="pl-k">if</span> (<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">type</span> <span class="pl-c1">==</span> <span class="pl-c1">MU_COMMAND_RECT</span>) {
|
||
<span class="pl-en">render_rect</span>(<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">rect</span>.<span class="pl-c1">rect</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">rect</span>.<span class="pl-c1">color</span>);
|
||
}
|
||
<span class="pl-k">if</span> (<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">type</span> <span class="pl-c1">==</span> <span class="pl-c1">MU_COMMAND_ICON</span>) {
|
||
<span class="pl-en">render_icon</span>(<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">icon</span>.<span class="pl-c1">id</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">icon</span>.<span class="pl-c1">rect</span>, <span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">icon</span>.<span class="pl-c1">color</span>);
|
||
}
|
||
<span class="pl-k">if</span> (<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">type</span> <span class="pl-c1">==</span> <span class="pl-c1">MU_COMMAND_CLIP</span>) {
|
||
<span class="pl-en">set_clip_rect</span>(<span class="pl-s1">cmd</span><span class="pl-c1">-></span><span class="pl-c1">clip</span>.<span class="pl-c1">rect</span>);
|
||
}
|
||
}</pre></div>
|
||
<p dir="auto">See the <a href="/rxi/microui/blob/master/demo"><code>demo</code></a> directory for a usage example.</p>
|
||
<div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Layout System</h2><a id="user-content-layout-system" class="anchor" aria-label="Permalink: Layout System" href="#layout-system"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
|
||
<p dir="auto">The layout system is primarily based around <em>rows</em> — Each row
|
||
can contain a number of <em>items</em> or <em>columns</em> each column can itself
|
||
contain a number of rows and so forth. A row is initialised using the
|
||
<code>mu_layout_row()</code> function, the user should specify the number of items
|
||
on the row, an array containing the width of each item, and the height
|
||
of the row:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* initialise a row of 3 items: the first item with a width
|
||
** of 90 and the remaining two with the width of 100 */
|
||
mu_layout_row(ctx, 3, (int[]) { 90, 100, 100 }, 0);"><pre><span class="pl-c">/* initialise a row of 3 items: the first item with a width</span>
|
||
<span class="pl-c">** of 90 and the remaining two with the width of 100 */</span>
|
||
<span class="pl-en">mu_layout_row</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">3</span>, (<span class="pl-smi">int</span>[]) { <span class="pl-c1">90</span>, <span class="pl-c1">100</span>, <span class="pl-c1">100</span> }, <span class="pl-c1">0</span>);</pre></div>
|
||
<p dir="auto">When a row is filled the next row is started, for example, in the above
|
||
code 6 buttons immediately after would result in two rows. The function
|
||
can be called again to begin a new row.</p>
|
||
<p dir="auto">As well as absolute values, width and height can be specified as <code>0</code>
|
||
which will result in the Context's <code>style.size</code> value being used, or a
|
||
negative value which will size the item relative to the right/bottom edge,
|
||
thus if we wanted a row with a small button at the left, a textbox filling
|
||
most the row and a larger button at the right, we could do the following:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_layout_row(ctx, 3, (int[]) { 30, -90, -1 }, 0);
|
||
mu_button(ctx, "X");
|
||
mu_textbox(ctx, buf, sizeof(buf));
|
||
mu_button(ctx, "Submit");"><pre><span class="pl-en">mu_layout_row</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">3</span>, (<span class="pl-smi">int</span>[]) { <span class="pl-c1">30</span>, <span class="pl-c1">-90</span>, <span class="pl-c1">-1</span> }, <span class="pl-c1">0</span>);
|
||
<span class="pl-en">mu_button</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"X"</span>);
|
||
<span class="pl-en">mu_textbox</span>(<span class="pl-s1">ctx</span>, <span class="pl-s1">buf</span>, <span class="pl-k">sizeof</span>(<span class="pl-s1">buf</span>));
|
||
<span class="pl-en">mu_button</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"Submit"</span>);</pre></div>
|
||
<p dir="auto">If the <code>items</code> parameter is <code>0</code>, the <code>widths</code> parameter is ignored
|
||
and controls will continue to be added to the row at the width last
|
||
specified by <code>mu_layout_width()</code> or <code>style.size.x</code> if this function has
|
||
not been called:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_layout_row(ctx, 0, NULL, 0);
|
||
mu_layout_width(ctx, -90);
|
||
mu_textbox(ctx, buf, sizeof(buf));
|
||
mu_layout_width(ctx, -1);
|
||
mu_button(ctx, "Submit");"><pre><span class="pl-en">mu_layout_row</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">0</span>, <span class="pl-c1">NULL</span>, <span class="pl-c1">0</span>);
|
||
<span class="pl-en">mu_layout_width</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">-90</span>);
|
||
<span class="pl-en">mu_textbox</span>(<span class="pl-s1">ctx</span>, <span class="pl-s1">buf</span>, <span class="pl-k">sizeof</span>(<span class="pl-s1">buf</span>));
|
||
<span class="pl-en">mu_layout_width</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">-1</span>);
|
||
<span class="pl-en">mu_button</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"Submit"</span>);</pre></div>
|
||
<p dir="auto">A column can be started at any point on a row using the
|
||
<code>mu_layout_begin_column()</code> function. Once begun, rows will act inside
|
||
the body of the column — all negative size values will be relative to
|
||
the column's body as opposed to the body of the container. All new rows
|
||
will be contained within this column until the <code>mu_layout_end_column()</code>
|
||
function is called.</p>
|
||
<p dir="auto">Internally controls use the <code>mu_layout_next()</code> function to retrieve the
|
||
next screen-positioned-Rect and advance the layout system, you should use
|
||
this function when making custom controls or if you want to advance the
|
||
layout system without placing a control.</p>
|
||
<p dir="auto">The <code>mu_layout_set_next()</code> function is provided to set the next layout
|
||
Rect explicitly. This will be returned by <code>mu_layout_next()</code> when it is
|
||
next called. By using the <code>relative</code> boolean you can choose to provide
|
||
a screen-space Rect or a Rect which will have the container's position
|
||
and scroll offset applied to it. You can peek the next Rect from the
|
||
layout system by using the <code>mu_layout_next()</code> function to retrieve it,
|
||
followed by <code>mu_layout_set_next()</code> to return it:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="mu_Rect rect = mu_layout_next(ctx);
|
||
mu_layout_set_next(ctx, rect, 0);"><pre><span class="pl-smi">mu_Rect</span> <span class="pl-s1">rect</span> <span class="pl-c1">=</span> <span class="pl-en">mu_layout_next</span>(<span class="pl-s1">ctx</span>);
|
||
<span class="pl-en">mu_layout_set_next</span>(<span class="pl-s1">ctx</span>, <span class="pl-s1">rect</span>, <span class="pl-c1">0</span>);</pre></div>
|
||
<p dir="auto">If you want to position controls arbitrarily inside a container the
|
||
<code>relative</code> argument of <code>mu_layout_set_next()</code> should be true:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* place a (40, 40) sized button at (300, 300) inside the container: */
|
||
mu_layout_set_next(ctx, mu_rect(300, 300, 40, 40), 1);
|
||
mu_button(ctx, "X");"><pre><span class="pl-c">/* place a (40, 40) sized button at (300, 300) inside the container: */</span>
|
||
<span class="pl-en">mu_layout_set_next</span>(<span class="pl-s1">ctx</span>, <span class="pl-en">mu_rect</span>(<span class="pl-c1">300</span>, <span class="pl-c1">300</span>, <span class="pl-c1">40</span>, <span class="pl-c1">40</span>), <span class="pl-c1">1</span>);
|
||
<span class="pl-en">mu_button</span>(<span class="pl-s1">ctx</span>, <span class="pl-s">"X"</span>);</pre></div>
|
||
<p dir="auto">A Rect set with <code>relative</code> true will also effect the <code>content_size</code>
|
||
of the container, causing it to effect the scrollbars if it exceeds the
|
||
width or height of the container's body.</p>
|
||
<div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Style Customisation</h2><a id="user-content-style-customisation" class="anchor" aria-label="Permalink: Style Customisation" href="#style-customisation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
|
||
<p dir="auto">The library provides styling support via the <code>mu_Style</code> struct and, if you
|
||
want greater control over the look, the <code>draw_frame()</code> callback function.</p>
|
||
<p dir="auto">The <code>mu_Style</code> struct contains spacing and sizing information, as well
|
||
as a <code>colors</code> array which maps <code>colorid</code> to <code>mu_Color</code>. The library uses
|
||
the <code>style</code> pointer field of the context to resolve colors and spacing,
|
||
it is safe to change this pointer or modify any fields of the resultant
|
||
struct at any point. See <a href="/rxi/microui/blob/master/src/microui.h"><code>microui.h</code></a> for the struct's
|
||
implementation.</p>
|
||
<p dir="auto">In addition to the style struct the context stores a <code>draw_frame()</code>
|
||
callback function which is used whenever the <em>frame</em> of a control needs
|
||
to be drawn, by default this function draws a rectangle using the color
|
||
of the <code>colorid</code> argument, with a one-pixel border around it using the
|
||
<code>MU_COLOR_BORDER</code> color.</p>
|
||
<div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto">Custom Controls</h2><a id="user-content-custom-controls" class="anchor" aria-label="Permalink: Custom Controls" href="#custom-controls"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
|
||
<p dir="auto">The library exposes the functions used by built-in controls to allow the
|
||
user to make custom controls. A control should take a <code>mu_Context*</code> value
|
||
as its first argument and return a <code>MU_RES_...</code> value. Your control's
|
||
implementation should use <code>mu_layout_next()</code> to get its destination
|
||
Rect and advance the layout system. <code>mu_get_id()</code> should be used with
|
||
some data unique to the control to generate an ID for that control and
|
||
<code>mu_update_control()</code> should be used to update the context's <code>hover</code>
|
||
and <code>focus</code> values based on the mouse input state.</p>
|
||
<p dir="auto">The <code>MU_OPT_HOLDFOCUS</code> opt value can be passed to <code>mu_update_control()</code>
|
||
if we want the control to retain focus when the mouse button is released
|
||
— this behaviour is used by textboxes which we want to stay focused
|
||
to allow for text input.</p>
|
||
<p dir="auto">A control that acts as a button which displays an integer and, when
|
||
clicked increments that integer, could be implemented as such:</p>
|
||
<div class="highlight highlight-source-c notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="int incrementer(mu_Context *ctx, int *value) {
|
||
mu_Id id = mu_get_id(ctx, &value, sizeof(value));
|
||
mu_Rect rect = mu_layout_next(ctx);
|
||
mu_update_control(ctx, id, rect, 0);
|
||
|
||
/* handle input */
|
||
int res = 0;
|
||
if (ctx->mouse_pressed == MU_MOUSE_LEFT && ctx->focus == id) {
|
||
(*value)++;
|
||
res |= MU_RES_CHANGE;
|
||
}
|
||
|
||
/* draw */
|
||
char buf[32];
|
||
sprintf(buf, "%d", *value);
|
||
mu_draw_control_frame(ctx, id, rect, MU_COLOR_BUTTON, 0);
|
||
mu_draw_control_text(ctx, buf, rect, MU_COLOR_TEXT, MU_OPT_ALIGNCENTER);
|
||
|
||
return res;
|
||
}"><pre><span class="pl-smi">int</span> <span class="pl-en">incrementer</span>(<span class="pl-smi">mu_Context</span> <span class="pl-c1">*</span><span class="pl-s1">ctx</span>, <span class="pl-smi">int</span> <span class="pl-c1">*</span><span class="pl-s1">value</span>) {
|
||
<span class="pl-smi">mu_Id</span> <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-en">mu_get_id</span>(<span class="pl-s1">ctx</span>, <span class="pl-c1">&</span><span class="pl-s1">value</span>, <span class="pl-k">sizeof</span>(<span class="pl-s1">value</span>));
|
||
<span class="pl-smi">mu_Rect</span> <span class="pl-s1">rect</span> <span class="pl-c1">=</span> <span class="pl-en">mu_layout_next</span>(<span class="pl-s1">ctx</span>);
|
||
<span class="pl-en">mu_update_control</span>(<span class="pl-s1">ctx</span>, <span class="pl-s1">id</span>, <span class="pl-s1">rect</span>, <span class="pl-c1">0</span>);
|
||
|
||
<span class="pl-c">/* handle input */</span>
|
||
<span class="pl-smi">int</span> <span class="pl-s1">res</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span>;
|
||
<span class="pl-k">if</span> (<span class="pl-s1">ctx</span><span class="pl-c1">-></span><span class="pl-c1">mouse_pressed</span> <span class="pl-c1">==</span> <span class="pl-c1">MU_MOUSE_LEFT</span> <span class="pl-c1">&&</span> <span class="pl-s1">ctx</span><span class="pl-c1">-></span><span class="pl-c1">focus</span> <span class="pl-c1">==</span> <span class="pl-s1">id</span>) {
|
||
(<span class="pl-c1">*</span><span class="pl-s1">value</span>)<span class="pl-c1">++</span>;
|
||
<span class="pl-s1">res</span> |= <span class="pl-c1">MU_RES_CHANGE</span>;
|
||
}
|
||
|
||
<span class="pl-c">/* draw */</span>
|
||
<span class="pl-smi">char</span> <span class="pl-s1">buf</span>[<span class="pl-c1">32</span>];
|
||
<span class="pl-en">sprintf</span>(<span class="pl-s1">buf</span>, <span class="pl-s">"%d"</span>, <span class="pl-c1">*</span><span class="pl-s1">value</span>);
|
||
<span class="pl-en">mu_draw_control_frame</span>(<span class="pl-s1">ctx</span>, <span class="pl-s1">id</span>, <span class="pl-s1">rect</span>, <span class="pl-c1">MU_COLOR_BUTTON</span>, <span class="pl-c1">0</span>);
|
||
<span class="pl-en">mu_draw_control_text</span>(<span class="pl-s1">ctx</span>, <span class="pl-s1">buf</span>, <span class="pl-s1">rect</span>, <span class="pl-c1">MU_COLOR_TEXT</span>, <span class="pl-c1">MU_OPT_ALIGNCENTER</span>);
|
||
|
||
<span class="pl-k">return</span> <span class="pl-s1">res</span>;
|
||
}</pre></div>
|
||
</article></div><div class="d-none"></div></section></div></div></div> </div> <!-- --> </div></div></div></div></div></div><div class="ScrollMarksContainer-module__scrollMarksContainer__Eu7uU" id="find-result-marks-container"></div><div class="d-none"></div><div class="d-none"></div></div> <!-- --> <!-- --> <script type="application/json" id="__PRIMER_DATA__R_1___">{"resolvedServerColorMode":"day"}</script></div>
|
||
</react-app>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</turbo-frame>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer class="footer tmp-pt-7 tmp-pb-6 f6 color-fg-muted color-border-subtle p-responsive" role="contentinfo" >
|
||
<h2 class='sr-only'>Footer</h2>
|
||
|
||
|
||
|
||
|
||
<div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap">
|
||
<div class="d-flex flex-items-center flex-shrink-0 mx-2">
|
||
<a aria-label="GitHub Homepage" class="footer-octicon mr-2" href="https://github.com">
|
||
<svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github">
|
||
<path d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943"></path>
|
||
</svg>
|
||
</a>
|
||
<span>
|
||
© 2026 GitHub, Inc.
|
||
</span>
|
||
</div>
|
||
|
||
<nav aria-label="Footer">
|
||
<h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3>
|
||
|
||
<ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading">
|
||
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to community","label":"text:community"}" href="https://github.community/" data-view-component="true" class="Link--secondary Link">Community</a>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a>
|
||
</li>
|
||
|
||
<li class="mx-2" >
|
||
<cookie-consent-link>
|
||
<button
|
||
type="button"
|
||
class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent"
|
||
data-action="click:cookie-consent-link#showConsentManagement"
|
||
data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}"
|
||
>
|
||
Manage cookies
|
||
</button>
|
||
</cookie-consent-link>
|
||
</li>
|
||
|
||
<li class="mx-2">
|
||
<cookie-consent-link>
|
||
<button
|
||
type="button"
|
||
class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent text-left"
|
||
data-action="click:cookie-consent-link#showConsentManagement"
|
||
data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}"
|
||
>
|
||
Do not share my personal information
|
||
</button>
|
||
</cookie-consent-link>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
<ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999"
|
||
data-locale="en"
|
||
data-initial-cookie-consent-allowed=""
|
||
data-cookie-consent-required="false"
|
||
></ghcc-consent>
|
||
|
||
|
||
|
||
|
||
<div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden>
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
|
||
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
|
||
</svg>
|
||
<button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
|
||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</button>
|
||
You can’t perform that action at this time.
|
||
</div>
|
||
|
||
<template id="site-details-dialog">
|
||
<details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open>
|
||
<summary role="button" aria-label="Close dialog"></summary>
|
||
<details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal">
|
||
<button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog>
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
|
||
<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
|
||
</svg>
|
||
</button>
|
||
<div class="octocat-spinner tmp-my-6 js-details-dialog-spinner"></div>
|
||
</details-dialog>
|
||
</details>
|
||
</template>
|
||
|
||
<div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;">
|
||
<div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;">
|
||
</div>
|
||
</div>
|
||
|
||
<template id="snippet-clipboard-copy-button">
|
||
<div class="zeroclipboard-container position-absolute right-0 top-0">
|
||
<clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2 tmp-m-2">
|
||
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
|
||
</svg>
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2 tmp-m-2">
|
||
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
|
||
</svg>
|
||
</clipboard-copy>
|
||
</div>
|
||
</template>
|
||
<template id="snippet-clipboard-copy-button-unpositioned">
|
||
<div class="zeroclipboard-container">
|
||
<clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w">
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon">
|
||
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
|
||
</svg>
|
||
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none">
|
||
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
|
||
</svg>
|
||
</clipboard-copy>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
<div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div>
|
||
<div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div>
|
||
</body>
|
||
</html>
|
||
|
||
# Usage
|
||
|
||
## Overview
|
||
|
||
The Jack Looper application provides a simple audio loop player using JACK.
|
||
|
||
## Getting Started
|
||
|
||
1. Ensure JACK is running
|
||
2. Run `./jack-looper`
|
||
3. Use the TUI interface to control playback
|
||
|
||
## Controls
|
||
|
||
- Space: Play/Stop
|
||
- Up/Down: Change BPM
|
||
- Left/Right: Change loop length
|
||
- R: Reset beat position
|
||
- Q: Quit
|
||
|
||
## Building
|
||
|
||
Run `make` to build all targets.
|