Needful Program Management

    hana-ui
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    hana-ui

    logo

    🌻A React UIKit with fresh nijigen style.

    Homepage: hana-ui.moe.
    主页:hana-ui.moe/cn.

    Guide

    hana-ui is a completed UI component libray which almost base components that you may use in development works, and it also easy to use in your page.

    Install

    npm install hana-ui
    
    // or
    
    yarn add hana-ui

    Usage

    Configuration

    Before using hana-ui, you should import the default configuration of styles to ensure hana could build application successfully:

    import 'hana-ui/hana-style.scss';

    On the other hand, for allowing user to use their own themes and import independent component, please add loaders for scss files in configuration file of webpack and ensure the node_modules is not added to rule exclude.

    Note: hana-ui also supports typescript with d.ts files, and we commend you to use it !

    import hana-ui in your page

    Example:

    import React from 'react';
    import {Button} from 'hana-ui';
    // or just import Button
    import {Button} from 'hana-ui/dist/seeds/Button';
    
    export default () => (
      <Button size={'middle'}>
        Touch me...
      </Button>    
    );

    More components usage please checkout Documents page.

    Custom Theme

    hana allows you to use your own themes by using sass-resource-loader, you can pass a scss file includes configurations of theme to use it:

    {
      test: /\.(css|sass|scss)$/,
      use: [
        ......
        {
          loader: 'sass-loader'
        },
        {
          loader: 'sass-resources-loader',
          options: {
            resources: './themes/himawari.scss'
          }
        }
      ],
      exclude: /node_modules/
    },

    You can check here for template of configurations: himawari.scss.

    Contribution

    Change the world with hana.

    How

    You could contribute to hana-ui in may ways, hana needs your help.

    Tell to us

    1. Open the project hana-ui on Github.
    2. Submit your issue with detailed description, code and error stack.
    3. We will have a discussion and find the way to fix bugs.
    4. Bugs are fixed.

    Fix by yourself

    1. Open the project hana-ui on Github.
    2. Fork it and fix bugs in a new branch.
    3. Open a pull request with detailed description such as information, scope of influence...
    4. We will review changes and merge it to master branch.

    Scripts

    Following npm scripts may help you while developing.

    1. Develop:

    npm run dev

    Then open the 8000 port and preview the demo.

    1. Prebuilt:

    npm run build

    Compile source code to dist folder with es5.

    License

    hana-ui is an open-source project with MIT license by hana-group.

    Welcome to join us !

    Install

    npm i hana-ui

    DownloadsWeekly Downloads

    5

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    1.7 MB

    Total Files

    495

    Last publish

    Collaborators

    • lanz
    • dtysky
    • missrhyme