New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@tradeshift/elements.aside

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tradeshift/elements.aside

0.5.3
Source
npm

Version published: 5 years ago

Weekly downloads: 1

Maintainers: 7

Weekly downloads

Created: 6 years ago

Source

Elements - aside

Part of the reusable Tradeshift UI Components as Web Components. Demo

table { width:100%; }

➤ Properties

Property	Attribute	Type	Default	Description
title	data-title	string	''	Aside header title
visible	data-visible	boolean	false	Show/hide aside

➤ Events

Event Name	Payload	Description
close		Emitted when the user close the aside by clicking on the close button or cover
closed		Emitted when the aside completely closed

➤ Slots

Slot Name	Default	Description
main		Main content of the aside
footer		Footer content and action buttons goes
note		Use it on the `ts-note` in the aside

➤ How to use it

Install the package of aside

$ npm i @tradeshift/elements.aside --save

Import the component

import '@tradeshift/elements.aside';

<script src="node_modules/@tradeshift/elements.aside/lib/aside.umd.js"></script>

Use it like demo
Our components rely on having the Open Sans available, You can see the font-weight and font-style you need to load here, or you can just load it from our package (for now)

<link rel="stylesheet" href="node_modules/@tradeshift/elements/src/fonts.css" />

➤ Polyfills

For supporting IE11 you need to add couple of things

Don't shim CSS Custom Properties in IE11

<!-- Place this in the <head>, before the Web Component polyfills are loaded -->
<script>
	if (!window.Promise) {
		window.ShadyCSS = { nativeCss: true };
	}
</script>

You have two options for polyfills library:

Use @open-wc/polyfills-loader

Installation

$ npm i @open-wc/polyfills-loader

Load it

import loadPolyfills from '@open-wc/polyfills-loader';

loadPolyfills().then(() => import('./my-app.js'));

Use @webcomponents/webcomponentsjs

Installation

$ npm i @webcomponents/webcomponentsjs --save

Enable ES5 class-less Custom Elements

<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

Load appropriate polyfills and shims with @webcomponents/webcomponentsjs

<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>

➤ How to contribute

Thanks for your interest and help!

First thing you need to do is read this [Component Checklist] which contains lots of important information about what you need to consider when you are creating/changing components

General info

You can find some links to useful materials about what we are using and some tutorials and articles that can help you get started.

➤ Polyfill Limitations

You can see a list of limitations that we should watch out for, here

➤ License

You can always create forks on GitHub, submit Issues and Pull Requests.
You can only use Tradeshift Elements to make apps on a Tradeshift platform, e.g. tradeshift.com.
You can fix a bug until the bugfix is deployed by Tradeshift.
You can host Tradeshift Elements yourself.
If you want to make a bigger change or just want to talk with us, reach out to our team here on GitHub.

You can read the full license agreement in the LICENSE.md.

FAQs

What is @tradeshift/elements.aside?

Is @tradeshift/elements.aside popular?

Is @tradeshift/elements.aside well maintained?

Package last updated on 18 Nov 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install