This was a JavaScript Declarative UI mini tool developed for side projects, but then found that it's interesting and good for my Javascript colleagues to get the concept of other declarative ui tool for mobile development, therefore being placed here for any reason you want to view it ^^".
This was a JavaScript Declarative UI mini tool developed for side projects, but then found that it's interesting and good for my Javascript colleagues to get the concept of other declarative ui tool for mobile development, therefore being placed here for any reason you want to view it ^^".
Preview:
Mount(document.body,()=>Box(Center(Column(Img('./assets/mag.png'),Input('text').Attribute({placeholder: 'Search Google or type a URL'}).Css({width: '50vw'}).Event('change',inputUpdate),Row(Img('./assets/s01.png'),Img('./assets/s02.png'),Img('./assets/s03.png'),)))));
Mount(mounting_dom_obj,function_that_return_ui);// e.g.:Mount(document.body,()=>Box());Fixed()// ()=> fixed_divAbsolute()// ()=> absolute_divColumn()// ()=> flex_column_divRow()// ()=> flex_divBox()// ()=> width_height_100_divCenter()// ()=> just_align_center_divImg('path')// ()=> image_dom_tagTxt('text')// ()=> p_dom_tagInput(typeString,buttonText='')// ()=> input_dom_tag_reactive(value)// ()=> reactive_value_for_use_in_UI_JS_reactor||_R// A global obj store for all state
Row(// set attribute, class, css style and add event on input elementInput('text').Attribute({class: 'inputer',placeholder: 'Search Google or type a URL'}).Css({outline: 'none'}).Event('change',inputUpdate)).Css({height: '2rem'})// make the row div height 2rem.Css('input.inputer'{width: '50vw'})// make the first query string found element apply the css
About
This was a JavaScript Declarative UI mini tool developed for side projects, but then found that it's interesting and good for my Javascript colleagues to get the concept of other declarative ui tool for mobile development, therefore being placed here for any reason you want to view it ^^".