0 0

Creating & Configure DevExtreme Application

If You Are Creating Project From Start You Can install React Template Using DevExtreme CLI:

npx -p devextreme-cli devextreme new react-app app-name
cd app-name
npm run start

To switch to another layout, open the src\Content.jsfile and replace the SideNavOuterToolbarimport with SideNavInnerToolbar:

import {
  SideNavInnerToolbar as SideNavBarLayout,
  SingleCard
} from './layouts';

To generate a new application with an inner toolbar, set the --layoutflag to side-nav-inner-toolbar:

npx devextreme-cli new react-app app-name --layout=side-nav-inner-toolbar
cd app-name 
npm run start

It is a basic application with a navigation menu and a few sample views in a responsive design.

Add a New View:

Run the following command to add a new view. --iconspecifies an icon from the DevExtreme icon library.

npx devextreme add view view-name [--icon=IconName]

You will find the view you have added in the src\pages folder. This command also generates a navigation menu item for the added view in the file src\app-navigation.js.

Configure the Navigation Menu:

Configure Menu Items

Edit the file src\app-navigation.jsto customize navigation menu items. The following fields can be used for each item configuration:

• text – the item’s text
• icon – the item’s icon
• path – a navigation path associated with the item
• items – child items

{
    text: 'Category',
    icon: 'folder',
    items: [{
        text: 'About',
        path: '/about'
    }]
}

Hide the Menu in the Closed State

In the closed state, the navigation menu is partially visible because it displays item icons. If the items do not have icons, you can hide the menu. To do this, open the SideNavOuterToolbar or SideNavInnerToolbar component (depending on the used layout), find the Drawer configuration, and set its minSize property to 0:

// ...
export default function ({ title, children }) {
    // ...
    return (
        <div className={'side-nav-inner-toolbar'}>
            <Drawer ...
                minSize={0}>
                {/* ... */}
            </Drawer>
        </div>
    );
}

Add a Custom Toolbar Item

The application template uses the DevExtreme Toolbar component. The Toolbar is part of the Header component whose configuration is in the src\components\header\header.jsfile. To add a custom toolbar item, open this file and add an Item element inside Toolbar. Refer to the items help section for information on Item attributes.

The following code adds a search button to the toolbar:

// ...
export default ({ ..., search }) => (
    <header className={'header-component'}>
        <Toolbar className={'header-toolbar'}>
            {/* ... */}
            <Item location="after">
                <Button icon="search" onClick={search} />
            </Item>
            {/* ... */}
        </Toolbar>
    </header>
)

// ...
export default function ({ title, children }) {
    // ...
    const search = useCallback(() => {
        console.log("search");
    }, []);
 
    return (
        <div className={'side-nav-outer-toolbar'}>
            <Header ...
                search={search}
            />
            {/* ... */}
        </div>
    );
}

In the code above, the button click handler is declared in the SideNavOuterToolbar component. This component applies when the outer toolbar layout is used. If the application uses the inner toolbar layout, add the same code to the SideNavInnerToolbar component.

ALSO CHECKOUT: SQLite3 Native Plugin for React Native

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Akash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work

www.techdevil.in