https://github.com/juijs/jui-ui

JUI provide all kinds of UI components that are used in web pages. However, charts and grids are not included.
https://github.com/juijs/jui-ui

component-library javascript ui

Last synced: 2 days ago
JSON representation

JUI provide all kinds of UI components that are used in web pages. However, charts and grids are not included.

• Host: GitHub
• URL: https://github.com/juijs/jui-ui
• Owner: juijs
• Created: 2013-10-30T13:16:39.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T06:12:39.000Z (about 2 years ago)
• Last Synced: 2024-04-13T21:59:33.992Z (10 months ago)
• Topics: component-library, javascript, ui
• Language: JavaScript
• Homepage: http://uiplay.jui.io
• Size: 43.1 MB
• Stars: 403
• Watchers: 55
• Forks: 105
• Open Issues: 53
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Installation

### NPM

```bash

npm install juijs-ui

```

### Browser

```html

```

### ES Modules

The difference with the existing method is that you need to add the module directly using the 'use' function.

```js

import jui from 'juijs-ui'

import TimepickerComp from 'juijs-ui/src/components/timepicker.js'

import Styles from './index.less'

jui.use(TimepickerComp);

```

Below is the index.less file. You can only use the style you want to bundle.

```less

.jui {

  @import "../node_modules/juijs-ui/src/styles/base/mixins.less";

  @import "../node_modules/juijs-ui/src/styles/common.less";

  @import "../node_modules/juijs-ui/src/styles/common.theme.less";

  @import "../node_modules/juijs-ui/src/styles/icon.less";

  @import "../node_modules/juijs-ui/src/styles/icon.theme.less";

  @import "../node_modules/juijs-ui/src/styles/timepicker.less";

  @import "../node_modules/juijs-ui/src/styles/timepicker.theme.less";

  @import "../node_modules/juijs-ui/src/styles/theme/classic.less";

}

```

## Usage

```html

    


        --

        

    

    

    


         :

        

        

    


```

The UI component creation code is the same as the existing one.

```js

jui.ready([ "ui.timepicker" ], function(timepicker) {

    timepicker("#timepicker_date");

    timepicker("#timepicker_time");

});

```