dnrops
/
dnrops.gitlink.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dnrops.gitlink.net/posts/rust/slint_builtin_elements.html

761 lines
76 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html lang="en" class="coal" dir="ltr">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Slint Builtin Elements - Andrew&#x27;s Blog</title>
<!-- Custom HTML head -->
<meta name="description" content="Andrew Ryan&#x27;s Blog">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="../../favicon.svg">
<link rel="shortcut icon" href="../../favicon.png">
<link rel="stylesheet" href="../../css/variables.css">
<link rel="stylesheet" href="../../css/general.css">
<link rel="stylesheet" href="../../css/chrome.css">
<!-- Fonts -->
<link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="../../fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="../../highlight.css">
<link rel="stylesheet" href="../../tomorrow-night.css">
<link rel="stylesheet" href="../../ayu-highlight.css">
<!-- Custom theme stylesheets -->
<link rel="stylesheet" href="../../src/style/custom.css">
<!-- MathJax -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body class="sidebar-visible no-js">
<div id="body-container">
<!-- Provide site root to javascript -->
<script>
var path_to_root = "../../";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "coal" : "coal";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script>
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script>
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('coal')
html.classList.add(theme);
var body = document.querySelector('body');
body.classList.remove('no-js')
body.classList.add('js');
</script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed -->
<script>
var body = document.querySelector('body');
var sidebar = null;
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
} else {
sidebar = 'hidden';
}
sidebar_toggle.checked = sidebar === 'visible';
body.classList.remove('sidebar-visible');
body.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item affix "><a href="../../index.html">Andrew's Blog</a></li><li class="chapter-item "><a href="../../posts/linux/linux.html"><strong aria-hidden="true">1.</strong> linux</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/linux/install_linux.html"><strong aria-hidden="true">1.1.</strong> install linux</a></li><li class="chapter-item "><a href="../../posts/linux/bash_profile.html"><strong aria-hidden="true">1.2.</strong> bash profile</a></li><li class="chapter-item "><a href="../../posts/linux/command_list.html"><strong aria-hidden="true">1.3.</strong> command list</a></li><li class="chapter-item "><a href="../../posts/linux/git_guide.html"><strong aria-hidden="true">1.4.</strong> git guide</a></li><li class="chapter-item "><a href="../../posts/linux/tar.html"><strong aria-hidden="true">1.5.</strong> tar</a></li><li class="chapter-item "><a href="../../posts/linux/run_x86_elf_in_x64_setup.html"><strong aria-hidden="true">1.6.</strong> run x86 elf in x64 setup</a></li></ol></li><li class="chapter-item "><a href="../../posts/mac/mac.html"><strong aria-hidden="true">2.</strong> mac</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/mac/macos_profiles.html"><strong aria-hidden="true">2.1.</strong> macos profiles</a></li></ol></li><li class="chapter-item "><a href="../../posts/swift/swift.html"><strong aria-hidden="true">3.</strong> swift</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/swift/learn_swift.html"><strong aria-hidden="true">3.1.</strong> learn swift basics</a></li><li class="chapter-item "><a href="../../posts/swift/swift_extensions.html"><strong aria-hidden="true">3.2.</strong> Swift extensions</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_extension.html"><strong aria-hidden="true">3.3.</strong> SwiftUI extensions</a></li><li class="chapter-item "><a href="../../posts/swift/install_swift.html"><strong aria-hidden="true">3.4.</strong> install swift</a></li><li class="chapter-item "><a href="../../posts/swift/task_planner.html"><strong aria-hidden="true">3.5.</strong> implment task panner app with SwiftUI</a></li><li class="chapter-item "><a href="../../posts/swift/swift_cheat_sheet.html"><strong aria-hidden="true">3.6.</strong> Swift Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/swift/yinci_url.html"><strong aria-hidden="true">3.7.</strong> Personal privacy protocol</a></li><li class="chapter-item "><a href="../../posts/swift/swift_regular_exressions.html"><strong aria-hidden="true">3.8.</strong> Swift regular exressions</a></li><li class="chapter-item "><a href="../../posts/ios/how_to_create_beautiful_ios_charts_in_swift.html"><strong aria-hidden="true">3.9.</strong> How to Create Beautiful iOS Charts in鑱絊wift</a></li><li class="chapter-item "><a href="../../posts/swift/swiftui_source_code.html"><strong aria-hidden="true">3.10.</strong> SwiftUI source code</a></li><li class="chapter-item "><a href="../../posts/swift/use_swift_fetch_iciba_api.html"><strong aria-hidden="true">3.11.</strong> use swift fetch iciba API</a></li></ol></li><li class="chapter-item "><a href="../../posts/ios/ios.html"><strong aria-hidden="true">4.</strong> ios</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ios/cocaposd_setup_and_install_for_ios_project.html"><strong aria-hidden="true">4.1.</strong> cocaposd setup and install for ios project</a></li><li class="chapter-item "><a href="../../posts/ios/swiftui_show_gif_image.html"><strong aria-hidden="true">4.2.</strong> SwiftUI show gif image</a></li><li class="chapter-item "><a href="../../posts/ios/implement_task_planner_app.html"><strong aria-hidden="true">4.3.</strong> implement Task planner App</a></li></ol></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c.html"><strong aria-hidden="true">5.</strong> objective_c</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/objective_c/objective_c_cheat_sheet.html"><strong aria-hidden="true">5.1.</strong> Objective-C Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/objective_c/objective_c_for_absolute_beginners_read_note.html"><strong aria-hidden="true">5.2.</strong> Objective-C Note</a></li></ol></li><li class="chapter-item "><a href="../../posts/dart/dart.html"><strong aria-hidden="true">6.</strong> dart</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/dart/flutter.html"><strong aria-hidden="true">6.1.</strong> Flutter Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/dart/dart_cheat_sheet.html"><strong aria-hidden="true">6.2.</strong> Dart Cheat Sheet</a></li><li class="chapter-item "><a href="../../posts/flutter/flutter_dev_test.html"><strong aria-hidden="true">6.3.</strong> Flutter dev test</a></li></ol></li><li class="chapter-item expanded "><a href="../../posts/rust/rust.html"><strong aria-hidden="true">7.</strong> rust</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/rust/offline_use_rust.html"><strong aria-hidden="true">7.1.</strong> Offline use rust</a></li><li class="chapter-item "><a href="../../posts/rust/rust_grammer.html"><strong aria-hidden="true">7.2.</strong> rust grammar</a></li><li class="chapter-item "><a href="../../posts/rust/pase_string_and_decimal_conversion.html"><strong aria-hidden="true">7.3.</strong> pase string and decimal conversion</a></li><li class="chapter-item "><a href="../../posts/rust/parse_types.html"><strong aria-hidden="true">7.4.</strong> rust types</a></li><li class="chapter-item "><a href="../../posts/rust/rust_life_cycle.html"><strong aria-hidden="true">7.5.</strong> Rust life cycle</a></li><li class="chapter-item "><a href="../../posts/rust/rust_generic.html"><strong aria-hidden="true">7.6.</strong> rust generics</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implment_matrix.html"><strong aria-hidden="true">7.7.</strong> Rust implement matrix</a></li><li class="chapter-item "><a href="../../posts/rust/rust_sort.html"><strong aria-hidden="true">7.8.</strong> Rust implement sort algorithms</a></li><li class="chapter-item "><a href="../../posts/rust/implement_aes_encryption.html"><strong aria-hidden="true">7.9.</strong> Rust implement AEC encryption and decryption</a></li><li class="chapter-item "><a href="../../posts/rust/implement_trie_data_structure.html"><strong aria-hidden="true">7.10.</strong> implement trie data structure</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_tree.html"><strong aria-hidden="true">7.11.</strong> implement tree data_structure</a></li><li class="chapter-item "><a href="../../posts/rust/list_dir.html"><strong aria-hidden="true">7.12.</strong> list dir</a></li><li class="chapter-item "><a href="../../posts/rust/fast_way_to_implment_object_trait.html"><strong aria-hidden="true">7.13.</strong> fast way to implment object trait</a></li><li class="chapter-item "><a href="../../posts/rust/compress_rust_binary_size.html"><strong aria-hidden="true">7.14.</strong> compress rust binary size</a></li><li class="chapter-item "><a href="../../posts/rust/implment_file_upload_backend.html"><strong aria-hidden="true">7.15.</strong> impliment file upload</a></li><li class="chapter-item "><a href="../../posts/rust/this_is_add_post_cli_implementation_in_rust.html"><strong aria-hidden="true">7.16.</strong> this is add_post cli implementation in rust</a></li><li class="chapter-item "><a href="../../posts/rust/use_rust_implment_a_copyclipbord_cli.html"><strong aria-hidden="true">7.17.</strong> Use rust implment a copyclipbord CLI</a></li><li class="chapter-item "><a href="../../posts/rust/sqlite_database_add_delete_update_show_in_rust.html"><strong aria-hidden="true">7.18.</strong> sqlite database add delete update show in rust</a></li><li class="chapter-item "><a href="../../posts/rust/implementing_tokio_joinhandle_for_wasm.html"><strong aria-hidden="true">7.19.</strong> Implementing tokio JoinHandle for wasm</a></li><li class="chapter-item "><a href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html"><strong aria-hidden="true">7.20.</strong> rust implement a crate for encode and decode brainfuck and ook</a></li><li class="chapter-item expanded "><a href="../../posts/rust/slint_builtin_elements.html" class="active"><strong aria-hidden="true">7.21.</strong> Slint Builtin Elements</a></li><li class="chapter-item "><a href="../../posts/rust/corporate_network_install_rust_on_windows.html"><strong aria-hidden="true">7.22.</strong> Corporate network install Rust on windows</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_file_how_to_judge_static_link_or_dynamic_link_in_macos.html"><strong aria-hidden="true">7.23.</strong> rust binary file how to judge static link or dynamic link in Macos</a></li><li class="chapter-item "><a href="../../posts/rust/rust_binary_include_dir_and_get_contents.html"><strong aria-hidden="true">7.24.</strong> rust binary include dir and get contents</a></li><li class="chapter-item "><a href="../../posts/rust/rust_logger_non-block.html"><strong aria-hidden="true">7.25.</strong> rust logger non-block</a></li><li class="chapter-item "><a href="../../posts/rust/rust_connect_sql_server_database.html"><strong aria-hidden="true">7.26.</strong> rust connect sql server database</a></li><li class="chapter-item "><a href="../../posts/rust/rust_websocket_implment.html"><strong aria-hidden="true">7.27.</strong> rust websocket implment</a></li></ol></li><li class="chapter-item "><a href="../../posts/java/java.html"><strong aria-hidden="true">8.</strong> java</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/java/java_grammar.html"><strong aria-hidden="true">8.1.</strong> java grammar and codewar</a></li><li class="chapter-item "><a href="../../posts/java/run_jar.html"><strong aria-hidden="true">8.2.</strong> java run .jar</a></li><li class="chapter-item "><a href="../../posts/java/java_pomxml_add_defaultgoal_to_build.html"><strong aria-hidden="true">8.3.</strong> Java pomxml add defaultGoal to build</a></li><li class="chapter-item "><a href="../../posts/java/java_set_mvn_mirror.html"><strong aria-hidden="true">8.4.</strong> Java set mvn mirror</a></li></ol></li><li class="chapter-item "><a href="../../posts/python/python.html"><strong aria-hidden="true">9.</strong> python</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/python/convert_pesn.html"><strong aria-hidden="true">9.1.</strong> convert pesn</a></li><li class="chapter-item "><a href="../../posts/python/find_remove_dir.html"><strong aria-hidden="true">9.2.</strong> find and remove dir</a></li><li class="chapter-item "><a href="../../posts/python/timing_message.html"><strong aria-hidden="true">9.3.</strong> wechat send message</a></li><li class="chapter-item "><a href="../../posts/python/use_python_openpyxl_package_read_and_edit_excel_files.html"><strong aria-hidden="true">9.4.</strong> Use python openpyxl package read and edit excel files</a></li></ol></li><li class="chapter-item "><a href="../../posts/go/go.html"><strong aria-hidden="true">10.</strong> go</a></li><li class="chapter-item "><a href="../../posts/js/js.html"><strong aria-hidden="true">11.</strong> js</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/js/js_tutorial.html"><strong aria-hidden="true">11.1.</strong> js tutorial</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_map.html"><strong aria-hidden="true">11.2.</strong> ja map</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_math.html"><strong aria-hidden="true">11.3.</strong> js math</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_object.html"><strong aria-hidden="true">11.4.</strong> js object</a></li><li class="chapter-item "><a href="../../posts/js/js_tutorial_set.html"><strong aria-hidden="true">11.5.</strong> js set</a></li><li class="chapter-item "><a href="../../posts/js/single_thread_and_asynchronous.html"><strong aria-hidden="true">11.6.</strong> single thread and asynchronous</a></li><li class="chapter-item "><a href="../../posts/js/this.html"><strong aria-hidden="true">11.7.</strong> js this</a></li><li class="chapter-item "><a href="../../posts/js/js_implment_aes.html"><strong aria-hidden="true">11.8.</strong> js implment aes</a></li><li class="chapter-item "><a href="../../posts/js/getting_started_with_ajax.html"><strong aria-hidden="true">11.9.</strong> getting started with ajax</a></li><li class="chapter-item "><a href="../../posts/js/BinarySearchTree.html"><strong aria-hidden="true">11.10.</strong> binary search tree</a></li><li class="chapter-item "><a href="../../posts/js/goole_zx.html"><strong aria-hidden="true">11.11.</strong> goole zx</a></li><li class="chapter-item "><a href="../../posts/js/es6.html"><strong aria-hidden="true">11.12.</strong> es6</a></li></ol></li><li class="chapter-item "><a href="../../posts/ruby/ruby.html"><strong aria-hidden="true">12.</strong> ruby</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ruby/rails_setup_env.html"><strong aria-hidden="true">12.1.</strong> ruby on rails setup environment</a></li><li class="chapter-item "><a href="../../posts/ruby/learn_ruby.html"><strong aria-hidden="true">12.2.</strong> learn ruby</a></li><li class="chapter-item "><a href="../../posts/ruby/ruby_note.html"><strong aria-hidden="true">12.3.</strong> Ruby Note</a></li><li class="chapter-item "><a href="../../posts/ruby/setup_ruby_for_ctf.html"><strong aria-hidden="true">12.4.</strong> Setup ruby for CTF</a></li></ol></li><li class="chapter-item "><a href="../../posts/react/react.html"><strong aria-hidden="true">13.</strong> react</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/react/react_life_cycle.html"><strong aria-hidden="true">13.1.</strong> react life cycle</a></li><li class="chapter-item "><a href="../../posts/react/react_router.html"><strong aria-hidden="true">13.2.</strong> react router</a></li><li class="chapter-item "><a href="../../posts/react/react_this.html"><strong aria-hidden="true">13.3.</strong> react this</a></li><li class="chapter-item "><a href="../../posts/react/react_interviw.html"><strong aria-hidden="true">13.4.</strong> react interview</a></li><li class="chapter-item "><a href="../../posts/react/important_react_interview.html"><strong aria-hidden="true">13.5.</strong> important react interview</a></li><li class="chapter-item "><a href="../../posts/react/react_quick_reference.html"><strong aria-hidden="true">13.6.</strong> react quick reference</a></li><li class="chapter-item "><a href="../../posts/react/redux_quick_reference.html"><strong aria-hidden="true">13.7.</strong> redux quick reference</a></li></ol></li><li class="chapter-item "><a href="../../posts/vue/vue.html"><strong aria-hidden="true">14.</strong> vue</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/vue/vue_ajax.html"><strong aria-hidden="true">14.1.</strong> vue ajax</a></li></ol></li><li class="chapter-item "><a href="../../posts/angular/angular.html"><strong aria-hidden="true">15.</strong> angular</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/angular/controller_communication.html"><strong aria-hidden="true">15.1.</strong> controller communication</a></li><li class="chapter-item "><a href="../../posts/angular/creating_custom_directives.html"><strong aria-hidden="true">15.2.</strong> creating custom directives</a></li><li class="chapter-item "><a href="../../posts/angular/directive_notes.html"><strong aria-hidden="true">15.3.</strong> directive notes</a></li><li class="chapter-item "><a href="../../posts/angular/directive_communication.html"><strong aria-hidden="true">15.4.</strong> directive communication</a></li><li class="chapter-item "><a href="../../posts/angular/post_params.html"><strong aria-hidden="true">15.5.</strong> post params</a></li><li class="chapter-item "><a href="../../posts/angular/read_json_angular.html"><strong aria-hidden="true">15.6.</strong> read json angular</a></li><li class="chapter-item "><a href="../../posts/angular/same_route_reload.html"><strong aria-hidden="true">15.7.</strong> same route reload</a></li></ol></li><li class="chapter-item "><a href="../../posts/css/css.html"><strong aria-hidden="true">16.</strong> css</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/css/use_css_media.html"><strong aria-hidden="true">16.1.</strong> use css media</a></li></ol></li><li class="chapter-item "><a href="../../posts/php/php.html"><strong aria-hidden="true">17.</strong> php</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/php/for_php_string_implment_some_extemtion_functions.html"><strong aria-hidden="true">17.1.</strong> for php string implment some extemtion functions</a></li><li class="chapter-item "><a href="../../posts/php/php_cheatsheet.html"><strong aria-hidden="true">17.2.</strong> PHP cheatsheet</a></li></ol></li><li class="chapter-item "><a href="../../posts/leetcode/leetcode.html"><strong aria-hidden="true">18.</strong> leetcode</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/leetcode/rust_leetcode.html"><strong aria-hidden="true">18.1.</strong> rust leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_codewar.html"><strong aria-hidden="true">18.2.</strong> rust codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/swift_codewar.html"><strong aria-hidden="true">18.3.</strong> swift codewar</a></li><li class="chapter-item "><a href="../../posts/leetcode/js_leetcode.html"><strong aria-hidden="true">18.4.</strong> js leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/java_leetcode.html"><strong aria-hidden="true">18.5.</strong> java leetcode</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_huawei.html"><strong aria-hidden="true">18.6.</strong> huawei test</a></li><li class="chapter-item "><a href="../../posts/leetcode/rust_utils.html"><strong aria-hidden="true">18.7.</strong> rust common functions</a></li><li class="chapter-item "><a href="../../posts/leetcode/olympiad_training.html"><strong aria-hidden="true">18.8.</strong> Computer olympiad training</a></li></ol></li><li class="chapter-item "><a href="../../posts/ctf/CTF.html"><strong aria-hidden="true">19.</strong> ctf</a><a class="toggle"><div>❱</div></a></li><li><ol class="section"><li class="chapter-item "><a href="../../posts/ctf/CTF_Note.html"><strong aria-hidden="true">19.1.</strong> CTF Note</a></li><li class="chapter-item "><a href="../../posts/ctf/0.1_Web.html"><strong aria-hidden="true">19.2.</strong> Web</a></li><li class="chapter-item "><a href="../../posts/ctf/4.1_Misc.html"><strong aria-hidden="true">19.3.</strong> Misc</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">19.4.</strong> PWN</a></li><li class="chapter-item "><a href="../../posts/ctf/3.1_Crypto.html"><strong aria-hidden="true">19.5.</strong> Crypto</a></li><li class="chapter-item "><a href="../../posts/ctf/3.4_RSA_note.html"><strong aria-hidden="true">19.6.</strong> Rsa attack</a></li><li class="chapter-item "><a href="../../posts/ctf/3.5_Base64.html"><strong aria-hidden="true">19.7.</strong> Base64</a></li><li class="chapter-item "><a href="../../posts/ctf/0.0_SQL Injection Cheatsheet.html"><strong aria-hidden="true">19.8.</strong> SQL Injection Cheatsheet</a></li><li class="chapter-item "><a href="../../posts/ctf/1.1_SQL_injection.html"><strong aria-hidden="true">19.9.</strong> SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.2_SQL_injection_UNION_attacks.html"><strong aria-hidden="true">19.10.</strong> SQL Injection UNION attacks</a></li><li class="chapter-item "><a href="../../posts/ctf/1.3_Blind SQL injection.html"><strong aria-hidden="true">19.11.</strong> Blind SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.4_Code Injection.html"><strong aria-hidden="true">19.12.</strong> Code Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.5_SSRF.html"><strong aria-hidden="true">19.13.</strong> SSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.6_OS command injection.html"><strong aria-hidden="true">19.14.</strong> OS command injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.7_Local file inclusion.html"><strong aria-hidden="true">19.15.</strong> Local file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.8_Remote file inclusion.html"><strong aria-hidden="true">19.16.</strong> Remote file inclusion</a></li><li class="chapter-item "><a href="../../posts/ctf/1.9_CSRFm.html"><strong aria-hidden="true">19.17.</strong> CSRF</a></li><li class="chapter-item "><a href="../../posts/ctf/1.10_NoSQL injection.html"><strong aria-hidden="true">19.18.</strong> NoSQL injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.11_JSON injection.html"><strong aria-hidden="true">19.19.</strong> JSON injection</a></li><li class="chapter-item "><a href="../../posts/ctf/1.12_CTF_Web_SQL_Note.html"><strong aria-hidden="true">19.20.</strong> CTF Web SQL Note</a></li><li class="chapter-item "><a href="../../posts/ctf/2.1_XXE.html"><strong aria-hidden="true">19.21.</strong> XXE</a></li><li class="chapter-item "><a href="../../posts/ctf/2.2_XSS.html"><strong aria-hidden="true">19.22.</strong> XSS</a></li><li class="chapter-item "><a href="../../posts/ctf/2.3_Upload File.html"><strong aria-hidden="true">19.23.</strong> Upload File</a></li><li class="chapter-item "><a href="../../posts/ctf/2.4_serialize_unserialize.html"><strong aria-hidden="true">19.24.</strong> serialize unserialize</a></li><li class="chapter-item "><a href="../../posts/ctf/2.5_Race condition.html"><strong aria-hidden="true">19.25.</strong> Race condition</a></li><li class="chapter-item "><a href="../../posts/ctf/3.2_PWN_note.html"><strong aria-hidden="true">19.26.</strong> PWN_note</a></li><li class="chapter-item "><a href="../../posts/ctf/3.3_pwn HCTF2016 brop.html"><strong aria-hidden="true">19.27.</strong> pwn HCTF2016 brop</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_patch_defense_skill.html"><strong aria-hidden="true">19.28.</strong> PWN Patch defense skill</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_stack_overflow.html"><strong aria-hidden="true">19.29.</strong> PWN stack overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_heap_overflow.html"><strong aria-hidden="true">19.30.</strong> PWN heap overflow</a></li><li class="chapter-item "><a href="../../posts/ctf/pwn_format_string_vulnerability.html"><strong aria-hidden="true">19.31.</strong> PWN Format String Vulnerability</a></li><li class="chapter-item "><a href="../../posts/ctf/kali_linux_tutorials.html"><strong aria-hidden="true">19.32.</strong> Kali linux tutorials</a></li><li class="chapter-item "><a href="../../posts/ctf/google_dorks_2023_lists.html"><strong aria-hidden="true">19.33.</strong> Google Dorks 2023 Lists</a></li><li class="chapter-item "><a href="../../posts/ctf/dvwa_writeup.html"><strong aria-hidden="true">19.34.</strong> DVWA WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/bwapp_writeup.html"><strong aria-hidden="true">19.35.</strong> bWAPP WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/sqlilabs_writeup.html"><strong aria-hidden="true">19.36.</strong> sqlilabs WriteUp</a></li><li class="chapter-item "><a href="../../posts/ctf/ctf_train_at_hangzhou.html"><strong aria-hidden="true">19.37.</strong> ctf train at hangzhou</a></li><li class="chapter-item "><a href="../../posts/ctf/ctf_common_mindmap_list.html"><strong aria-hidden="true">19.38.</strong> ctf common mindmap list</a></li><li class="chapter-item "><a href="../../posts/ctf/error_based_sql_injection.html"><strong aria-hidden="true">19.39.</strong> Error Based SQL Injection</a></li><li class="chapter-item "><a href="../../posts/ctf/urlfinder_tutorial.html"><strong aria-hidden="true">19.40.</strong> URLFinder Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/observer_ward_tutorial.html"><strong aria-hidden="true">19.41.</strong> observer_ward Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/mysql_udf_.html"><strong aria-hidden="true">19.42.</strong> MySQL UDF 提权</a></li><li class="chapter-item "><a href="../../posts/ctf/nuclei__tutorial.html"><strong aria-hidden="true">19.43.</strong> Nuclei Tutorial</a></li><li class="chapter-item "><a href="../../posts/ctf/2024_ctf_solution_thinking.html"><strong aria-hidden="true">19.44.</strong> 2024 ctf solution thinking</a></li><li class="chapter-item "><a href="../../posts/ctf/man_che_si_te_bian_ma.html"><strong aria-hidden="true">19.45.</strong> 曼彻斯特编码</a></li></ol></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav>
<!-- Track and set sidebar scroll position -->
<script>
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
sidebarScrollbox.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
}
}, { passive: true });
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
sessionStorage.removeItem('sidebar-scroll');
if (sidebarScrollTop) {
// preserve sidebar scroll position when navigating via links within sidebar
sidebarScrollbox.scrollTop = sidebarScrollTop;
} else {
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
var activeSection = document.querySelector('#sidebar .active');
if (activeSection) {
activeSection.scrollIntoView({ block: 'center' });
}
}
</script>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky">
<div class="left-buttons">
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</label>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">Andrew&#x27;s Blog</h1>
<div class="right-buttons">
<a href="https://gitlink.org.cn/dnrops/dnrops.gitlink.net.git" title="Git repository" aria-label="Git repository">
<i id="git-repository-button" class="fa fa-github"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script>
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="slint-builtin-elements"><a class="header" href="#slint-builtin-elements">Slint Builtin Elements</a></h1>
<p style="display:flex;
align-items: center;
justify-content: end;
">Pub Date: 2023-08-20</p>
## Common properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#common-properties "Permalink to this heading")
### Geometry[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#geometry "Permalink to this heading")
These properties are valid on all visible items:
- **`width`** and **`height`** (*in* *length*): The size of the element. When set, this overrides the default size.
- **`x`** and **`y`** (*in* *length*): The position of the element relative to its parent.
- **`z`** (*in* *float*): Allows to specify a different order to stack the items with its siblings. (default value: 0)
### Layout[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#layout "Permalink to this heading")
These properties are valid on all visible items and can be used to specify constraints when used in layouts:
- **`col`**, **`row`**, **`colspan`**, **`rowspan`** (*in* *int*): See [`GridLayout`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#gridlayout).
- **`horizontal-stretch`** and **`vertical-stretch`** (*in-out* *float*): Specify how much relative space these elements are stretching in a layout. When 0, this means that the elements won’t be stretched unless all elements are 0. Builtin widgets have a value of either 0 or 1.
- **`max-width`** and **`max-height`** (*in* *length*): The maximum size of an element
- **`min-width`** and **`min-height`** (*in* *length*): The minimum size of an element
- **`preferred-width`** and **`preferred-height`** (*in* *length*): The preferred size of an element
### Miscellaneous[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#miscellaneous "Permalink to this heading")
- **`cache-rendering-hint`** (*in* *bool*): When set to `true`, this provides a hint to the renderer to cache the contents of the element and all the children into an intermediate cached layer. For complex sub-trees that rarely change this may speed up the rendering, at the expense of increased memory consumption. Not all rendering backends support this, so this is merely a hint. (default value: `false`)
- **`dialog-button-role`** (*in* *enum [`DialogButtonRole`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#dialogbuttonrole)*): Specify that this is a button in a `Dialog`.
- **`opacity`** (*in* *float*): A value between 0 and 1 (or a percentage) that is used to draw the element and its children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. (default value: 1)
- **`visible`** (*in* *bool*): When set to `false`, the element and all his children won’t be drawn and not react to mouse input (default value: `true`)
### Accessibility[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#accessibility "Permalink to this heading")
Use the following `accessible-` properties to make your items interact well with software like screen readers, braille terminals and other software to make your application accessible.
- **`accessible-role`** (*in* *enum [`AccessibleRole`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#accessiblerole)*): The role of the element. This property is mandatory to be able to use any other accessible properties. It should be set to a constant value. (default value: `none` for most elements, but `text` for the Text element)
- **`accessible-checkable`** (*in* *bool*): Whether the element is can be checked or not.
- **`accessible-checked`** (*in* *bool*): Whether the element is checked or not. This maps to the “checked” state of checkboxes, radio buttons, and other widgets.
- **`accessible-description`** (*in* *string*): The description for the current element.
- **`accessible-has-focus`** (*in* *bool*): Set to true when the current element currently has the focus.
- **`accessible-label`** (*in* *string*): The label for an interactive element. (default value: empty for most elements, or the value of the `text` property for Text elements)
- **`accessible-value-maximum`** (*in* *float*): The maximum value of the item. This is used for example by spin boxes.
- **`accessible-value-minimum`** (*in* *float*): The minimum value of the item.
- **`accessible-value-step`** (*in* *float*) The smallest increment or decrement by which the current value can change. This corresponds to the step by which a handle on a slider can be dragged.
- **`accessible-value`** (*in* *string*): The current value of the item.
### Drop Shadows[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#drop-shadows "Permalink to this heading")
To achieve the graphical effect of a visually elevated shape that shows a shadow effect underneath the frame of an element, it’s possible to set the following `drop-shadow` properties:
- **`drop-shadow-blur`** (*in* *length*): The radius of the shadow that also describes the level of blur applied to the shadow. Negative values are ignored and zero means no blur. (default value: 0)
- **`drop-shadow-color`** (*in* *color*): The base color of the shadow to use. Typically that color is the starting color of a gradient that fades into transparency.
- **`drop-shadow-offset-x`** and **`drop-shadow-offset-y`** (*in* *length*): The horizontal and vertical distance of the shadow from the element’s frame. A negative value places the shadow left / above of the element.
The `drop-shadow` effect is supported for `Rectangle` elements.
## `Dialog`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#dialog "Permalink to this heading")
Dialog is like a window, but it has buttons that are automatically laid out.
A Dialog should have one main element as child, that isn’t a button. The dialog can have any number of `StandardButton` widgets or other buttons with the `dialog-button-role` property. The buttons will be placed in an order that depends on the target platform at run-time.
The `kind` property of the `StandardButton`s and the `dialog-button-role` properties need to be set to a constant value, it can’t be an arbitrary variable expression. There can’t be several `StandardButton`s of the same kind.
A callback `<kind>_clicked` is automatically added for each `StandardButton` which doesn’t have an explicit callback handler, so it can be handled from the native code: For example if there is a button of kind `cancel`, a `cancel_clicked` callback will be added.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#properties "Permalink to this heading")
- **`icon`** (*in* *image*): The window icon shown in the title bar or the task bar on window managers supporting it.
- **`title`** (*in* *string*): The window title that is shown in the title bar.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#example "Permalink to this heading")
```
import { StandardButton, Button } from "std-widgets.slint";
export component Example inherits Dialog {
Text {
text: "This is a dialog box";
}
StandardButton { kind: ok; }
StandardButton { kind: cancel; }
Button {
text: "More Info";
dialog-button-role: action;
}
}
```
## `Flickable`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#flickable "Permalink to this heading")
The `Flickable` is a low-level element that is the base for scrollable widgets, such as the [`ScrollView`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/widgets.html#scrollview). When the `viewport-width` or the `viewport-height` is greater than the parent’s `width` or `height` respectively, the element becomes scrollable. Note that the `Flickable` doesn’t create a scrollbar. When unset, the `viewport-width` and `viewport-height` are calculated automatically based on the `Flickable`’s children. This isn’t the case when using a `for` loop to populate the elements. This is a bug tracked in issue [#407]((https://github.com/slint-ui/slint/issues/407). The maximum and preferred size of the `Flickable` are based on the viewport.
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id1 "Permalink to this heading")
- **`interactive`** (*in* *bool*): When true, the viewport can be scrolled by clicking on it and dragging it with the cursor. (default value: true)
- **`viewport-height`**, **`viewport-width`** (*in* *length*): The total size of the scrollable element.
- **`viewport-x`**, **`viewport-y`** (*in* *length*): The position of the scrollable element relative to the `Flickable`. This is usually a negative value.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id2 "Permalink to this heading")
```
export component Example inherits Window {
width: 270px;
height: 100px;
Flickable {
viewport-height: 300px;
Text {
x:0;
y: 150px;
text: "This is some text that you have to scroll to see";
}
}
}
```
## `FocusScope`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#focusscope "Permalink to this heading")
The `FocusScope` exposes callbacks to intercept key events. Note that `FocusScope` will only invoke them when it `has-focus`.
The [`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent) has a text property, which is a character of the key entered. When a non-printable key is pressed, the character will be either a control character, or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the [`Key`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/namespaces.html#key) namespace
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id3 "Permalink to this heading")
- **`has-focus`** (*out* *bool*): Is `true` when the element has keyboard focus.
### Functions[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#functions "Permalink to this heading")
- **`focus()`**  Call this function to transfer keyboard focus to this `FocusScope`, to receive future [`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent)s.
### Callbacks[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#callbacks "Permalink to this heading")
- **`key-pressed(`*[`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent)*`) -> `[`EventResult`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#eventresult)**: Invoked when a key is pressed, the argument is a [`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent) struct.
- **`key-released(`*[`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent)*`) -> `[`EventResult`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#eventresult)**: Invoked when a key is released, the argument is a [`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent) struct.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id4 "Permalink to this heading")
```
export component Example inherits Window {
width: 100px;
height: 100px;
forward-focus: my-key-handler;
my-key-handler := FocusScope {
key-pressed(event) => {
debug(event.text);
if (event.modifiers.control) {
debug("control was pressed during this event");
}
if (event.text == Key.Escape) {
debug("Esc key was pressed")
}
accept
}
}
}
```
## `GridLayout`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#gridlayout "Permalink to this heading")
`GridLayout` places its children in a grid. `GridLayout` adds properties to each child: `col`, `row`, `colspan`, `rowspan`. You can control the position of children with `col` and `row`. If `col` or `row` aren’t specified, they are automatically computed such that the item is next to the previous item, in the same row. Alternatively, the item can be put in a `Row` element.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id5 "Permalink to this heading")
- **`spacing`** (*in* *length*): The distance between the elements in the layout.
- **`padding`** (*in* *length*): The padding within the layout.
- **`padding-left`**, **`padding-right`**, **`padding-top`** and **`padding-bottom`** (*in* *length*): Set these properties to override the padding on specific sides.
### Examples[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#examples "Permalink to this heading")
This example uses the `Row` element:
```
export component Foo inherits Window {
width: 200px;
height: 200px;
GridLayout {
spacing: 5px;
Row {
Rectangle { background: red; }
Rectangle { background: blue; }
}
Row {
Rectangle { background: yellow; }
Rectangle { background: green; }
}
}
}
```
This example uses the `col` and `row` properties
```
export component Foo inherits Window {
width: 200px;
height: 150px;
GridLayout {
Rectangle { background: red; }
Rectangle { background: blue; }
Rectangle { background: yellow; row: 1; }
Rectangle { background: green; }
Rectangle { background: black; col: 2; row: 0; }
}
}
```
## `Image`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#image "Permalink to this heading")
An `Image` can be used to represent an image loaded from a file.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id6 "Permalink to this heading")
- **`colorize`** (*in* *brush*): When set, the image is used as an alpha mask and is drawn in the given color (or with the gradient).
- **`image-fit`** (*in* *enum [`ImageFit`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#imagefit)*): Specifies how the source image shall be fit into the image element. (default value: `contain` when the `Image` element is part of a layout, `fill` otherwise)
- **`image-rendering`** (*in* *enum [`ImageRendering`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#imagerendering)*): Specifies how the source image will be scaled. (default value: `smooth`)
- **`rotation-angle`** (*in* *angle*), **`rotation-origin-x`** (*in* *length*), **`rotation-origin-y`** (*in* *length*): Rotates the image by the given angle around the specified origin point. The default origin point is the center of the element. When these properties are set, the `Image` can’t have children.
- **`source`** (*in* *image*): The image to load. Use the `@image-url("...")` macro to specify the location of the image.
- **`source-clip-x`**, **`source-clip-y`**, **`source-clip-width`**, **`source-clip-height`** (*in* *int*): Properties in source image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:
| Property | Default Binding |
| -------------------- | ------------------------------- |
| `source-clip-x` | `0` |
| `source-clip-y` | `0` |
| `source-clip-width` | `source.width - source-clip-x` |
| `source-clip-height` | `source.height - source-clip-y` |
- **`width`**, **`height`** (*in* *length*): The width and height of the image as it appears on the screen.The default values are the sizes provided by the **`source`** image. If the `Image` is **not** in a layout and only **one** of the two sizes are specified, then the other defaults to the specified value scaled according to the aspect ratio of the **`source`** image.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id7 "Permalink to this heading")
```
export component Example inherits Window {
width: 100px;
height: 100px;
VerticalLayout {
Image {
source: @image-url("https://slint-ui.com/logo/slint-logo-full-light.svg");
// image-fit default is `contain` when in layout, preserving aspect ratio
}
Image {
source: @image-url("https://slint-ui.com/logo/slint-logo-full-light.svg");
colorize: red;
}
}
}
```
Scaled while preserving the aspect ratio:
```
export component Example inherits Window {
width: 100px;
height: 150px;
VerticalLayout {
Image {
source: @image-url("https://slint-ui.com/logo/slint-logo-full-light.svg");
width: 100px;
// implicit default, preserving aspect ratio:
// height: self.width * natural_height / natural_width;
}
}
}
```
## `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#path "Permalink to this heading")
The `Path` element allows rendering a generic shape, composed of different geometric commands. A path shape can be filled and outlined.
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
A path can be defined in two different ways:
- Using SVG path commands as a string
- Using path command elements in `.slint` markup.
The coordinates used in the geometric commands are within the imaginary coordinate system of the path. When rendering on the screen, the shape is drawn relative to the `x` and `y` properties. If the `width` and `height` properties are non-zero, then the entire shape is fit into these bounds - by scaling accordingly.
### Common Path Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#common-path-properties "Permalink to this heading")
- **`fill`** (*in* *brush*): The color for filling the shape of the path.
- **`fill-rule`** (*in* *enum [`FillRule`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#fillrule)*): The fill rule to use for the path. (default value: `nonzero`)
- **`stroke`** (*in* *brush*): The color for drawing the outline of the path.
- **`stroke-width`** (*in* *length*): The width of the outline.
- **`width`** (*in* *length*): If non-zero, the path will be scaled to fit into the specified width.
- **`height`** (*in* *length*): If non-zero, the path will be scaled to fit into the specified height.
- **`viewbox-x`**/**`viewbox-y`**/**`viewbox-width`**/**`viewbox-height`** (*in* *float*) These four properties allow defining the position and size of the viewport of the path in path coordinates.
If the `viewbox-width` or `viewbox-height` is less or equal than zero, the viewbox properties are ignored and instead the bounding rectangle of all path elements is used to define the view port.
- **`clip`** (*in* *bool*): By default, when a path has a view box defined and the elements render outside of it, they are still rendered. When this property is set to `true`, then rendering will be clipped at the boundaries of the view box. This property must be a literal `true` or `false` (default value: `false`)
#### Path Using SVG commands[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#path-using-svg-commands "Permalink to this heading")
SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG paths are composed using [commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands), which in turn are written in a string. In `.slint` the path commands are provided to the `commands` property. The following example renders a shape consists of an arc and a rectangle, composed of `line-to`, `move-to` and `arc` commands:
```
export component Example inherits Path {
width: 100px;
height: 100px;
commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
stroke: red;
stroke-width: 1px;
}
```
The commands are provided in a property:
- **`commands`** (*in* *string*): A string providing the commands according to the SVG path specification.
#### Path Using SVG Path Elements[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#path-using-svg-path-elements "Permalink to this heading")
The shape of the path can also be described using elements that resemble the SVG path commands but use the `.slint` markup syntax. The earlier example using SVG commands can also be written like that:
```
export component Example inherits Path {
width: 100px;
height: 100px;
stroke: blue;
stroke-width: 1px;
MoveTo {
x: 0;
y: 0;
}
LineTo {
x: 0;
y: 100;
}
ArcTo {
radius-x: 1;
radius-y: 1;
x: 100;
y: 100;
}
LineTo {
x: 100;
y: 0;
}
Close {
}
}
```
Note how the coordinates of the path elements don’t use units - they operate within the imaginary coordinate system of the scalable path.
##### `MoveTo` Sub-element for `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#moveto-sub-element-for-path "Permalink to this heading")
The `MoveTo` sub-element closes the current sub-path, if present, and moves the current point to the location specified by the `x` and `y` properties. Subsequent elements such as `LineTo` will use this new position as their starting point, therefore this starts a new sub-path.
###### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id8 "Permalink to this heading")
- **`x`** (*in* *float*): The x position of the new current point.
- **`y`** (*in* *float*): The y position of the new current point.
##### `LineTo` Sub-element for `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#lineto-sub-element-for-path "Permalink to this heading")
The `LineTo` sub-element describes a line from the path’s current position to the location specified by the `x` and `y` properties.
###### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id9 "Permalink to this heading")
- **`x`** (*in* *float*): The target x position of the line.
- **`y`** (*in* *float*): The target y position of the line.
##### `ArcTo` Sub-element for `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#arcto-sub-element-for-path "Permalink to this heading")
The `ArcTo` sub-element describes the portion of an ellipse. The arc is drawn from the path’s current position to the location specified by the `x` and `y` properties. The remaining properties are modelled after the SVG specification and allow tuning visual features such as the direction or angle.
###### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id10 "Permalink to this heading")
- **`large-arc`** (*in* *bool*): Out of the two arcs of a closed ellipse, this flag selects that the larger arc is to be rendered. If the property is `false`, the shorter arc is rendered instead.
- **`radius-x`** (*in* *float*): The x-radius of the ellipse.
- **`radius-y`** (*in* *float*): The y-radius of the ellipse.
- **`sweep`** (*in* *bool*): If the property is `true`, the arc will be drawn as a clockwise turning arc; anti-clockwise otherwise.
- **`x-rotation`** (*in* *float*): The x-axis of the ellipse will be rotated by the value of this properties, specified in as angle in degrees from 0 to 360.
- **`x`** (*in* *float*): The target x position of the line.
- **`y`** (*in* *float*): The target y position of the line.
##### `CubicTo` Sub-element for `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#cubicto-sub-element-for-path "Permalink to this heading")
The `CubicTo` sub-element describes a smooth Bézier from the path’s current position to the location specified by the `x` and `y` properties, using two control points specified by their respective properties.
###### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id11 "Permalink to this heading")
- **`control-1-x`** (*in* *float*): The x coordinate of the curve’s first control point.
- **`control-1-y`** (*in* *float*): The y coordinate of the curve’s first control point.
- **`control-2-x`** (*in* *float*): The x coordinate of the curve’s second control point.
- **`control-2-y`** (*in* *float*): The y coordinate of the curve’s second control point.
- **`x`** (*in* *float*): The target x position of the curve.
- **`y`** (*in* *float*): The target y position of the curve.
##### `QuadraticTo` Sub-element for `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#quadraticto-sub-element-for-path "Permalink to this heading")
The `QuadraticTo` sub-element describes a smooth Bézier from the path’s current position to the location specified by the `x` and `y` properties, using the control points specified by the `control-x` and `control-y` properties.
###### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id12 "Permalink to this heading")
- **`control-x`** (*in* *float*): The x coordinate of the curve’s control point.
- **`control-y`** (*in* *float*): The y coordinate of the curve’s control point.
- **`x`** (*in* *float*): The target x position of the curve.
- **`y`** (*in* *float*): The target y position of the curve.
##### `Close` Sub-element for `Path`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#close-sub-element-for-path "Permalink to this heading")
The `Close` element closes the current sub-path and draws a straight line from the current position to the beginning of the path.
## `PopupWindow`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#popupwindow "Permalink to this heading")
Use this element to show a popup window like a tooltip or a popup menu.
Note: It isn’t allowed to access properties of elements within the popup from outside of the `PopupWindow`.
### Functions[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id13 "Permalink to this heading")
- **`show()`**  Show the popup on the screen.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id14 "Permalink to this heading")
```
export component Example inherits Window {
width: 100px;
height: 100px;
popup := PopupWindow {
Rectangle { height:100%; width: 100%; background: yellow; }
x: 20px; y: 20px; height: 50px; width: 50px;
}
TouchArea {
height:100%; width: 100%;
clicked => { popup.show(); }
}
}
```
## `Rectangle`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#rectangle "Permalink to this heading")
By default, a `Rectangle` is just an empty item that shows nothing. By setting a color or configuring a border, it’s then possible to draw a rectangle on the screen.
When not part of a layout, its width and height default to 100% of the parent element.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id15 "Permalink to this heading")
- **`background`** (*in* *brush*): The background brush of this `Rectangle`, typically a color. (default value: `transparent`)
- **`border-color`** (*in* *brush*): The color of the border. (default value: `transparent`)
- **`border-radius`** (*in* *length*): The size of the radius. (default value: 0)
- **`border-width`** (*in* *length*): The width of the border. (default value: 0)
- **`clip`** (*in* *bool*): By default, when an element is bigger or outside another element, it’s still shown. When this property is set to `true`, the children of this `Rectangle` are clipped to the border of the rectangle. (default value: `false`)
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id16 "Permalink to this heading")
```
export component Example inherits Window {
width: 270px;
height: 100px;
Rectangle {
x: 10px;
y: 10px;
width: 50px;
height: 50px;
background: blue;
}
// Rectangle with a border
Rectangle {
x: 70px;
y: 10px;
width: 50px;
height: 50px;
background: green;
border-width: 2px;
border-color: red;
}
// Transparent Rectangle with a border and a radius
Rectangle {
x: 140px;
y: 10px;
width: 50px;
height: 50px;
border-width: 4px;
border-color: black;
border-radius: 10px;
}
// A radius of width/2 makes it a circle
Rectangle {
x: 210px;
y: 10px;
width: 50px;
height: 50px;
background: yellow;
border-width: 2px;
border-color: blue;
border-radius: self.width/2;
}
}
```
## `TextInput`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#textinput "Permalink to this heading")
The `TextInput` is a lower-level item that shows text and allows entering text.
When not part of a layout, its width or height defaults to 100% of the parent element when not specified.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id17 "Permalink to this heading")
- **`color`** (*in* *brush*): The color of the text (default value: depends on the style)
- **`font-family`** (*in* *string*): The name of the font family selected for rendering the text.
- **`font-size`** (*in* *length*): The font size of the text.
- **`font-weight`** (*in* *int*): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
- **`has-focus`** (*out* *bool*): `TextInput` sets this to `true` when it’s focused. Only then it receives [`KeyEvent`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#keyevent)s.
- **`horizontal-alignment`** (*in* *enum [`TextHorizontalAlignment`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#texthorizontalalignment)*): The horizontal alignment of the text.
- **`input-type`** (*in* *enum [`InputType`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#inputtype)*): Use this to configure `TextInput` for editing special input, such as password fields. (default value: `text`)
- **`letter-spacing`** (*in* *length*): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)
- **`read-only`** (*in* *bool*): When set to `true`, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programatically. (default value: `false`)
- **`selection-background-color`** (*in* *color*): The background color of the selection.
- **`selection-foreground-color`** (*in* *color*): The foreground color of the selection.
- **`single-line`** (*in* *bool*): When set to `true`, the text is always rendered as a single line, regardless of new line separators in the text. (default value: `true`)
- **`text-cursor-width`** (*in* *length*): The width of the text cursor. (default value: provided at run-time by the selected widget style)
- **`text`** (*in-out* *string*): The text rendered and editable by the user.
- **`vertical-alignment`** (*in* *enum [`TextVerticalAlignment`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textverticalalignment)*): The vertical alignment of the text.
- **`wrap`** (*in* *enum [`TextWrap`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textwrap)*): The way the text input wraps. Only makes sense when `single-line` is false. (default value: no-wrap)
### Functions[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id18 "Permalink to this heading")
- **`focus()`**  Call this function to focus the text input and make it receive future keyboard events.
### Callbacks[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id19 "Permalink to this heading")
- **`accepted()`** : Invoked when enter key is pressed.
- **`cursor-position-changed(`[*`Point`*](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#point)`)`** : The cursor was moved to the new (x, y) position.
- **`edited()`** : Invoked when the text has changed because the user modified it.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id20 "Permalink to this heading")
```
export component Example inherits Window {
width: 270px;
height: 100px;
TextInput {
text: "Replace me with a name";
}
}
```
## `Text`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#text "Permalink to this heading")
The `Text` element is responsible for rendering text. Besides the `text` property, that specifies which text to render, it also allows configuring different visual aspects through the `font-family`, `font-size`, `font-weight` and `color` properties.
The `Text` element can break long text into multiple lines of text. A line feed character (`\n`) in the string of the `text` property will trigger a manual line break. For automatic line breaking you need to set the `wrap` property to a value other than `no-wrap`, and it’s important to specify a `width` and `height` for the `Text` element, in order to know where to break. It’s recommended to place the `Text` element in a layout and let it set the `width` and `height` based on the available screen space and the text itself.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id21 "Permalink to this heading")
- **`color`** (*in* *brush*): The color of the text. (default value: depends on the style)
- **`font-family`** (*in* *string*): The name of the font family selected for rendering the text.
- **`font-size`** (*in* *length*): The font size of the text.
- **`font-weight`** (*in* *int*): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
- **`horizontal-alignment`** (*in* *enum [`TextHorizontalAlignment`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#texthorizontalalignment)*): The horizontal alignment of the text.
- **`letter-spacing`** (*in* *length*): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)
- **`overflow`** (*in* *enum [`TextOverflow`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textoverflow)*): What happens when the text overflows (default value: clip).
- **`text`** (*in* *[string](https://slint.dev/releases/1.0.0/docs/slint/src/reference/types.html#strings)*): The text rendered.
- **`vertical-alignment`** (*in* *enum [`TextVerticalAlignment`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textverticalalignment)*): The vertical alignment of the text.
- **`wrap`** (*in* *enum [`TextWrap`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#textwrap)*): The way the text wraps (default value: `no-wrap`).
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id22 "Permalink to this heading")
This example shows the text “Hello World” in red, using the default font:
```
export component Example inherits Window {
width: 270px;
height: 100px;
Text {
x:0;y:0;
text: "Hello World";
color: red;
}
}
```
This example breaks a longer paragraph of text into multiple lines, by setting a `wrap` policy and assigning a limited `width` and enough `height` for the text to flow down:
```
export component Example inherits Window {
width: 270px;
height: 300px;
Text {
x:0;
text: "This paragraph breaks into multiple lines of text";
wrap: word-wrap;
width: 150px;
height: 100%;
}
}
```
## `TouchArea`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#toucharea "Permalink to this heading")
Use `TouchArea` to control what happens when the region it covers is touched or interacted with using the mouse.
When not part of a layout, its width or height default to 100% of the parent element.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id23 "Permalink to this heading")
- **`has-hover`** (*out* *bool*): `TouchArea` sets this to `true` when the mouse is over it.
- **`mouse-cursor`** (*in* *enum [`MouseCursor`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#mousecursor)*): The mouse cursor type when the mouse is hovering the `TouchArea`.
- **`mouse-x`**, **`mouse-y`** (*out* *length*): Set by the `TouchArea` to the position of the mouse within it.
- **`pressed-x`**, **`pressed-y`** (*out* *length*): Set by the `TouchArea` to the position of the mouse at the moment it was last pressed.
- **`pressed`** (*out* *bool*): Set to `true` by the `TouchArea` when the mouse is pressed over it.
### Callbacks[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id24 "Permalink to this heading")
- **`clicked()`** : Invoked when clicked: The mouse is pressed, then released on this element.
- **`moved()`** : The mouse has been moved. This will only be called if the mouse is also pressed.
- **`pointer-event(`[*`PointerEvent`*](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/structs.html#pointerevent)`)`** : Invoked when a button was pressed or released.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id25 "Permalink to this heading")
```
export component Example inherits Window {
width: 200px;
height: 100px;
area := TouchArea {
width: parent.width;
height: parent.height;
clicked => {
rect2.background = #ff0;
}
}
Rectangle {
x:0;
width: parent.width / 2;
height: parent.height;
background: area.pressed ? blue: red;
}
rect2 := Rectangle {
x: parent.width / 2;
width: parent.width / 2;
height: parent.height;
}
}
```
## `VerticalLayout` and `HorizontalLayout`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#verticallayout-and-horizontallayout "Permalink to this heading")
These layouts place their children next to each other vertically or horizontally. The size of elements can either be fixed with the `width` or `height` property, or if they aren’t set they will be computed by the layout respecting the minimum and maximum sizes and the stretch factor.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id26 "Permalink to this heading")
- **`spacing`** (*in* *length*): The distance between the elements in the layout.
- **`padding`** (*in* *length*): the padding within the layout.
- **`padding-left`**, **`padding-right`**, **`padding-top`** and **`padding-bottom`** (*in* *length*): Set these properties to override the padding on specific sides.
- **`alignment`** (*in* *enum [`LayoutAlignment`](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/enums.html#layoutalignment)*): Set the alignment. Matches the CSS flex box.
### Example[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id27 "Permalink to this heading")
```
export component Foo inherits Window {
width: 200px;
height: 100px;
HorizontalLayout {
spacing: 5px;
Rectangle { background: red; width: 10px; }
Rectangle { background: blue; min-width: 10px; }
Rectangle { background: yellow; horizontal-stretch: 1; }
Rectangle { background: green; horizontal-stretch: 2; }
}
}
```
## `Window`[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#window "Permalink to this heading")
`Window` is the root of the tree of elements that are visible on the screen.
The `Window` geometry will be restricted by its layout constraints: Setting the `width` will result in a fixed width, and the window manager will respect the `min-width` and `max-width` so the window can’t be resized bigger or smaller. The initial width can be controlled with the `preferred-width` property. The same applies to the `Window`s height.
### Properties[](https://slint.dev/releases/1.0.0/docs/slint/src/builtins/elements#id28 "Permalink to this heading")
- **`background`** (*in* *brush*): The background brush of the `Window`. (default value: depends on the style)
- **`default-font-family`** (*in* *string*): The font family to use as default in text elements inside this window, that don’t have their `font-family` property set.
- **`default-font-size`** (*in-out* *length*): The font size to use as default in text elements inside this window, that don’t have their `font-size` property set. The value of this property also forms the basis for relative font sizes.
- **`default-font-weight`** (*in* *int*): The font weight to use as default in text elements inside this window, that don’t have their `font-weight` property set. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
- **`icon`** (*in* *image*): The window icon shown in the title bar or the task bar on window managers supporting it.
- **`no-frame`** (*in* *bool*): Whether the window should be borderless/frameless or not.
- **`title`** (*in* *string*): The window title that is shown in the title bar.
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../../posts/rust/corporate_network_install_rust_on_windows.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="../../posts/rust/rust_implement_a_crate_for_encode_and_decode_brainfuck_and_ook.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../../posts/rust/corporate_network_install_rust_on_windows.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<script>
window.playground_line_numbers = true;
</script>
<script>
window.playground_copyable = true;
</script>
<script src="../../ace.js"></script>
<script src="../../editor.js"></script>
<script src="../../mode-rust.js"></script>
<script src="../../theme-dawn.js"></script>
<script src="../../theme-tomorrow_night.js"></script>
<script src="../../elasticlunr.min.js"></script>
<script src="../../mark.min.js"></script>
<script src="../../searcher.js"></script>
<script src="../../clipboard.min.js"></script>
<script src="../../highlight.js"></script>
<script src="../../book.js"></script>
<!-- Custom JS scripts -->
<script src="../../src/js/custom.js"></script>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink