Giter VIP home page Giter VIP logo

ui5-webcomponents-sample-svelte's Introduction

UI5-logo

CI REUSE status

UI5 Web Components Sample ToDo App

Sample ToDo application that demonstrates the usage of UI5 Web Components using Svelte

The application showcases how to: bind properties, subscribe to and forward events, and consume UI5 Web Components within Svelte.

Project was initialized uising ViteJs and the svelte-ts tempalte

Requirements

Download and Installation

  1. Clone this repository and navigate to the downloaded directory
    git clone https://github.com/SAP-samples/ui5-webcomponents-sample-svelte.git
    cd ui5-webcomponents-sample-svelte
  2. Install all dependencies
    npm install
  3. Start the local dev server and run the application
    npm run dev

How to obtain support

Create an issue in this repository if you find a bug or have questions about the content.

For additional support, ask a question in SAP Community.

Noteworthy

Consuming UI5 Web Components in Svelte Applications

  • Import the desired component(s) in your app to define the UI5 Web Component.

  • For example, to use ui5-button you need to import it:

    import "@ui5/webcomponents/dist/Button"; // loads ui5-button

    Then, you can use the custom element in an HTML page:

    <ui5-button>Hello world!</ui5-button>

Browser support

Currently Chrome, Safari, Firefox and Edge (Chromium-based) support Web Components natively.

Contributing

If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.

License

Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.

ui5-webcomponents-sample-svelte's People

Contributors

akudev avatar btbernard avatar gmbugua avatar hinzzx avatar ilhan007 avatar mmoudy49 avatar petermuessig avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ui5-webcomponents-sample-svelte's Issues

Svelte does not support two-way-data-binding with custom elements when the property name is value

Hey,

I just read this blog post and saw this repository linked there. Nice to see this movement and progress for ui5 webcomponents.

Good job guys!

I tried to use ui5 webcomponents with svelte two years ago and stumpled on some points.

But all in all it works really nice!

I think probably you should mention some points in README, which are currently not supported.

Such as two way data binding on input-element is not working as expected. See: sveltejs/svelte#4838

<script>
	import "@ui5/webcomponents/dist/Button";
	import "@ui5/webcomponents/dist/Input";
	export let name = world;
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
<h1>Hello {name}!</h1>
<ui5-button>Hello {name}</ui5-button>
<!-- databind implement by myself -->
<ui5-input value={name} on:input={(e) => name = e.target.value}></ui5-input>

<!-- svelte "native" two-way-databinding -->
<!-- comment this out to see the problem-->
<!--<ui5-input bind:value={name}></ui5-input>-->
</main>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.