Git Product home page Git Product logo

web-components's Introduction

Vaadin logo

Vaadin web components

Vaadin components is an evolving set of high-quality web components for business web applications.

Build Follow on Twitter Discord

Installation

Install the components that you need from npm:

npm install @vaadin/grid

Usage

Live demo →

Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vaadin example</title>
  </head>
  <body>
    <!-- Use web components in your HTML like regular built-in elements. -->
    <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
      <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
      <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column>
      <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column>
      <vaadin-grid-column width="9em" path="address.city"></vaadin-grid-column>
    </vaadin-grid>

    <!-- Vaadin web components use standard JavaScript modules. -->
    <script type="module">
      // Importing the following modules registers <vaadin-grid> and its column
      // elements so that you can use them in this page.
      import '@vaadin/grid/vaadin-grid.js';
      import '@vaadin/grid/vaadin-grid-selection-column.js';
      import '@vaadin/grid/vaadin-grid-sort-column.js';

      // Use component's properties to populate data.
      const grid = document.querySelector('vaadin-grid');
      fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
        .then((res) => res.json())
        .then((json) => (grid.items = json.result));
    </script>
  </body>
</html>

Serve your HTML with a development server that supports bare module specifiers, such as @web/dev-server:

npm i -g @web/dev-server
web-dev-server --node-resolve --open

Components

This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions.

Core Components

The components below are licensed under the Apache License 2.0.

Component npm version (latest) npm version (next) Issues
<vaadin-accordion> npm version npm version Issues
<vaadin-app-layout> npm version npm version Issues
<vaadin-avatar> npm version npm version Issues
<vaadin-avatar-group> npm version npm version Issues
<vaadin-button> npm version npm version Issues
<vaadin-checkbox> npm version npm version Issues
<vaadin-checkbox-group> npm version npm version Issues
<vaadin-combo-box> npm version npm version Issues
<vaadin-confirm-dialog> npm version npm version Issues
<vaadin-context-menu> npm version npm version Issues
<vaadin-custom-field> npm version npm version Issues
<vaadin-date-picker> npm version npm version Issues
<vaadin-date-time-picker> npm version npm version Issues
<vaadin-details> npm version npm version Issues
<vaadin-dialog> npm version npm version Issues
<vaadin-email-field> npm version npm version Issues
<vaadin-form-layout> npm version npm version Issues
<vaadin-grid> npm version npm version Issues
<vaadin-horizontal-layout> npm version npm version Issues
<vaadin-icon> npm version npm version Issues
<vaadin-icons> npm version npm version Issues
<vaadin-integer-field> npm version npm version Issues
<vaadin-item> npm version npm version Issues
<vaadin-list-box> npm version npm version Issues
<vaadin-login> npm version npm version Issues
<vaadin-menu-bar> npm version npm version Issues
<vaadin-message-input> npm version npm version Issues
<vaadin-message-list> npm version npm version Issues
<vaadin-multi-select-combo-box> npm version npm version Issues
<vaadin-notification> npm version npm version Issues
<vaadin-number-field> npm version npm version Issues
<vaadin-password-field> npm version npm version Issues
<vaadin-progress-bar> npm version npm version Issues
<vaadin-radio-group> npm version npm version Issues
<vaadin-scroller> npm version npm version Issues
<vaadin-select> npm version npm version Issues
<vaadin-side-nav> npm version npm version Issues
<vaadin-split-layout> npm version npm version Issues
<vaadin-tabs> npm version npm version Issues
<vaadin-tabsheet> npm version npm version Issues
<vaadin-text-area> npm version npm version Issues
<vaadin-text-field> npm version npm version Issues
<vaadin-time-picker> npm version npm version Issues
<vaadin-tooltip> npm version npm version Issues
<vaadin-upload> npm version npm version Issues
<vaadin-virtual-list> npm version npm version Issues

Pro Components

The components below are licensed under Vaadin Commercial License and Service Terms and available as part of the Vaadin Pro Subscription.

Component npm version (latest) npm version (next) Issues
<vaadin-board> npm version npm version Issues
<vaadin-charts> npm version npm version Issues
<vaadin-cookie-consent> npm version npm version Issues
<vaadin-crud> npm version npm version Issues
<vaadin-grid-pro> npm version npm version Issues
<vaadin-map> npm version npm version Issues
<vaadin-rich-text-editor> npm version npm version Issues

Browser support

Desktop:

  • Chrome (evergreen)
  • Firefox (evergreen)
  • Safari 15 or newer
  • Edge (Chromium, evergreen)

Mobile:

  • Chrome (evergreen) for Android (4.4 or newer)
  • Safari for iOS (15 or newer)

Documentation

Check out our design system documentation.

Examples

Are you looking for an example project to get started? Visit start.vaadin.com to create a Vaadin app.

Questions

For help and support questions, please use our community chat.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

Development

See the Development guide for how to set up and develop this project locally.

LICENSE

For specific package(s), check the LICENSE file under the package folder.

web-components's People

Contributors

web-padawan avatar tomivirkki avatar manolo avatar limonte avatar yuriy-fix avatar saulis avatar platosha avatar jouni avatar vursen avatar alvarezguille avatar diegocardoso avatar tehapo avatar haprog avatar samiheikki avatar vaadin-bot avatar sissbruecker avatar h00k00 avatar vicsstar avatar artur- avatar pekam avatar sosa-vaadin avatar oluwasayo avatar sohrabtaee avatar rogozinds avatar ripla avatar ugur-vaadin avatar jarski avatar peppe avatar shadikhani avatar dependabot[bot] avatar

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.