DEV Community

Discussion on: Build Windows native like ui apps using react-windows-ui

View post

Replies for: Wow Awesome, thanks! I have been searching for windows UI since two years, now i found yours project really amazing. could you please tell me that ...

Collapse
 
virtualvivek profile image
Vivek Verma •

Hi @ehsanullahqadari ,
I feel great to hear about developers like you appreciate my project :)
yes sure i can add components if you wish
@ehsanullahqadari could you provide me some screenshots that what exactly you want, I will add that component with same look n feel soon as possible and also if suggest me some css changes to enable RTL will be appreciable.

Collapse
 
ehsanullahqaderi profile image
EhsanullahQaderi •

Ok thanks!
@fazli596 also requested the same features will make issue for that

Thread Thread
 
virtualvivek profile image
Vivek Verma •

Hi @ehsanullahqadari ,
I started working on TableView component and also allocate special tab with its dropdown code example on virtualvivek.github.io/react-windo...
soon and will also be available on npm on release -v2.0.8

Thread Thread
 
virtualvivek profile image
Vivek Verma • • Edited

Hi @ehsanullahqadari and @fazli596 ,
I have updated the react-windows-ui package to -v2.0.8
Additional Features:

  • Added TableView component.

TableView component includes toggle arranging columns, searchable columns, able to add jsx components refer demo for full implementation.

  • Added react-windows-ui-rtl.min.css for right to left direction support.

See Demo: virtualvivek.github.io/react-windo...

To See TableView component goto Tab 10th
To get a lookup on how to use RTL
View Markdown of : github.com/virtualvivek/react-wind...

Thread Thread
 
fazli596 profile image
fazli596 •

hi sir
I check that, and that was so great.
It is awesome.
But I didn't get how to use RTL feature.
Could you please add an option to it like "Day" and "Night" option ?
That would be so great.
Anyway, Thank you so much.
Appreciate it.

Thread Thread
 
virtualvivek profile image
Vivek Verma •

Hi @fazli596 ,
Thanks for appreciating the efforts !

How to use RTL

Add react-windows-ui-rtl.min.css at your index.js / index.ts :

import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/dist/react-windows-ui-rtl.min.css' // add this here
import 'react-windows-ui/icons/fonts/fonts.min.css'
Enter fullscreen mode Exit fullscreen mode

OR

If you are planning to add RTL with some condition use like this: 

import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/icons/fonts/fonts.min.css'

if( someCondition ) {
    require('react-windows-ui/dist/react-windows-ui-rtl.min.css');
}
Enter fullscreen mode Exit fullscreen mode

For Day - Night Theme Switching use 

import { SwitchDayNight } from 'react-windows-ui'

render (
  <>
     <SwitchDayNight />
  </>
)
Enter fullscreen mode Exit fullscreen mode

or otherwise i will add full implementation using predefined functions and other stuff regarding theming in the demo soon.

Thread Thread
 
fazli596 profile image
fazli596 •

ok,
let me check it and then I will let you know if there is any problem.
Thank you so much.

Thread Thread
 
ehsanullahqaderi profile image
EhsanullahQaderi •

Thank you I checked that, was really awesome.