npm

Need private packages and team management tools?Check out npm Orgs. »

x-react-ui

0.0.18 • Public • Published

ReactUI npm version

x-react-ui a UI library for react. It contains dozens of reusable react components, including:

Layout modules: These are useful to split screen into multiple regions.

  • HGroup
  • VGroup
  • Grid
  • Tabs

UI modules

  • Popup
  • Toast
  • Menu

Click here for Demo!

Basic Usage

  • HGroup, VGroup

    React.render(
        <HGroup>
            <VGroup>
                <View>left top</View>
                <View>left bottom</View>
            </VGroup>
            <VGroup>
                <View>right top</View>
                <View>right bottom</View>
            </VGroup>
        </HGroup>,
        document.getElementById('app')
    )
  • Grid

    React.render(
        <Grid rows="3" cols="3">
            <View row="1" col="1"></View>
            <View row="1" col="2"></View>
            <View row="2" col="1"></View>
            <View row="2" col="2"></View>
        </Grid>,
        document.getElementById('app')
    )
  • Tabs

React.render(
    <Tabs>
        <div label="tab 1">A</div>
        <div label="tab 2">B</div>
        <div label="tab 3">C</div>
    </Tabs>,
    document.getElementById('app')
)
  • Popup
Popup.show({
    title: 'Modal Popup',
    content: <div>Hello!</div>,
    onBtnClick: onBtnClick,
    modal: true
});
  • Toast
Toast.show({
    content: <div>Hello!</div>,
    duration: 3000
});
  • Menu
document.oncontextmenu = function (evt) {
    evt.preventDefault();
 
    Menu.show(evt, {
        options: [
            'Menu Item 1',
            'Menu Item 2',
            'Menu Item 3',
            '__seperator__',
            {
                title: 'Menu Group',
                style: {'color': '#dc5e21'},
                children: [
                    'Apple',
                    'Banana',
                    'Orange',
                    '__seperator__',
                    {
                        title: 'Meat',
                        children: [
                            'Mutton', 'Beaf', 'Pock'
                        ]
                    }
                ]
            }
        ]
    }, contextMenuClick);
};

More Example

Check out the examples directory

TODO

HGroup, VGroup and Grid does not support minWidth, maxWidth

Keywords

none

install

npm i x-react-ui

Downloadsweekly downloads

18

version

0.0.18

license

MIT

last publish

collaborators

  • avatar
Report a vulnerability