A native, pure and exquisite web components library which can be used anywhere.

PARANOIA

Last update: Nov 16, 2022

Overview

What Is This ?

This is a project on pure web components merely using native HTML、CSS and JavaScript technologies.

It has features below:

based on web components.
frameworkless, can be used in native environment and any other web framework like Vue、React、Angular and so on.
tiny and high performance.
easy to use and beautiful user interface.

How to Use

Native Environment

Step I: download file alerts.css and alerts.js. On the one hand, you'd better make sure that alerts.css、alerts.js and your example.html are in the same directory. On the other hand, you can just let alerts.css and alerts.js are in the same directory but your example.html can be not --- you need handle these different path.
Step II: import alerts.js at the end of your example.html which depends on these relationship of respective path.
Step III: then you can use wc-alerts web components like this:

    <wc-alerts type="note" label="note">
        <p slot="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </wc-alerts>

Just take a look at this more specified example using wc-alerts web components:

<!-- example.html -->
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WC-Alerts</title>
</head>

<body>
    <wc-alerts type="note" label="note">
        <span slot="label">笔记</span>
        <p slot="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, asperiores esse ipsam eveniet
            dolore eius nostrum ullam delectus modi sapiente? Itaque ea, corporis doloribus fugit nihil beatae
            distinctio perferendis odio vero at, omnis dolor! Praesentium nam similique eius provident, harum minus iure
            impedit atque fugit et ex reprehenderit facere a explicabo quam dolor sit qui quis error aliquid mollitia
            ea. Nisi consectetur nostrum, recusandae quaerat hic consequatur quibusdam dolorem amet quod culpa quae
            laudantium neque alias aliquam accusantium veniam quo qui, deleniti adipisci ab modi commodi sit
            perferendis. Ipsa quasi debitis non saepe iste doloribus eum? Asperiores est labore inventore.</p>
    </wc-alerts>

    <!-- default theme -->
    <wc-alerts type="note" label="note">
        <p slot="text">This is a note.</p>
    </wc-alerts>

    <wc-alerts type="tip" label="tip">
        <p slot="text"></p>
    </wc-alerts>

    <wc-alerts type="warning" label="warning">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <wc-alerts type="danger" label="danger">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <wc-alerts type="comment" label="comment">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <!-- flat theme -->
    <wc-alerts type="note" label="note" theme="flat">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <wc-alerts type="tip" label="tip" theme="flat">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <wc-alerts type="warning" label="warning" theme="flat">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <wc-alerts type="danger" label="danger" theme="flat">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <wc-alerts type="comment" label="comment" theme="flat">
        <p slot="text">1111111111111111111111111111111111</p>
    </wc-alerts>

    <!-- import alerts.js -->
    <script type="module" src="./alerts.js"></script>
</body>

</html>

Codepen Live Demo

`Vue`

TODO

`React`

TODO

`Angular`

TODO

`npm`

TODO

The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

Aug 10, 2022

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Jan 8, 2023

JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

May 13, 2021

A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.

Audio Visualizer JS A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas. Demo: h

Aug 9, 2022

NewsStation is a news app which can be used to grab daily news bites. If you are interested in news whether politics, business, entertainment, general, health, science, sports and technology news NewsStation is for you!

This is a NewsStation WebApp Project Using News API NewsStation is a news app which can be used to grab daily news bites. If you are interested in new

Feb 7, 2022

Next-level academia! Repository for the Native Overleaf project, attempting to integrate Overleaf with native OS features for macOS, Linux and Windows.

Native Overleaf Overleaf is a fantastic webtool for writing and cooperating on LaTeX documents. However, would it not be even better if it were to beh

Dec 18, 2022

This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP

Apr 11, 2022

A jQuery Single/Multi Select plugin which can be used on almost any device

jquery.sumoselect jquery.sumoselect.js - A beautiful cross device Single/Multi Select jQuery Select plugin. A jQuery plugin that progressively enhance

Dec 7, 2022

A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

Mar 1, 2021

A native, pure and exquisite web components library which can be used anywhere.

Related tags

Overview

What Is This ?

How to Use

Native Environment

`Vue`

`React`

`Angular`

`npm`

You might also like...

The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.

NewsStation is a news app which can be used to grab daily news bites. If you are interested in news whether politics, business, entertainment, general, health, science, sports and technology news NewsStation is for you!

Next-level academia! Repository for the Native Overleaf project, attempting to integrate Overleaf with native OS features for macOS, Linux and Windows.

This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

A jQuery Single/Multi Select plugin which can be used on almost any device

A Virtual Interactive Keyboard which replicates every key you press and a Text-Area in which everything is written and can be copied to the clipboard with a click of a button.

Owner

PARANOIA

A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

This package will help parse OData strings (only the Microsoft Dataverse subset). It can be used as a validator, or you can build some javascript library which consumes the output of this library.

Visual scraper interface, exports to puppeteer script which you can run anywhere.

Receive crypto payments from anywhere around the world, options including native tokens (MATIC, ETHER,BUSD), Tokens (USDT,BUSD), NFTs and more.

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

A Bottom Sheet library that can be called imperatively from anywhere!

this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.