xy-ui

Xy-ui is a set of cross-framework UI component libraries developed using native Web Components specifications. To view the document

Style reference Ant Design, Metiral Design.

Github project address

The document

This document is dynamically created based on Docsify, and all components in this document are interactive instances.

Now integrated gITALK comment system, have related questions can be left in the comment area below.

features

  • Across the frame. Whether it isreact,vueOr native projects can be used.
  • Componentization.shadow domIt really implements the componentization of style and function.
  • Kind of native. A component is like using adivThe label is the same.
  • No dependence. Pure native, without any preprocessor compilation.
  • Accessibility. Keyboard access is supported.

The principle of

In the implementation of component functions, follow the idea of CSS as the main, JavaScript as the auxiliary, the SEPARATION of UI and business logic, making the code structure more simple.

For example, xy-button has a water ripple effect, which is implemented using CSS, JavaScript is only auxiliary to complete the mouse position

.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: var(--x,0); 
    top: var(--y,0);
    pointer-events: none;
    background-image: radial-gradient(circle, # FFF 10%, transparent 10.01%);background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(50%, 50%)scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}
.btn:not([disabled]):active::after {
    transform: translate(50%, 50%)scale(0);
    opacity:.3;
    transition: 0s;
}
Copy the code

Detailed source can be viewed. Most of the components are of similar design.

compatibility

Modern browsers.

The mobile terminal does not support IE.

Internet Explorer does not support native customElements. Webcomponentsjs is compatible with Internet Explorer. However, many CSS features are still invalid

The installation

There is currently no hosted NPM, but you can get the latest files on Github.

The directory is as follows:

. └ ─ ─ the xy - UI ├ ─ ─ the components / / functional components | ├ ─ ─ the xy - icon. Js | └ ─ ─... ├ ─ ch.pdf // ch.pdfCopy the code

Place the Components and iconFont folders in the project.

Rely on

Some components depend on other components

component dependency describe
xy-button xy-icon,xy-loading Button. Component usesiconandloadingProperties.
xy-icon There is no Icon.
xy-slider xy-tips Slider. Component usesshowtipsProperties.
xy-select xy-button Drop down selector. Internal use of componentsxy-buttonCombination.
xy-tab xy-button TAB. Component navigation buttons are usedxy-button.
xy-loading There is no Load.
xy-switch There is no The switch.
xy-checkbox There is no Pops up.
xy-radio There is no The radio.
xy-tips There is no Prompt.
xy-message xy-icon Global prompt. Prompt icon is usedxy-icon.
xy-dialog xy-icon,xy-button,xy-loading Pop-up prompts. Prompt icon is usedxy-icon, make sure the cancel button is usedxy-button. Component usesloadingProperties.
xy-layout There is no Layout.
xy-input xy-icon,xy-button,xy-tips Input box. Component usesiconProperty, and alsoxy-buttonInteractive, form validation is usedxy-tipsInformation prompt.
xy-textarea Same as above Multi-line input box. Same as above.

Non-dependent components can be directly imported with separate JS, and dependent components need to be imported with related JS.

To use the Xy-tips component alone, simply refer to xy-tips.js.

// .
/ / └ ─ ─ project
/ / ├ ─ ─ the components
/ / | └ ─ ─ the xy - tips. Js
/ / └ ─ ─ index. HTML
import './components/xy-tips.js';
Copy the code

To use the xy-input component alone, reference xy-input.js, xy-button.js, xy-icon.js, and xy-tips.js.

/ / └ ─ ─ project
/ / ├ ─ ─ the components
/ / | ├ ─ ─ the xy - input. Js
/ / | ├ ─ ─ the xy - button. Js
/ / | ├ ─ ─ the xy - icon. Js
/ / | └ ─ ─ the xy - tips. Js
/ / └ ─ ─ index. HTML
import './components/xy-input.js';
Copy the code

In most cases, all references will do

reference

HTML reference

<script type="module">
    import './components/xy-button.js';
</script>
<xy-button>button</xy-button>
Copy the code

Modern browsers support native import syntax, but note that the type of script is type=”module”.

React Project reference

import './components/xy-icon.js';
ReactDOM.render(<xy-button>button</xy-button>, document.body);
Copy the code

Pay attention to the details about the react in using the Web Components may be reference react.docschina.org/docs/web-co…

Vue Project reference

Similar to the original, no research yet.

use

There are several ways to use a component:

HTML tags

This is the most common use (recommended).

<xy-button>button</xy-button>
Copy the code

document.createElement

You can also create elements with document.createElement

const btn = document.createElement('xy-button');
document.body.appenChild(btn);
Copy the code

New operator

Custom components are defined by class and can be instantiated by new.

import XyButton from './components/xy-button.js';
const btn = new XyButton();
document.body.appenChild(btn);
Copy the code

other

For the most part, you can think of components as plain HTML tags,

For example, to add an event to

button
, there are several ways

<xy-button onclick="alert(5)">button</xy-button>
Copy the code
btn.onclick = function(){
    alert(5)
}

btn.addEventListener('click'.function(){
    alert(5)})Copy the code

Custom events can only be bound through addEventListener

The fetching of elements, for example, is completely compliant with HTML rules

<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3" id="tab3">tab3</xy-tab-content>
</xy-tab>
Copy the code
const tab3 = document.getElementById('tab3');
tab3.parentNode;//xy-tab
Copy the code

Boolean type properties of components also comply with native specifications (adding and removing properties), such as

<xy-dialog show></xy-dialog> <! - show - >
<xy-dialog></xy-dialog> <! -- -- -- > hidden
<xy-button loading>button</xy-button> <! -- loading -->
<xy-button>button</xy-button> <! -- -- -- > normal
Copy the code

Anyway, for the most part, just treat it like a normal HTML tag (don’t worry about the shadow DOM structure), and it will still do what it used to do, but with new methods.

For more details, please see the documentation, welcome to Star ~