-
-
Notifications
You must be signed in to change notification settings - Fork 570
Svelte
Jakub T. Jankiewicz edited this page Apr 27, 2023
·
5 revisions
Here is an example code on how to use jQuery Terminal in Svelte:
<script>
import jQuery from 'jquery';
import { onMount } from 'svelte';
import terminal from 'jquery.terminal';
import 'jquery.terminal/css/jquery.terminal.min.css'; // include Terminal CSS
jQuery.noConflict(); // you don't need to use this
terminal(window, jQuery); // jQuery Terminal exports the main function that needs to be called with an instance of jQuery
export let name;
export const termClass = 'term'; // export class name you can also hardcode the class or id in HTML
onMount(() => {
jQuery(($) => {
$(`.${termClass}`).terminal({
echo(...args) {
this.echo(args.join(' '));
}
}, {
checkArity: false
});
});
});
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
<div class="{termClass}"></div>
<style>
.terminal {
width: 600px;
margin: 0 auto;
height: 300px;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
Library for Web-Based Terminal in JavaScript, (jQuery Terminal: git repo)
Copyright (c) 2011-2023 Jakub T. Jankiewicz