juijs / Jui Ui
JUI provide all kinds of UI components that are used in web pages. However, charts and grids are not included.
Stars: ✭ 399
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Jui Ui
affinity
affinity is a case study: an attempt to create a simple component based library
Stars: ✭ 19 (-95.24%)
Mutual labels: component-library
Malvid
UI to help you build and document web components.
Stars: ✭ 347 (-13.03%)
Mutual labels: component-library
tailwind-ui-components
Free Tailwind CSS UI Components - Crafted for modern websites, landing pages and web apps. TailGrids Core is free and open-source so, feel free to use with your personal or commercial projects. If you would like to show your support and love, don't forget to give us a star 🌟
Stars: ✭ 49 (-87.72%)
Mutual labels: component-library
carbon-components-vue
⛰️Carvue.js -- Carbon design for VueJS
Stars: ✭ 104 (-73.93%)
Mutual labels: component-library
Windmill React Ui
🧩 The component library for fast and accessible development of gorgeous interfaces.
Stars: ✭ 373 (-6.52%)
Mutual labels: component-library
Operational Ui
Building blocks for effective operational interfaces
Stars: ✭ 258 (-35.34%)
Mutual labels: component-library
Carbon Components Angular
An Angular implementation of the Carbon Design System for IBM.
Stars: ✭ 310 (-22.31%)
Mutual labels: component-library
sodium-ui
Sodium is a simple, modular and customizable web component library to build elegant and accessible UI pieces for your React Application.
Stars: ✭ 23 (-94.24%)
Mutual labels: component-library
nuxt-styleguide
Increase the quality and efficiency of product design and development workflows
Stars: ✭ 15 (-96.24%)
Mutual labels: component-library
component-library
An easy way to create HTML styleguide for existing web project
Stars: ✭ 39 (-90.23%)
Mutual labels: component-library
Hiui
HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.
Stars: ✭ 366 (-8.27%)
Mutual labels: component-library
NIM iOS UIKit
网易云信 iOS UI 组件，提供聊天界面，文本消息，图片消息，语音消息，视频消息，地理位置消息，自定义消息（阅后即焚）等消息示例。#推荐客户得比特币/京东卡，现在推荐使用网易云信，最低得0.02BTC或3000元京东卡/单，点击参与：https://yunxin.163.com/promotion/recommend
Stars: ✭ 1,371 (+243.61%)
Mutual labels: component-library
Frontend
Front-end component library for 24 ways. (2013-2019)
Stars: ✭ 266 (-33.33%)
Mutual labels: component-library
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (-12.03%)
Mutual labels: component-library
Patternplate
📘 patternplate connects design and engineering to establish a single source of truth for your team.
Stars: ✭ 304 (-23.81%)
Mutual labels: component-library
Installation
NPM
npm install juijs-ui
Browser
<link rel="stylesheet" href="../dist/jui-ui.classic.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/juijs/jui-core/es6/dist/jui-core.js"></script>
<script src="../dist/jui-ui.js"></script>
ES Modules
The difference with the existing method is that you need to add the module directly using the 'use' function.
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.
.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
<body class="jui">
<div id="timepicker_date" class="timepicker calendar small" style="margin-right: 3px;">
<input type="input" class="year" maxlength="4" />-<input type="input" class="month" maxlength="2" />-<input type="input" class="date" maxlength="2" />
<i class="icon-calendar"></i>
</div>
<div id="timepicker_time" class="timepicker small">
<input type="input" class="hours" maxlength="2" value="00" /> :
<input type="input" class="minutes" maxlength="2" value="00" />
<i class="icon-arrow7"></i>
</div>
</body>
The UI component creation code is the same as the existing one.
jui.ready([ "ui.timepicker" ], function(timepicker) {
timepicker("#timepicker_date");
timepicker("#timepicker_time");
});
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].