mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 02:39:28 +00:00
316 lines
17 KiB
HTML
316 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
<meta name="author" content="SixtyFPS GmbH" />
|
||
|
||
<!--====== Favicon Icon ======-->
|
||
<link rel="shortcut icon" href="https://slint.dev/assets/img/favicon.ico">
|
||
<link rel="icon" type="image/x-icon" href="https://slint.dev/assets/img/favicon.svg">
|
||
|
||
<!-- ===== All CSS files ===== -->
|
||
<link rel="stylesheet" href="https://slint.dev/assets/css/style.css?v=1.11.14" />
|
||
|
||
<!-- ===== Header from individual pages ===== -->
|
||
|
||
<title>Slint Developer Documentation</title>
|
||
<meta name="description" content="The developer documentation page of Slint." />
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<script>
|
||
/* Check if dark theme is selected */
|
||
if (localStorage.getItem('theme') === 'dark') {
|
||
document.documentElement.classList.add('dark');
|
||
}
|
||
else if (localStorage.getItem('theme') === 'light') {
|
||
document.documentElement.classList.add('light');
|
||
}
|
||
</script>
|
||
|
||
<div class="wrap">
|
||
<!-- ====== Header Start ====== -->
|
||
<header class="top">
|
||
<div class="header-wrap">
|
||
|
||
<a href="https://slint.dev/index.html" class="logo">Slint</a>
|
||
|
||
<nav class="main-navi">
|
||
|
||
<ul>
|
||
<li id="use-cases"><a href="https://slint.dev/use-cases.html">Use Cases</a></li>
|
||
<li id="pricing"><a href="https://slint.dev/pricing.html">Pricing</a></li>
|
||
<li id="blog"><a href="https://slint.dev/blog">Blog</a></li>
|
||
<li id="docs"><a href="https://slint.dev/docs.html">Docs</a></li>
|
||
<li class="navi-item-has-children" id="resources"><a href="#">Resources</a>
|
||
<ul>
|
||
<li id="demos"><a href="https://slint.dev/demos.html">Demos</a></li>
|
||
<li id="partners"><a href="https://slint.dev/partners.html">Partners</a></li>
|
||
<li id="community"><a href="https://slint.dev/community.html">Community</a></li>
|
||
<li id="success"><a href="https://slint.dev/success">Success Stories</a></li>
|
||
<li id="supported-boards"><a href="https://slint.dev/supported-boards.html">Supported Boards</a></li>
|
||
</ul>
|
||
</li>
|
||
<!-- <li class="search"><a href="/search-results.html">Search</a></li> -->
|
||
<li class="theme theme-light"><a href="#">Theme</a></li>
|
||
<li class="btn"><a href="https://slint.dev/get-started.html">Get Started</a></li>
|
||
</ul>
|
||
|
||
</nav>
|
||
|
||
<!-- <a href="/search-results.html" class="search-mobile">Search</a> -->
|
||
|
||
<button class="hamburger" aria-label="menu" aria-expanded="false" aria-controls="nav">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
|
||
</div><!-- .header-wrap -->
|
||
</header>
|
||
<!-- ====== Header End ====== -->
|
||
|
||
|
||
<main>
|
||
|
||
<!--
|
||
Section blocks on this page:
|
||
- one-column
|
||
-->
|
||
|
||
<script type="text/javascript">
|
||
|
||
async function* makeTextFileLineIterator(fileURL) {
|
||
const utf8Decoder = new TextDecoder("utf-8");
|
||
const response = await fetch(fileURL);
|
||
|
||
if (response.status != 200)
|
||
return null;
|
||
|
||
const reader = response.body.getReader();
|
||
let { value: chunk, done: readerDone } = await reader.read();
|
||
chunk = chunk ? utf8Decoder.decode(chunk) : "";
|
||
|
||
const newline = /\r?\n/gm;
|
||
let startIndex = 0;
|
||
let result;
|
||
|
||
while (true) {
|
||
const result = newline.exec(chunk);
|
||
if (!result) {
|
||
if (readerDone) break;
|
||
const remainder = chunk.substr(startIndex);
|
||
({ value: chunk, done: readerDone } = await reader.read());
|
||
chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
|
||
startIndex = newline.lastIndex = 0;
|
||
continue;
|
||
}
|
||
yield chunk.substring(startIndex, result.index);
|
||
startIndex = newline.lastIndex;
|
||
}
|
||
|
||
if (startIndex < chunk.length) {
|
||
// Last line didn't end in a newline char
|
||
yield chunk.substr(startIndex);
|
||
}
|
||
}
|
||
|
||
function updateButtonHrefs() {
|
||
const buttons = document.querySelectorAll('a.doc');
|
||
const sel = document.getElementById('version');
|
||
buttons.forEach(button => {
|
||
let prevVersion = button.href.match("/([^/]*/[^/]*)/docs/")[1];
|
||
button.href = button.href.replace(prevVersion, sel.value);
|
||
});
|
||
}
|
||
|
||
async function fetchReadFile(url) {
|
||
const sel = document.getElementById('version');
|
||
for await (const version of makeTextFileLineIterator(url)) {
|
||
const opt = document.createElement("option");
|
||
opt.value = "releases/" + version;
|
||
opt.text = version;
|
||
sel.add(opt)
|
||
}
|
||
if (!sel.length) {
|
||
// add some known version
|
||
const opt = document.createElement("option");
|
||
opt.value = "releases/1.1.1";
|
||
opt.text = "1.1.1";
|
||
sel.add(opt)
|
||
}
|
||
const opt = document.createElement("option");
|
||
opt.value = "snapshots/master";
|
||
opt.text = "development snapshot";
|
||
sel.add(opt);
|
||
|
||
const version = document.location.pathname.match(/releases\/([0-9]*.[0-9]*.[0-9]*)|snapshots\/master|releases\/latest/);
|
||
console.log(version);
|
||
if (version) {
|
||
sel.value = version[0];
|
||
}
|
||
|
||
updateButtonHrefs();
|
||
}
|
||
|
||
window.addEventListener('load', () => {
|
||
fetchReadFile("/releases/versions.txt");
|
||
const sel = document.getElementById('version');
|
||
sel.addEventListener('change', updateButtonHrefs);
|
||
}, false);
|
||
|
||
</script>
|
||
|
||
<section class="one-column">
|
||
<h1>Documentation</h1>
|
||
</section>
|
||
|
||
<section class="select-filters">
|
||
<div class="select-wrap">
|
||
<label for="version">Version</label>
|
||
<select id="version">
|
||
</select>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="four-doc-boxes">
|
||
<div class="col-wrap">
|
||
<div class="col-1">
|
||
<h2>Browse</h2>
|
||
<p>Whether you’re developing the UI or the backend, our documentation will guide you.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-wrap">
|
||
<div class="col-2">
|
||
<div class="price-box">
|
||
<h5>DSL</h5>
|
||
<h4>Slint</h4>
|
||
<p><img src="https://slint.dev/assets/img/slint-favicon.svg"></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/slint/index.html" class="btn doc">Language</a></p>
|
||
</div><!-- .price-box -->
|
||
</div><!-- .col-2 -->
|
||
<div class="col-2">
|
||
<div class="col-wrap">
|
||
<div class="price-box">
|
||
<h5>APIs</h5>
|
||
<h4>Using Rust</h4>
|
||
<p><img src="https://slint.dev/assets/img/rust-logo.svg"></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/rust/slint" class="btn doc">API</a></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/tutorial/rust" class="btn doc">Tutorial</a></p>
|
||
<p><a href="https://youtu.be/WBcv4V-whHk" class="btn" target="_blank">Video Tutorial</a></p>
|
||
<p><a href="https://github.com/slint-ui/slint-rust-template" class="btn" target="_blank">Project Template</a></p>
|
||
</div><!-- .price-box -->
|
||
<div class="price-box">
|
||
<h5>APIs</h5>
|
||
<h4>Using C++</h4>
|
||
<p><img src="https://slint.dev/assets/img/cpp_logo.svg"></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/cpp" class="btn doc">API</a></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/tutorial/cpp" class="btn doc">Tutorial</a></p>
|
||
<p><a href="https://github.com/slint-ui/slint-cpp-template" class="btn" target="_blank">Project Template</a></p>
|
||
</div><!-- .price-box -->
|
||
<div class="price-box">
|
||
<h5>APIs</h5>
|
||
<h4>Using NodeJS (beta)</h4>
|
||
<p><img src="https://slint.dev/assets/img/nodejs_logo.svg"></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/node" class="btn doc">API</a></p>
|
||
<p><a href="https://slint.dev/releases/1.1.1/docs/tutorial/node" class="btn doc">Tutorial</a></p>
|
||
<p><a href="https://github.com/slint-ui/slint-nodejs-template" class="btn" target="_blank">Project Template</a></p>
|
||
</div><!-- .price-box -->
|
||
</div><!-- .col-wrap -->
|
||
</div><!-- .col-2 -->
|
||
</div><!-- .col-wrap -->
|
||
</section>
|
||
|
||
<section class="one-column" style="padding: 50px 0 2em;">
|
||
<p class="cta"><a href="https://slint.dev/contact.html" class="btn blue btn-center">Contact Us</a></p>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
|
||
<!-- ====== Footer Start ====== -->
|
||
<footer>
|
||
<div class="col-wrap">
|
||
<div class="col-6">
|
||
<p><a href="https://slint.dev/index.html"><img src="https://slint.dev/assets/img/slint-logo.svg" alt="Slint" width="141" height="47" class="footer-logo"></a></p>
|
||
<p class="some-links">
|
||
<a href="https://twitter.com/slint_ui" target="_blank"><img src="https://slint.dev/assets/img/icon-twitter.svg" alt="Twitter" width="40" height="40"></a>
|
||
<a href="https://www.linkedin.com/company/slint-ui/" target="_blank"><img src="https://slint.dev/assets/img/icon-linkedin.svg" alt="Linkedin" width="40" height="40"></a>
|
||
<a rel="me" href="https://fosstodon.org/@slint" target="_blank"><img src="https://slint.dev/assets/img/icon-mastodon.svg" alt="Mastodon" width="40" height="40"></a>
|
||
<!-- <a href="https://github.com/slint-ui/slint/discussions" target="_blank"><img src="https://slint.dev/assets/img/icon-github.svg" alt="Github Discussions" width="40" height="40"></a> -->
|
||
<!-- <a href="https://chat.slint.dev/" target="_blank"><img src="https://slint.devassets/img/icon-some.svg" alt="" width="40" height="40"></a> -->
|
||
</p>
|
||
<p><img src="https://slint.dev/assets/img/annual-ross-index.svg" data-darkimg="/assets/img/annual-ross-index-light.svg" data-lightimg="/assets/img/annual-ross-index.svg" alt="Annual Ross index" width="260" height="52" class="annual-ross"></p>
|
||
</div><!-- .col-6 -->
|
||
<div class="col-6">
|
||
<dl>
|
||
<dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">About</dt>
|
||
<dd><a href="https://slint.dev/about-us.html">Us</a></dd>
|
||
<dd><a href="https://slint.dev/investors.html">Investors</a></dd>
|
||
<dd><a href="https://slint.dev/events.html">Events</a></dd>
|
||
<dd><a href="https://slint.dev/careers.html">Careers</a></dd>
|
||
<dd><a href="https://slint.dev/imprint.html">Imprint & Privacy</a></dd>
|
||
</dl>
|
||
</div><!-- .col-6 -->
|
||
<div class="col-6">
|
||
<dl>
|
||
<dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Explore</dt>
|
||
<dd><a href="https://slint.dev/docs.html">Docs</a></dd>
|
||
<dd><a href="https://slint.dev/pricing.html">Pricing</a></dd>
|
||
<dd><a href="https://slint.dev/pricing.html#support">Support</a></dd>
|
||
<dd><a href="https://slint.dev/service-partners.html">Service Partners</a></dd>
|
||
<dd><a href="https://slint.dev/silicon-partners.html">Silicon Partners</a></dd>
|
||
</dl>
|
||
</div><!-- .col-6 -->
|
||
<div class="col-6">
|
||
<dl>
|
||
<dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Resources</dt>
|
||
<dd><a href="https://slint.dev/demos.html">Demos</a></dd>
|
||
<dd><a href="https://slint.dev/videos.html">Videos</a></dd>
|
||
<dd><a href="https://slint.dev/community.html">Community</a></dd>
|
||
<dd><a href="https://slint.dev/supported-boards.html">Supported Boards</a></dd>
|
||
<dd><a href="https://slint.dev/brand-guidelines.html">Brand Guidelines</a></dd>
|
||
</dl>
|
||
</div><!-- .col-6 -->
|
||
<div class="col-6">
|
||
<dl>
|
||
<dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Compare</dt>
|
||
<dd><a href="https://slint.dev/alternative-to-qt.html">Qt</a></dd>
|
||
<dd><a href="https://slint.dev/alternative-to-lvgl.html">LVGL</a></dd>
|
||
<dd><a href="https://slint.dev/alternative-to-flutter.html">Flutter</a></dd>
|
||
<dd><a href="https://slint.dev/alternative-to-electron.html">Electron</a></dd>
|
||
<dd><a href="https://slint.dev/declarative-rust-gui.html">Other Rust GUI Toolkits</a></dd>
|
||
</dl>
|
||
</div><!-- .col-6 -->
|
||
<div class="col-6">
|
||
<dl>
|
||
<dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Contact us</dt>
|
||
<dd><a href="https://slint.dev/meeting.html?event=online">Schedule Meeting</a></dd>
|
||
<dd><a href="mailto:info@slint.dev?subject=Contact%20from%20Website">Email</a></dd>
|
||
<dd><a href="https://chat.slint.dev">Chat</a></dd>
|
||
<dd><a href="https://slint.dev/pricing.html#support">Support</a></dd>
|
||
<dd><a href="https://github.com/slint-ui/slint/" target="_blank">GitHub</a></dd>
|
||
<dd hidden><a href="#">Twitter</a></dd>
|
||
<dd hidden><a href="#">Mastodon</a></dd>
|
||
<dd hidden><a href="#">Linkedin</a></dd>
|
||
</dl>
|
||
</div><!-- .col-6 -->
|
||
</div>
|
||
<div class="col-wrap">
|
||
<div class="col-1">
|
||
<p>Copyright © 2023 SixtyFPS GmbH</p>
|
||
</div><!-- .col-1 -->
|
||
</div>
|
||
</footer>
|
||
<!-- ====== Footer End ====== -->
|
||
</div><!-- .wrap -->
|
||
|
||
<!-- ====== All Javascript Files ====== -->
|
||
<script src="https://slint.dev/assets/js/script.js?ver=1.2.14"></script>
|
||
</body>
|
||
|
||
</html>
|