diff --git a/.firebase/hosting..cache b/.firebase/hosting..cache deleted file mode 100644 index 9f4b00a..0000000 --- a/.firebase/hosting..cache +++ /dev/null @@ -1,464 +0,0 @@ -CNAME,1685733005865,58b80423df7da44cd5c6a6ab3212cf84a6751845b9295e3130c92133a151e527 -faq.md,1685733005918,ca8450532de2a814faafb31646a37b0acb726b42ea0cf256b2ebc6ca63d14d6a -limitations.md,1685733006001,11a16e175f970ff67e0911d41f5435a590e22f8858454fde76b59f70669070bb -overview-video.html,1685733006002,0761945592df5364f138caf9d7598fb591eaa9426f3bcd8e8b105b2ec1fb5861 -README.md,1685733005866,f80f72869ef988c78f4fd09465e3d266f33c699558fb77ada19e3633c2fd1a08 -_sidebar.md,1687285342187,feb24e5eb0f321c448e8e2ab80b3ef40774f4fe883b3e98161e996fe77b09b6f -.git/config,1685733005861,0333aa7d1cf4f224e3d5ae53f1441fafff05581dc3474ee37419e2a1dbedd782 -.git/description,1685733003263,82f2436d331ddc1123e2c797669bec173d77c86477f087e1134ca09d91a0d852 -.git/packed-refs,1685733005850,3bea0d495b5bea7c626e9cf69dccd9330043cf8a58e6e110ea0ca95cb2ba1b77 -.git/hooks/applypatch-msg.sample,1685733003264,159513c8ea7e79b52b19383e22c9b658a2d945432119c08295b7a7e0bb3a1784 -.git/hooks/commit-msg.sample,1685733003265,e57048340ae7ab73a9981e08e0dc33ac4c9ce12fbb1d4e36f0088b48bfb45dd3 -.git/hooks/fsmonitor-watchman.sample,1685733003270,6eddb37f7aa9145ebf59d2a4e5572c67ea37ce6793281f91cdd27db801173e54 -.git/hooks/post-update.sample,1685733003270,186590add780eec85c8e17f7b2726a6450113db3d709f49ed731aecf3b81465a -.git/hooks/pre-applypatch.sample,1685733003271,93353290a9b7afc06d5e6788dcbaeac204cb675a5d36fa2fd37d9564804e50f0 -.git/hooks/pre-commit.sample,1685733003271,0f1b8bcd57419856b52e2fea5965a5c47b98844f63f553f03f672f08e91f9ac3 -.git/hooks/pre-merge-commit.sample,1685733003272,f6ec777f95c3a2703f5a60b43f0450811ac294a6aca051922651c74d910a718f -.git/hooks/pre-push.sample,1685733003272,19bf363d5c1e6bf385375d25405d404c81f48b7d23aaf7ac14a1474748dbcfb6 -.git/hooks/pre-rebase.sample,1685733003273,9d8f25c53691dbf1d631c984ff20abcd073efba327b1aee045cca769c3dd73f1 -.git/hooks/pre-receive.sample,1685733003274,925ccbe4b2d5692094cb38a1daace52763f91e55ca85f133abff4b811a229f80 -.git/hooks/prepare-commit-msg.sample,1685733003275,3eff30b4f023ca3b2fa331a45fd227f6857177f773418a54bc0a513c5332f0f3 -.git/hooks/push-to-checkout.sample,1685733003275,984b20e30f00c8e46a37b83f01322bed892503eb7c22c25f06c7cdbd90d02d0f -.git/hooks/update.sample,1685733003276,b0c2c19c5afd90c0db973f3db201a2c3037f10672c7fb293168d56e64d04a8fd -.git/info/exclude,1685733003277,77e7e1ad67e1708c9434f9f596056e24819c6111399ce06bbddb35133f598f61 -.git/logs/refs/heads/main,1687541231778,1cf5138055de061d43adedc2fba968b687e29ce3e653e58c0e3d0d5f2af7a636 -.git/logs/refs/heads/markdown-edit,1687541246287,e5e0ced931de11555cedcfbf22c42514231f3fb0267e8b66e963ffce6a053c7b -.git/logs/refs/heads/text-markdown-edit,1686228545647,fc27bb5aae05e77f8d86c55ad86086586c5e8cb72bff6c8fcc6de59977034351 -.git/logs/refs/remotes/origin/HEAD,1685733005853,567f2faf826745554dfb39017ea0eba44619016facbd26c62f352f4161366e4e -.git/logs/refs/remotes/origin/kmahmood74-patch-1,1686145268475,e52df77590c54a4311f6376fbfab9f262812690e5bdca699f9b610a2c7f75b3a -.git/logs/refs/remotes/origin/markdown-edit,1687541268362,0bf4cf1ccd1968bd7ebb8654410d2c40d9b21788f6cae5d83281fa34002d359b -.git/logs/refs/remotes/origin/text-markdown-edit,1686228563568,2ab57ffc30ae1d81848a7c0d573cfc9255603b0d5fb667d4d6535ed4815a25f2 -.git/objects/00/6892269e11e0db494851770f189e2d9a79f9f9,1687350063965,2e3753a673880339b11dadb57cfb4b36b59c348cab61607ad1cd8ed6ee965ed7 -.git/objects/01/705f218f191a5ff4f5eeb5250827ad82d811a2,1686134684980,0645a566bf984b3a4af14b6dd4d78f4343f2be15311043afefcae39c1dccc742 -.git/objects/01/e35ebb5c5d6f65ff5f95f90d924939730733a9,1686047865266,7fba7aa8bc110719a245d2d913d385c723a8025c236fb3dd42e9422220189432 -.git/objects/01/f8fb4d2e6694d0c4d23acaf66150d62446d4a5,1686086395404,1bde09be4246aed65250abeda08d59ffb5a6f57daa3c7815220559c2945f7790 -.git/objects/04/01ddc6c1312aebb5bbd1b244aa73852c018b40,1687350406409,5e339e8057ac86ee8f9243d21a554795ab18c199ad834fa6a28abb59fd6ae9c3 -.git/objects/05/1fc5c772ea9ce27eb7f774117e8d75a4602616,1686836552794,cf621298bd24c5091b7e8717e2198070ea882e01417d0c118fcdc581231045aa -.git/objects/05/6e0d83a59bddc63eff2c6e52965701be5071ed,1686836552754,36eac163416b13fb9841311d53e69185b870f9cd68385366e5400dc4888ff133 -.git/objects/05/aacbc7edfea8e38a7419572d422d50c2b17f05,1686836552761,92753409214abb29a67b51cd4ff4d35d3eb7dfc04281492962d1dab860ce01d8 -.git/objects/07/ebbfcac0f16bbd2bd1117622b0d2c2e4e514c1,1686788284204,1602be7e594778b91ee11d92f1efb7ce2eaf263dd44489d6b1ab467604ca305b -.git/objects/08/599ffa4ff2b20019d8ce8e1b8ecb78ff322777,1686047865263,1582b5300360b5a0ae92b8a60249af277bba058530389af442b0ae89620c5c14 -.git/objects/08/94e6465928e9fe5256b382f44af073af704e0b,1686687470602,090d3399ea8e64a4aa54989db8c4cfc710e56a9d34a4826018a20a4493a6896c -.git/objects/09/b5b363cd7e185166f06f35f2a4571d6fed539d,1686789051781,10da940970970085cf699eafc1d51f9090c1ea8a57dce9fd3703081d57afeb4e -.git/objects/0a/7648894188d0d308540e0273bd2f01dc8fecc8,1686086395380,173c993d00106dab7ffa4f28b7f28c558aca69bb41f40c1f7f5f72fca9b1b8da -.git/objects/0b/d1de98db451f545d655e5020ae726bf8be4c91,1687350287428,6033ed5eaf20ceb21db27cafa956143a3e2105af4fcdd128bbdbdcdb91cfddc3 -.git/objects/0c/2f9ab559f79361c3a731701b90e97eecf849aa,1686858648452,19c1c08de189f7cb99a468ba7fb2c091fd39673cca4b506eedf9c22a6c5d944a -.git/objects/0c/88d9beafea9078d36fc452d97486e62368a2a1,1686000149179,7d735fa45e32ef91f0ba25488843ca713b5a41378272ffc8a1bc009bf8f3df44 -.git/objects/0f/f3919af0de948b840e4e056e8fa94ee231e51a,1686858648558,3a822ba985ec6da8ce5cdb3673ba3d7ceb6c0157073845933fc54582c05c7581 -.git/objects/11/389bb22f3c427258c07512fa4a1322e95cdce2,1686145267879,2612592f1b66e702f9e948fbc1ec4257a69044314d03d65a509b7ba3d65b62cc -.git/objects/12/87a3b4e711a7e7b5e31248282416e918767fd0,1686788418262,e426e79d7e47e86a407e9036697f68a2a87d8ed5512ad10cb89c6d915dcb8b40 -.git/objects/14/674abb776c88c1415dcedc017ba78450aa9490,1686086395398,5f9d1b6cf1fdd30f43f2132d2733d15026e1da73c3186acc15901e6623cd8d84 -.git/objects/14/d6d275fce71fe6337cd22b6c6c04bd28b22f61,1686858689861,b17ae1ab0f514b0e63d65bab53dd8de6e3b85c5e3ba071559613a007c1e75ec9 -.git/objects/17/e8767341b7ce635e1abd99708b0cc40db8f25b,1687350406484,533428a77d9cc9ffc47cf0aac70bef37f09ccbcd094fc2414f99b8b0cd47076f -.git/objects/18/263c4e0d4ac432f1f6415a1c6b2b86021d2157,1686000149215,eb0702f1078335b1417184f241f49956d895ba539eec083f24471956be25ea8e -.git/objects/18/4db3746eef4668be394e71080cd7a6e22bc12b,1686086395430,4a424b347d90a7ea26ba20a67c08a9b29f3e4fb0ff7fceebb13e12606fadc317 -.git/objects/1a/0952e577ab58d680fa53bd62f4ab52e10a532f,1686000149189,313870c7fab360d5ee681b9c32dfded788a8064a3e178d9608ec8d33a960818e -.git/objects/1a/28b458361ec9285968936c99b26a668ed6e6b4,1686788616785,1a2026f56fad303ea305b4d754dbae05423f314ffff527fac32bf566fb8597e4 -.git/objects/1c/6dee2dc484b5534fc133688ecfa932361a1655,1687557550864,10b58451e2adca40ac2dc400dc53d8d4ab7a7722d6fd0b85896f00553efcc223 -.git/objects/1f/db1cc56de688c7be0adc806a6105f5cbe486b1,1686000149182,81cf78907637e8fcb574bdd1e93bfdf2f003b9c95db0523257385b283098fe9c -.git/objects/20/28124f6834ba621b11195a1d120d523816a7da,1686086395407,bcd6c2716c1e8fe18f45f76a82dff97e93754e1a3d608a4a9c6fc4d853b2247d -.git/objects/21/58a7d5fafeaf2faa21aa1a2af99153a998c80d,1685746493497,4852ce2d48b1ebeab8a67276e312a1c988394cc031e0eca72524b1f87b94410c -.git/objects/22/8ce2684febc7ffb03421caebfb60bf24e3a44d,1686134684983,728cf7736c56e232c2da9a8a55722971e7a8220606bb672b5573d75b4670dc3e -.git/objects/24/872153799ec7661ec54cf4d205fc7b0f52aa83,1686047865271,67fe8f51c3a5776fe1a44b0b1d1018be6f74a8a7483250eda1969f85a05093bb -.git/objects/25/7d8516d7eca8b772b957d272db34eed54d51e9,1687350406468,3aee5e20124be737d77c77d32a282cce62fefb94b4fb3d509030a9182c0f9e77 -.git/objects/26/d7bb8085c20fbe6f0d5371044829e4fa768959,1687208158547,40479ea2237d01005978580df268c4a2c3e4da0f51763b6a3c1f7e1616e79575 -.git/objects/29/ac368441766f99fdfabb319ba5f8f6ee63e0c4,1687350063994,89a841e9bbdecd5d505998c247c05aa69c8ab190ec76af9ed573d46c59e596ae -.git/objects/29/de639e4e187e8f13b29b6739575e940cb395c9,1687557446720,a6da320e1852bef3ba9404352e464f307d527b6a08bbf5f9f9287d368f8eb0c6 -.git/objects/2b/b92c3e503ad8b112caaadbecfc3243d83210af,1687350287447,f6db3dfa9ccd99b5d3192038ece2860bef83d296b52e11542a0c228cc4d56488 -.git/objects/2b/c1cb59418464b4c78a444c3ca542feb98ff54c,1687350406454,3cb59ed5aa456edc007fbc4ca1747d25c5d6d0ff15402190e55cc0f84e1c6e7e -.git/objects/2b/c56a353a67d4f2537b3e0d2d26530f60a2ed54,1686000171589,3b62a0a0d2ab1a2778f15ec81d40444ec777162a074d630f0805ada08b6e75fb -.git/objects/2b/ed44ec2ccfe33cc1c986b5395691ca5d61fe12,1686858689866,9faf425c9a41399e783e74b65a068be05f2dc7013e19d9aa68b7ad834eae809b -.git/objects/32/38753b70b7ea4c21c308f225b373ce4eca5fdc,1685746493518,43f785b41ad5ff829065aa321b87999d4c28ca838861fdc31bfa6d514816b399 -.git/objects/32/fb809d0ea97185e63c5ea872bcabe163afa5e8,1687350429575,fbca49c637d06f655add6d0a2446709614ded7ac90e6381f9c600a462bf6b3ca -.git/objects/34/4ff71aae3f78723d9f5414bd23d9691b300f2d,1686086395420,344e71bc0a79f0e10102702d5b2555b55801b37bd6fc32fc63943abde71dec97 -.git/objects/34/b2364073d9eff01d35b35eee6c3741c4fcdcd3,1686000171612,1d89f775450af559dd419caefdafa90f2d9d671cf2870921782614c830b00d59 -.git/objects/35/87923ad0f6c569560d7ee5d53e72eaa4825c51,1686788418160,257edcc405ddc709b59865a6900ff7c22c4159b639abc869b6c04284d6ec9229 -.git/objects/36/e2c8704234f05442b02fe7d5439cb1984ea2ba,1686788745577,c1941831522f02a565461ded2f9f802f61a3227c42b91ac46833cce756034064 -.git/objects/38/49678779869de8e646c1e633d2482259eb6b73,1687350448489,67703bdb0a6c7c5c344b362de7ca91510ef262a80c9e204fdf0edf265e952982 -.git/objects/39/fc86d955cf0c991e2763c9a7a551e2fd8d02e5,1686086395410,69424c93c43d9c7df58032fef5623a724108cc50c638348cacd6fd4f3a0a9f68 -.git/objects/3a/52f552f1d35ec4e81a19335b86f41e19bde4f5,1687367620794,35575fbb009e32ce8294b167b87d79a17516f91a714cf78d7b6adc93a3524fef -.git/objects/3a/81f2ee00d8a0b429d019d70e02c949857c6c7f,1686145267727,47c089d939305393ec6774b3da7a7c3e052cd1fd3b21312d0195d37b7dcac7a1 -.git/objects/3a/928f83ef55d68534552d5ce4a576bf21b50891,1686000149173,46946b2d9350f2dc72d4fb88f6ccc93e152b62dcfaf396cb804f16dbb511511b -.git/objects/3a/a71c9c701d94073db4074e3d8998afc4166b6e,1686858689876,85fd95b825a26e9e123e795deb2cb743e97b52ebbf2e3ed2eb32b000a91503b2 -.git/objects/3f/6ce4301749a135f31e5b7ef3fd4823132292b0,1686840293795,174c15666d05894f6db29d9a62d4e9814d35631716ae88f58327e0d763ac722d -.git/objects/40/455d33ce6d1fc608696a4e167c651ff4b3e79b,1687557550873,61bfeea830658075921ce57807df8da260340f767cfd2ccbaea14367b4b7d3fe -.git/objects/42/5a9b863280134c33b06c06813bbd108d8b165e,1687557591339,6a931baf35af1720a14a697f9cd2ad03f5ae61d7d1d91ad4dd8f3b71fa8f8bc5 -.git/objects/42/839be4307f1b6e11beb06c0f2fe4e1d1c2988a,1686836552769,6061de99ac972419b6471f30e8f5f27b56812d14424a940e3f01027d76559214 -.git/objects/43/711cc5454a5a65a92f628a432854010812f850,1686788757226,949aeaf800111409724abb92e1b6b7320e03d023a3e9c13c075dce36f52594e7 -.git/objects/44/e8fb9d6167091e6e8779ccfc4c8d325805993c,1686788805110,3834270f02ba00d62b1ab9549cf2728ac793848e207c1b467991eda5b414293e -.git/objects/45/2e6e7ee0d29b9ddd4593e81dfd50b7798b5a50,1687557446752,b857befee80770d34ae21b26ef32df49a5044a93da2fb7662834c955553a49e8 -.git/objects/46/84f1eba3fe2f26c9d436eb460e8a2d766b8963,1687541246261,0608168befd71db232722034844792d2407ad0795027a87f51fbd7df67758291 -.git/objects/47/03bd58a22328657cac8d136ba66f7ae37ea9e1,1687350429571,ddfd18643ee86d04fab3b42d7cf8075cc21c9df677f2303530f20829172e0f0e -.git/objects/47/9f0e33dc9de6b4bb9775b0d66a1c144679e2a9,1686086395423,5a6689da774406b31123be2b82f55e108c469978564dcfe6e7a7e064e80a2323 -.git/objects/48/27a2179cc6f55fc872197000c4edb62313caf1,1687285342424,def8b0b6ddbaa1cb883be60eac3afe55283f8de4adef7e2f320b3771b7980d4b -.git/objects/4a/20316a2b9df1fb365099beb1cf5067a7e12974,1687541124799,ff3525807927eeed680277cba6b32a209ee5d4fe39e32ed45f0944ab33926ce4 -.git/objects/4d/44fb3ec011b2cc13e031a0312241d29ff9fea5,1686086395402,62e7e28748818f8fc2472be284f0ec9d3c73b742224d430abe541875e2c69cfd -.git/objects/4e/547588b24b3b549e6cfe4b6d3697b461d18a44,1686788616729,82ed605687aecd6f8bda3d75c317c45a2b4f14b8670808c83c6c6ad08d20d49e -.git/objects/4e/5f7b20393b350ae8941050ce317c50630ae2c7,1687557446739,86cc8674deaa5caa6ff431f03a5f4cc02cdccd172b8313f5c86dc76996c0b40d -.git/objects/4f/13b96ab9a01c79ee365773b13bc41ef7a8e122,1686086395435,f03247903faee0b4d13d2b4fd54f37b7e80499fe5b15ab5abfc78e513e382be9 -.git/objects/4f/a82c98cbcdfea34eaa848191b561379f65c105,1686047865275,44b4b6986ae1e52edd549f582f1938030e9bf53e8f2d3e0ea90e4220cbb36e10 -.git/objects/4f/f0bdf47332a18da81b6e53b6cd3a0a63e241d1,1686858648429,b03f634cc3151ef2bcdda0f63675be57f66c7d935215e470b5c9dd72925bedee -.git/objects/52/20a2397880039e99107e53fae2e3d8891f117f,1686858648542,06bcc40463f7e29098d552e276facc1033c674d1dd54b0ca60baf353d4a0339f -.git/objects/53/3e3cafa1398e73a37f4ab2006405b21663b1d9,1687350063929,668fbacffffdd4c2b797a4f312b7cca8ed49f7511ce2cb7485745305ebc9e878 -.git/objects/56/3f633170143fe8d89d8e955657f03cb3de6b0c,1687208158537,fce539bf5820066495bd9a681349e27a021f970bebbd04e4675a29ef0169efd2 -.git/objects/59/08b58edd2def5150658556eb759ee3724e75d8,1686840111765,28d21747b66b5230b87f205fba9ab4866c93815a817dc2e2575ce24be068851a -.git/objects/5b/9002fcd57a23d2fb7ab4d74fae1bb90c424738,1686788284190,7da64ef87fd3c1b02f1ad93d83002a9e2e3f3beb135e38d57f3f304467a44e79 -.git/objects/5b/c18bee9fe14a8e8bb8cab1bbec8c4b648d5ca1,1686858648486,1c4256953d2475b8be6012a86e4bcd495e2ca03c5040b0454a0ebac9e553989e -.git/objects/5c/ac7296632f065f951e599d4274af745018dedb,1687350429573,c704c2cb75f0fa2962ea62f8a741f467b3193c2e8df68947cacb91a0654dca75 -.git/objects/5c/b8b31e69d9703b5cb4a17dec522c8b9c1b1b6d,1687350099478,3214abbf8daa70e58e88052166226d29667b91584c471a4be3367c07fc684319 -.git/objects/5d/a494cf88d328d30554adb8ff99a73d9eeb831a,1687285183368,88871e88a3feaf52b3a2cd141609caa5b9d6e5e609a691c62b73916a25e6dc93 -.git/objects/60/3065c337aeedbe4610380bf0f8f267fcf48a26,1686086395369,78672de5454d769e775f637abd4f9423e010ba476e2d6d8030e1cbca33e80d2a -.git/objects/61/341c0edb8a53a141e06b6d94a43c822081833c,1686086395364,05793edca4de2bdcf95c78b1c14a18468a6137ef89f56b3041da00315a264559 -.git/objects/62/b322f696d718539ac899bb6e4ea01b922e08c6,1686788757229,1e3a36d506f685a038063dd21861e386a6ae7239c51a2fe8ad5ddc9ee6d6d708 -.git/objects/63/6cf7c31eff2187f1b9c33b28faa330570893f5,1687350063965,7d1814e877a300f69da05772a5a40ebd81267c4db00dc73400b95254c9b384cd -.git/objects/63/fa3fd6f7d26c0986d0252d3313a9e77ec7e355,1686086395418,b0ecd55ee9507a1e5577caa30f0e45afccd2d67e9b1c8a91523dc2e33fd8d1d3 -.git/objects/64/dbd8bf98b4ebc6ec9370aa9aaf49fc52a6683b,1687350063930,772decfd8a5709dd188b105afaf60abbbb9b5f06b5399f41860ea0e8b3df2b4e -.git/objects/65/6ded0efc3316077d0d6d1ccc2f6999d1b06671,1687350406405,ca266388f1e2a8eb8cd3099f19b4145080fbd7d6e447936db6ebc2182f777cfa -.git/objects/68/1e7390da48310fa75d38b0c7a440d111ef16c1,1686000149219,fa1c98c0ecc8388d57d65ac66506f2e31c7871ecbb2d35148fb4dae082e4ab43 -.git/objects/68/d8a6436a67bdd1f016ff3ac23823f48508a187,1686858648521,90df3a49bc77addcaf81391466f58f9165765f4dc5912f979b51cfc98bb805ad -.git/objects/69/1ed32040189b1077663d54c3a3296969701b2e,1686836552783,063b1b59902fe8e4ca264b455dc1fc717db15bc40619745cfaa5434cedbad1ea -.git/objects/69/9c909007dd91cea53aea17bc3587ae05973143,1686788616796,58c3d5bac340dabab5a479f7690a0eca6adc8f7dd99c801192fe774ee5fb0fda -.git/objects/6b/ece422606934013c8f72fa4a1dc46bffb61785,1687557446747,b0d86982b1524a107a0cf6703e170d6c9204e3e7bf9e5cbf5963c352af20b112 -.git/objects/6c/77ab78136eb83e3d7c92dd9f74c9e9ffe161ed,1686000171599,d83f84729ffdfaebdd253972b6a4ca3cc51b3bb31380011f9502426d88d126cc -.git/objects/6d/43c4340b62a9c490bdac9ffce7dd301a55db4d,1686086395413,b8f3afc2f908694b7d923f126b67319320454358d477506192bddfe7cff730a3 -.git/objects/6d/a347331e1f63cd2107d0e89971c8c696eab8a6,1687350063964,e6e93b9c8aac939e1056440ce331fd15626abcba4e0804a18b3828264119a0b8 -.git/objects/6d/b85b825ec26c6a6532158114b769e7a37cc897,1686086395443,d5ad4052b806ccae16dc81c3ad2f445a11772f9e6c8b41b7899ed7774a46de71 -.git/objects/6d/db6ec4918f8220d7177872d3e705bd9dd69a7e,1687285183343,54666da21304a7ecac969e30d01ba252a8a354407ea14c6e565b68b52fe2ca18 -.git/objects/6f/b4535c10b8498fb4c62bdba5307593375a1bac,1686000149143,f46ff63ed5305514b19f99af2bcb5d6e3113262a8cfa7429f8b7dfecc020cd58 -.git/objects/72/539f053c6be5cce33df42e6f23ea41b811e983,1686788320915,7ea31582b50c50aa0ad30fddab1702e244a005efd9fa32b62d09040bbef765f3 -.git/objects/72/66c33591b66e0ac821196598486aa4948ff35f,1687350099489,b2df2a902975092b7668ff2d97144de8e3753b2c2a458bb26768927ec6ac8fd0 -.git/objects/73/9f34b4e8f76a94f630a0f3a4a583965711c5c0,1686000149165,ba52581c7d65fadad5f25d50d58aed30d33e08f01127b081714c3fc07ad0b3a3 -.git/objects/74/bc7616db461a9e035351ebf0605a5a08dc4f92,1686086424667,eae3a0850499d591758174c6ff3dc78b5e5fd4bbdc69299e7314c0bdf8ebb619 -.git/objects/75/77fb0b754906644d1e2d6608ba72eaf6dc949c,1687367620813,3a763f36598e65b9d8ba7b9b6d5643c66e47e852028d22b16e9d3075ffe3ac4e -.git/objects/75/7fdf2b8f620224dd402219caad64d5ee09c5c0,1686687022232,e290b6f2f5978cb0480e4734400e669852afd59064d2db061fda33f35c0879cc -.git/objects/75/d15fa3a1a1df8bdfa2cfad4273f682fe894661,1687350297701,4fb2238373e510db5b4d428ec5b55d91401324cf8190684f4db0736b2ab353f2 -.git/objects/75/e9ca4a4aae43885ba4a9c9aa343f8d5c390be7,1686086424675,e14d1e75622dec0bae175edaa4902b6eaa802bebfa8cdb7d9502b87d41dcf245 -.git/objects/77/1ab4cdf24dc1d8d1ab0604dcd7d31d7c21d2c7,1686836552780,1c1c0ceea83c70eae374b736c15565c96c7906c0db3bd7e58ee257e06041b252 -.git/objects/77/cfecc55ef0ac0a9d6150e1a5e3d1cef5a7d8c4,1686788418163,fb8406eb15763aefe06dd5fc1b0528a863704b90291dd2bb8f4be30250156bfd -.git/objects/78/2b71724b63b5f4cba6b74fb10c4beac227521d,1686766420103,42c23b09fa5b6277711c550488457caa78ce8f79136e0c28ec5e69933140608d -.git/objects/79/29980b311adac795aaebbda865f8427575192b,1686000149152,6f323088fb334336e46d3837df70e58f2ae6b35ecc2db58ecc64e560c080e1f8 -.git/objects/79/54b20acea3d0eb117a02291ec0eb6304d63dcf,1687350505743,f2ac15c40835158f3c66ca5553166e43fddab1f41a3fc5182c56a35c799895f6 -.git/objects/7b/17d403c16990dffa815dc11e413113d1834f2e,1686766420107,e0c3abdc18c7f6791dff2709eaf165c70b36be025678e8ce4085c0f8e0893061 -.git/objects/7c/cfb72dc5867007ac7ac91656a9d8d9ac655860,1686000149197,c9ef5c037d21e6fce86e305389d0d6b453ff827abed685a3947ab9efea0083ac -.git/objects/7d/82ceccf2fb73d7953b7938441ec18e416f61cf,1686836552765,978eb6b1420c10f408cfef017df27edee7f24736a52e6fb05a7c103eabb224bf -.git/objects/7e/a609c86f36c1f9da0c42a283a3e849411b8be3,1686086395392,6111277727c9accbcf760c7b626cbf3874083ac547aab2a1fb00b9c41c2aa7ac -.git/objects/7e/ea7e47f7152f7eb5744052cc6baeb28234e04b,1686858648505,cdaf9b29c5b83343976422b93a708bb2f4923d30477bc6266e10176aaaec4137 -.git/objects/80/26b043eb6495bef091a38fc340f4b55ac95d02,1686000149136,47aee16003f9994397c989f65ae3610d1a8ec5ae54e22b2dae64f545560106df -.git/objects/80/5f74989e473f033936d89b7c77f48b0a52a172,1687350287379,21363dc2e4762ad85bc0a2e4e639b5a7d2a18530c79220db35da76af0818b34c -.git/objects/81/36d7d06f81ebf831907a0dd8869d1660ef090b,1687285237388,34a23d70b817a1bc36b8380de5a4f6f4a27e6b0c990967b4df5816ae990eb62e -.git/objects/81/9b6e87724a0731a1043ef9b45f6bec37021d05,1686086395372,5f377816d95f1bda4120a55db2ef1369312e339e9c841362b27474bce9be1772 -.git/objects/81/fef05d01fbc69ff8a5410f5a02333370f47030,1686000149162,3add07da483a89d981a08a45a54eb338c3797f1828634493048b69f38858ab59 -.git/objects/83/86690c2e9e63fcb40c52f3d2018e161b6bdab3,1686687041626,0f6c9c6dbed423897dbdfb104eae0eb741dd63333517e63659b1b410d6830595 -.git/objects/84/57a34b9469864a1affdc7602cf5903ee83c5b0,1686788804913,077f2e3510f4cb9861627077e433491299421d3ce191cb7b4d9b06eef5f3ab4f -.git/objects/84/67d182bc14094eab414fb83ad298e705778abc,1686000149211,dfb271ed5a334cdff3ecccf9962cc7b5f102c3eec5bfdad79a71962c5dfa2947 -.git/objects/85/6deb27eff0498c4c3156c1d8d02ab24d6fd88a,1686086395438,844ee8f06bc363eb01ffe393b3e70f54db74e5893e3b2650da9926da769768be -.git/objects/85/b0cc981119f0b2d92affa0e016fdc0624b10cd,1685746493506,e12478156652d6b62f87234c0c8224be5632cf7885bf131077a239d29d4e8aad -.git/objects/85/c3461d08d0c3ebf6fceeb6786bfb69b8e7dc5d,1686000149130,bf159f90c4b6dc8c14ed8be4115f3276e07f0d140ea8b17f3c1b59bb3b58a45b -.git/objects/86/e5349f8499417e76cd21e8b8b2f8d03397bb09,1686858648574,ede7a728769a532e646d22b02587a9ce2c48e4fa3143fb55f2291e3473a43dcb -.git/objects/8b/cf5a8725d012c3cb9ab87f195db90f43a8a93d,1686086395451,5929cabfe3471a99a356f71070d955f088100b075a8d29902daa220aaa7fc9ef -.git/objects/8d/6cb14e056f751f495c9b1d19d47de120be65d1,1687350429575,14005f81c835d1c5dfb786441821e8084a67e22a357d0e4affa60ab8be6fdb08 -.git/objects/8d/72316244960f9e6595e615637ce442f4ad9f8c,1686086395389,18bbee57b8c7311f9d83fce51c83d1027d2657f891f8039bf5fccab5d3eba183 -.git/objects/8e/96371bbf7bb5c39adea555239fac81c9757a80,1686000149193,3fc197edcb1c00c017b1a3173eec6abae4800b0c8def52d226c89aeb2d0b3f12 -.git/objects/8f/5f0b7e0498409f3f4d9e6ec60a5c54016f7832,1686000149185,908eef525f323bfb58e06d1696da04ac23546b007219506972b72470e455b54c -.git/objects/90/53b59596413b18e8366a8fcfbcaf8738d4da4d,1686788757222,2a13ffa277223fce2e4fc8cdd6cb5afe577bd2e0e4d2f7a2392affb8bb9a65f3 -.git/objects/91/917c228f14ee8ec95e25b0bc2dd2513544b039,1687350063976,62e5a5e8edbf390b2c153cc433dfab4cc491402c82ae0939f29d68458c08cd51 -.git/objects/91/94df4000fe7977437e909e9e1e4242c15d0c2e,1686086424678,7edcf5ca7e70b8e91023bf63ed00fbe882b78ca6ec54f4e4b5d6e9bba497f89d -.git/objects/92/93f41ff1612e44d40875b6147385881aa72d91,1687350063995,b74b5ec02752ea99a4f0f1a1c5ee3e7255d688ff876704a179a71276a93b8625 -.git/objects/92/eb4f388b54731d36b069eaf1f13c857fef5730,1686086395426,7fa88b2e499391f6dc3254d22c442d5d7dd1120bf7983f3777f02ce1fc10cf8b -.git/objects/94/9f5e75c18144406008eebea86f5be7d12985c0,1686836552747,a286cca82f89ab8ddc22a701872ccde492f3e971b27ee9d211185e69ef89dcb3 -.git/objects/97/0f08d8dc76c102a5fe8d2b08a6eae6ac4fbe60,1686788745576,9fea71c26ed43f641d2cd438c8ab9b9172abc0252c43fe6651c1bcc6ded31021 -.git/objects/97/93c09a57a8a6e9629e5be978cbf8c60ce06476,1686000149155,68d708caa79a54a613beea1af56c540c721fe6046a1c27b9ac2687782e27e473 -.git/objects/98/2e87a8a81583f8b736d84c5b0ab9a7d9081cbf,1686000149147,e0e48b8623aab92ecbce50e5d74ca04321eb7716371e028fcc3a44c986f8e701 -.git/objects/99/25ae46e7a02e4690ad823a991e5e760b98448b,1686086395428,0f408501d8950c19d1f6e85918ce78c39683dc1a5ef164d59167429aa9daa10f -.git/objects/99/cf4385b5db624a987d5938c10ed323190e54a1,1686086395375,3b97d4cd16091aa804e5d1e50feb781abe87d680239a73bf046e45a7a5422521 -.git/objects/9b/24ca7e18f0c3d2a5eca156f6d7eb0584d136b0,1687350429576,81444e36820c4a8307b5003c19eb606fea65f8f0db157061f9918eca7fad89d6 -.git/objects/9d/aaeabcacb1d47364745bc5fdc3df4e6009c757,1686086395441,2292d76f92bb7ac42733e5ed0e061e724063f591b238c7f0792d6c6d47a004c7 -.git/objects/a0/6e3fc7d238dab01657d87c21ded3740fd7fb33,1687350424685,903120c47394b34b3422182c72c9c9626c5d009bc9035fdfd57c943a98a1e64e -.git/objects/a0/eb6fa9b26576eccf0427b4fc3467bf1a6fdbbf,1687350505791,8fcd6d21200c75840f7da50a6826d5d839db3925b000bce01fb8d8d83414dc0b -.git/objects/a0/ec4e9786f176b60d9072d60487351dd5e9a115,1686788616770,65f1e0914229b0e03d94a687ffe24a26c1721e858c5601a261a7c93e4c374c56 -.git/objects/a3/18e85f0453c94f6b14ea9edf84e68f369251af,1687367601682,2213fd697119b8df20cd0375684acb90d88500c640783234e9b9e9c0605fd9be -.git/objects/a4/dd8115f45ef427563566afe2fbe2a53d5feba5,1686858768971,021dbc300308ff61045aca6bb925d065f1236350ad8bb2ba7f7f1bd2306b2de1 -.git/objects/a5/1861e90fe300468b6ecc05ae491c866405f7d1,1686788748710,0f334469743989c785a0a4ac6ead025dd3a38e9ee4fd918d66da9aa750221845 -.git/objects/a6/9da691395526d21b183129bace04442a82f678,1686687440745,60d018cee4d0783d7748b44ed5068ecacd016af7c8ba3dacac40149b86960184 -.git/HEAD,1687893661283,d524625c6ea10dd647172d766ae741002afc52edbe15d59965e0692d46d60a62 -.git/objects/a9/01b5ebff10d1f6c08d05401a640ca7f637b61b,1686145267732,5d31eab6d31f8a25234558b8c1a27b7d6152b4929fe8edea9e13abf721490c45 -.git/objects/aa/41ef4a819f10db8b9f74d43d0c760dc9a6a96a,1686789051640,bff71aec288ddfd625545bbaf408b2bd8d782cbeaeaad558b3230e5bda2a4d15 -.git/objects/aa/4b10e337ccd2323a114d5b9000adebfa56e420,1687350099507,1bee1488c7829427c5f26f1a5976dddc50ff307e46aadf74adac1d2ee57dbf85 -.git/objects/aa/dbdb1752e7c24b18bf23cf4f1ca0b03e3ad7b7,1686687346720,cceca797c263afd63c88410b7573a5e57d395f1b45ebb099fea0a8b809cb3c7d -global.css,1687893245714,e680df980d1c981a7b89bbd409432bf4b1d8fbfd12dd7a139312b80b7c811086 -index.html,1687893245714,2c7ee967e512b46da40b804ada52e1bde36e8b7ec31cd730f36c1e721845863f -.git/objects/ad/2fd54d070ed57a2aa440700491f86084311579,1687350063944,bedfbbecfb82f88d939c2b8f8d32b6bee20e9bcb4532feddc4df89368683c75e -.git/COMMIT_EDITMSG,1687893655383,da4342ede8b55d77f4add493b0f9c61d20f052179c5b0754c8c04cd3685cedf2 -.git/objects/ae/14cd8cd50b761f510df9a843e758511f766c8f,1686228545641,8c4c8cf6959c6bea6385aa7dd08ebb0ad545da137279d644856b42a09f21a48c -.git/objects/ae/2d3e471794d0e92b0992e6107516bc81fdbf34,1686145267742,9ec5bb13198a2e4e0540d31706fa190556852a6e931a8c95074b593b3813ac88 -.git/objects/af/6026d1f86c43c40f64ed09c0fc297eceb1ad57,1685746525407,c136bf09bcb41b2e80b7d8fd3e7367f44dd705892824e6f5375473d58df49eb7 -.git/objects/af/d3cda4aa256bdae2306791a68a7f10103712e0,1686145267518,d39cabb5bfee9416f43dfbadaeb024a7c18938f9f0a4d450898e83f06f8a8896 -.git/objects/b0/4655af9a1a61b81a9275031831884311ab11dd,1686000171594,6976081952a58598cd8ec0a972a36950ec44f2129266742c79afed8cee423233 -.git/objects/b0/a0082d7044196331831629d88fa49cd225eef5,1686788745571,2722cd94764e208731b2edc758ac854c12e31dadc8f02013ef391add9c802cde -.git/ORIG_HEAD,1687859524543,4a2d723e3a9553ab2349b6eedfa151fc450f356a7b63eb2aabd098838dab0abc -.git/objects/b1/f619def72f899855ae91ba808f169e347b0f51,1687350406559,525c4993a84f4c76312f244ea45ad541070b6b8104b043a9d9691afa7cf00cf3 -.git/objects/b1/f8578e9bf571ac6735ba54172078c02693e5b2,1687350448508,b70921382d2303e89ceccd88d906f7db5e6ff4def35c13cd1ba9ad31f6209d7d -.git/objects/b2/58c61919e6e3f8fd9f784cdf99ec5a0d490db6,1686836552776,3a523a7a7c309dda2ff0bc32187e4e5331303cfd4c3612ac45772674f20600a7 -.git/objects/b2/d2575a5aabb6e1e421e91b3574b98df6def625,1686840293791,1467c86d45551eebe84155d8f909761399c8a19a3d0e4b7055f437b84cbf2196 -.git/objects/b4/2ce94ba02f4cb76d7551ce02f48b4667e0b803,1686000149139,652e5ec1d2e39e03269c67bc7ababc675e2c4961240ea3b5c0cae05778c3ec9b -.git/objects/b4/fe4e8a4c1b7c226351c374d918f3d9dd77272d,1686789051729,822a02c302c4a0434ea91ec21a434322013b07253136a63f69caac0d38bc4c7d -.git/objects/b5/1abc08247879b4c6b607c17b8a77872cdd5b1b,1687350406558,fd02a0dddb5e252eda4e216d01dc37782e7e723b5fe2e30fc96031e370858dbc -.git/objects/b6/44a27a7d72572fa336d9e3650339ebbdb7cc37,1686086395446,9c3fa0790000fdc41431c03c456920304fb30fe42767fa61e33faaa4eaa9c7ac -.git/objects/b6/70b18007d25713a67ce3f3ff3ccffe40f843a1,1686836552787,e27ac35d8a96c443b2ab8da88500a3a7f8e6161188604e809e5ace3fba3292ab -.git/objects/b6/8839479141e9ce861617133caba597fbfcd74a,1687350429573,bac73d7bee882bdb711d7b96fa22603bb4e9f742f0db0253523aa1a0ec48a906 -.git/objects/b7/56db55802ff882ca5204766951ffab8719fecb,1686788805080,8fec2ed4071a8b55a4fdbdd282389b5396ae761bbd0b5aee3639ae685c9fac64 -.git/objects/b7/f86364ea5feb82aa153b84485bed3999bc7845,1686086395386,05057c823b71657633d1adb7ea2d3dc759777a103b1ae2cc59ba97b0847fe84d -.git/objects/b8/d256c2b3654ab20a8efa45571d2cc86182cc6a,1686000149170,f4633c7d2df2376723acf2ae6676c6f863bc5ca2abfddcb2dea48e8a3d2b8e05 -.git/objects/bc/5269a2253a9df40f2257869a97f4e948ab3eb3,1687350063931,fc18e1585e4da179dd77b8c4b6047e8746fb2dcb4327a06ae295ce1a895614e3 -.git/objects/bc/b1a6a07e5de824bfc8023a0759553097968164,1685746525427,c5c60843939b3153890b493ab10956cd720d2eec15949781795ef7f9ba58b052 -.git/objects/bd/3b5207b83ad1e10ca9ccd70b7e35f4fbad0c58,1686228545628,6ed64c25626b4a225f64cfc03e7cd80da310ccd41647aa131a3056170319c0ee -.git/objects/bd/4f4fc14d77ea6fe6b3a4343eae62d218ce2f97,1686086395378,3f31d09265e6bcee33b1cea5ae79c48e235e18941558983b4d86d9702cd425eb -.git/objects/bd/72249653a00a90e5eb1467c87c2ddc0ef1bf3c,1686086395395,0932d386e3f8d8f758739607fd8605e10fba112e659f4debbd39ee44369bd315 -.git/objects/bd/aeb900838754df361cde05c45fb4cb697dfc3a,1686788320904,0b40486aa2b1f89863ae8fdc608bf5b8053e7a96f79981bab3580a27131b812c -.git/objects/c0/b384cfe803b53889996ab7df41c69b6c5d5677,1686086424670,b7f35158d9c8b99138d0dc7d46ba776efd0003533530a2770f374bcbe62e6a80 -.git/REBASE_HEAD,1687893246428,4a2d723e3a9553ab2349b6eedfa151fc450f356a7b63eb2aabd098838dab0abc -.git/objects/c1/0dba5ef6af5a1f351f4dce6c8625f34ac68649,1686840111759,8c30fd47ad47d494c399347561ecefdc01b612b1dd56b814a9c4037c66a21791 -.git/objects/c2/f9d9b31b3e023bf47514c86e06c9e08bcfb2ac,1686836552791,72d7c353db146d9a19337246060d7210bdeb29b8e3f8db8e49edbc9405bfd289 -.git/objects/c3/845ebf8586131400e45d7d419da0c15b101245,1686086395433,d980f0f1fae6d86fcaa517773e7fe9098687f066d65f2c8928c749622b6f4344 -.git/objects/c4/c798c009d7b876efe46f069d0665366d7b1359,1685746493489,916015796825b91e9fa191daed1c2a91d236f27eef0a0208b0a9f0786a3dbe23 -.git/objects/c4/ceec3b4893434988cb97cb29f3586d9940abba,1686086424660,89325193b4b61862698e72af621ddc2a9ef8ece69e3d710a48b29b93bff1cf0c -.git/objects/c4/efe91380f5283550d715b96b257147913e78dc,1687350099477,bca0c36ec53be12e5138ff40275a8a3d6893493aed05bde48db630a8f4fc36c1 -.git/FETCH_HEAD,1687893671858,17f2d05f63a71f56f11ec697edcb391fe842f9d00a77b8ff5fc910a4423b2929 -clipboard.js,1687893245707,456800fbb72cef7bc3809bc722a5dfcc61e3c06be8ce2c11d562cc0f881ade41 -.git/objects/cb/fc2b89b3d86860d9709be57c06a89245ee5f24,1685746493526,9b7f38e2fc001af2428a5f5323e33860516b0930cb4a157b51a47a4af8499e6e -.git/objects/cc/4a74e3f52522076652aadf62a98bf3c9e7a247,1686687470617,23b6d83d002aaaf0a5d42845ffbbd5a639f26b690c4095d8ca45198e0eca537c -.git/objects/cc/c364a0861d53d13db2612662345e2a23122963,1687350063993,af11bc7c8229e1e6445a4ec5b02048cf00603f0ce87600d050bd793bcfebc3ba -.git/objects/cd/5389bbe5d2c47b3f1d200454dc4cb240a2b7c3,1687350063975,0d8bf25781ea14be75a1f94b39795f4dc21601fba668606253810d51ec8b36b8 -.git/objects/ce/39873bccdfb4db1b0be9644e34cebb88989897,1686086395383,cf8e13d776d3b7edbab69231ce2d1ca900ae7dfbcd9a3e851fd18b3516ad2b3f -.git/logs/HEAD,1687893661282,50eadc09010d197916c2b91f9e5704284d8d150a099b7b318930e5cba5aa08fa -.git/objects/cf/bbd868a5a439f9c7c68da8b2af34f4cd0aa928,1687350063945,8cb3697ad0ddb74633127626f32ba20e8a21e7421cb925159a91d79c47531140 -.git/objects/d0/8d87278902fa5e1d7b282aa881eba5569bad41,1687557550872,103a674114e4d30e92925e53fa53c3fc78beec0a0e11a9b4981f6df1aead6227 -.git/objects/d1/53004f82227ff9311b8614ff59fb9e332cf119,1686789051681,636e734dc4989f3b4aa4e28bce735941de9beb20e624640d3e47333b45bf419f -.git/objects/d3/9554db7fa575fc4d53067ba32da68c8a4011f8,1686788243163,911a526be25108dcaba4f38b88aa2ba33e1b664e83cc5e0a5d4db5a6efd4e487 -.git/objects/d4/a51637e2e8d55c02fbaf8ee71f42e0f3bb4f96,1686836552757,d98af718051d352cd6659a7341a134f7ce4337b69b59c59d37adc0736b21fcd2 -.git/index,1687893655238,28a8d9c0f275f5383f985a9c3f97d08af6ac7c3332344b0f1c10ac1f2e66706d -.git/objects/d7/6f8ef6510f11cb939d74657be4111cad3a7b80,1687350448487,10ba7275a9f54dbb7e3f347d12ecff0848a6441bcd4d0183c432591f5fc325d6 -.git/objects/d7/7af7629bfc75f3f67b955bfdccb0f6d1ceb7db,1687350063994,a060fe56dfded63cc3d0f4120af5e4c2dca9dd9f2600f7d9b2c608bb2ba98081 -.git/logs/refs/stash,1687859571731,90bc048b951670d209cee8a185283ffbbb7d4e8f40cdc45f490b867f3f9f7609 -.git/objects/da/0e022d97dcf821fd2cc640bd27cf0b4775157c,1686687041617,e96f58b0f7ef2b2851126783c42f129dce5895d6f47d157050ac2bcc230e61cd -.git/logs/refs/heads/docs_update,1687893040217,31f39835215497dd0845c0bc67866920340bab9e0cc0722dd6493575be338ebc -.git/objects/e1/b91200b506895baa4d1ee25d338b2cd489d919,1687557446731,92ba03059e1d2daab92d1a2151437bc3b25531d4c48a39f9ee6c0e714008194e -.git/objects/e3/375b138465cdcbb5fd52e6b80daf12a3a8ca01,1686086395416,5e52fa8f92d8567bdd04ae1966d8c6c5b800f86595ca31c447bd3bea04d6b1f2 -.git/objects/e3/8cc2a07cbe426094daedbde25251641b22b4f6,1686836552751,579a6a8285e11daa2839b740107cc81b09f463bd5a6e92c2b0558479b8dfe55b -.git/objects/e5/d3b91d3bd226f1336453194a84fdfcf69a4e7e,1687541006464,a6f00abe3ca9134d6377b7e8c256002e0c79add71550d6765e50dfe53a44d87a -.git/objects/e6/ddf72ab2ecc55bb7afd99e50cd6f336d926e9a,1686788748723,906aa36682e74e524c49008ecd234eaff67e90ea99ff87639fde5697bb488632 -.git/objects/e7/2b3708fd8058661e3996076df5b3e4d23e3cc0,1686000149204,5088c5e0f8c4635d6efd9770632a4775622b696887dbed448a19d383d4a91aad -.git/objects/e8/4a7936fbd15a370d7ef0a441a9506f4e8de494,1687285237283,0e823f5b3002f1350c20015e322471fb35e0b1e9c3d4140b67565cd6f063bc46 -.git/objects/e8/c2ee395f418ebd33483bccc73da32b2673ea52,1687350429574,25e43cc75200dc6ee619c780fd165127d97ae0af8c5b19336484684fc37fea70 -.git/logs/refs/heads/firebase-deployment,1687893661269,0bd3dbc670c7300359529c8972d14bbc2aa3d31fb3ff31d3b4a27c4477925c94 -.git/objects/ea/0384e5c52f6484493231efe0e32fe70adcd60b,1687541246242,40d6903676ce9467660e936e09048f7bee9688d794d172427d9fd43d25bec23a -.git/objects/ea/4f5205b5ddb3a33e7a86c1d5770f887c385d35,1685746493481,c23e2c9552b9e9c1c534ec0c2ff9296da36099716511af0744a2ec7d686da977 -.git/objects/eb/70879f345bffb769588988f3956b902111fc30,1687350406570,18c3f10c1d04ff7d001a9fb7162f720ee2de19290a8c13df6d053f9413ef9881 -.git/objects/eb/d3adf408bfcc0fc4e5bb863ec5e65035c7039f,1686000149176,a9372276a4adbd55e0b2522608d5319a903707d23d13478bc4a27d6952f6513a -.git/objects/ec/b97994bb73c6637a1acfb82072c7dcef03bd0b,1686000149158,1c8d611680c00ee68f60095d53105c86dfe4f0503f333f90744f50f8fc141fc1 -.git/objects/ec/e4f52a2211be2582fcd272c1d53f33f841da2e,1686228520088,0900b5fc8c81953c9550180b10c5a787ab94316266bcfd9211faf7029d3688b4 -.git/objects/ee/e80d1485a831984c7fa533f171d2c92615b087,1687350099478,9ce5c4fc5303f9ed171d0c1c295e59259ac8d71d63da1c8faba4d99f29a9544d -.git/logs/refs/remotes/origin/main,1687878286169,08e52ada628a7d7be118f7603cd0540ceb12a16ba18b69307f14ffcae7d13026 -.git/objects/f0/276c6a14dda4422eaa19b37b644fbe39674bd9,1686000149200,33a8f3be846c248ea7881fdab88ffb7b0e5e7795d1aa34858f597f8464888f58 -.git/objects/f1/e762258dd3cd464901c9f5e51f061ff9197ed5,1687350429572,dd54596d405de678a5ddf41165c99b9aec44ed9a0418db72df6a31acb0c414c3 -.git/objects/f2/49cbdf48fa11de9d02ac920d6f20ffa6f83cfc,1686145267883,4fd58e77c51228dcaed73a77d13255b0292971315ca6b5afa1a37d7e9bc7550f -.git/objects/f2/d6c5b338a7aabd73f3d9d8a925f0a83c56cae4,1686788616780,2c01a065ca05464eaede4f7b504d81542ed1bc7cee14d5559d873e4ec08d2813 -.git/objects/f4/192c23c83ebefd9f4162e9383332b2241b72c7,1686000149207,e18fa53305e1990dbd0cfcaac9cec260c47b642a76af3c3462f327186909e888 -.git/objects/f4/4e72d6d397bca839617034dd80707ab43c0285,1686788320912,1673687bc73dbd0c5db9624d9076a51cdafbb14a34574d0a79bbae62b75eab7e -.git/objects/f5/44ec0049e7a81ff12eedfe6d0a0c658682e46c,1686000171603,4f90bfb4fd5ea801aaaf2841573fc33d89fc1ac373ab3ef79725f3fe49ec7701 -.git/objects/f5/b9c97f0bbd1f94aff2c842b2d45a3c4e1af130,1687557550893,ccd3d7fc16691725fa5bd678c5fa94678b9eade452a307fb89ba3016f250b608 -.git/objects/f6/6824425296c813c7e4471b81d58e80664f0d99,1687367620787,4e76a885c4cc41163e54b68e06d7766f9d2dcb6cfa2af7ad01cb0fedbdf4cddf -.git/objects/f6/a6d0b82c5e678408353b96932adf8de7315b83,1687350406404,13a0a293d6550cb9ab12cb758f48c40705fe99b212cb190548f41ad257438808 -.git/logs/refs/remotes/origin/docs_update,1687893061453,2aa337424d302e1f7fa699ccf16e67f6a225ddc699d8d25ebd55035db5982ea3 -.git/objects/f8/c956af17b950bfadfbd76a857007bd01474e31,1687350429571,ef61abfb7faec5e2f12ed90d22c65a129c0dc664bdf1b4028a9c158408fbaaa0 -.git/objects/f9/e169dd6cfaeb727e654d2497113032fb95f2fe,1686789051593,c7874afcbcf9591f60733e51cd2dfed87262f5799c0d6f290d2f1d9ee226c96c -.git/objects/fa/6bab916d4a9eed9b0911b3543ad986346f897e,1686086424686,915c2fa3eaa38f69af71d3b0ace6fde19eb6b62c32503fe09f01c848527172a6 -.git/objects/fb/049c4b21edc8fd1fadc226eb83dd32d732d855,1687350287466,2fcd8d8c0562b4aa62824dc7e07927508314fe12114a3d45c93366b76f340c39 -.git/objects/fb/6bdf2c48dc3c9e511d1499720c22f79f2b3217,1687350429570,84c49b3ff964b7cd64b7a38755fe50ec7afcf8d9135fd48cef170bac4a787eda -.git/objects/fb/f15ed5f50481222540221dfe966e4d1faecb3b,1686789051610,baf92a4f936f3cdf45e85742c6015230eace83ebb1ede8b1e6aaea0afb964b22 -.git/objects/fd/4b831f83fe5277f230d9a0da04a2052006fd7e,1686858768885,618577e97e3df029b95c512c152e1cc7283328c93c062ea6baa4452e0485930e -.git/objects/fe/e18189a66d5cdee06ea6092231c057d5b8bea6,1685746525392,0a63b62ac1c823e0fcca9a73cdc99549943921fcd8ba85014d113725cfe87266 -.git/objects/ff/ffa2b5bddf6013b9fcb2b2322a36f4e80d96b2,1687350063946,ca909cfeb0f42c2684ae802126a4882253a24cb9f9928f8ce4b6ff108d78630f -.git/objects/pack/pack-3bae6dac7cdad917b8cb9e79aaeecbd315d88721.idx,1685733005756,3aa5d165bdf071c8df6c8eda4e93b91c2f67940188d3ded3643375c694784522 -.git/objects/pack/pack-3bae6dac7cdad917b8cb9e79aaeecbd315d88721.pack,1686687022224,93ee4998d17209168f9df7104cf8298debc449fe0ba3fed77a95a80ad3e08386 -.git/objects/05/54286b7c0f7422212e7923d4c2cd64ceb8f259,1687893642513,ba072f8cc1cb92147345e2a767e553cf4963279bbd4830799ef019e31c1c83bf -.git/objects/05/ba03ee12891818dca01a3b089b6aa9cc8a899c,1687893040191,f6b866fd2145c0878aadfbca964e2f669d747e51d2d604b4ccb78b32762dd6d1 -.git/objects/05/f9462eaa4dc18f019962c850d19637db00c155,1687859571602,b8379345b92e08bfe6b155eb142891807f684201ab74a541c76c0359add83c55 -.git/refs/heads/main,1687541231776,6dd858670bbf32490f9b5c0bfc41e3eee4cf107e07f4b643541a2c589048b91e -.git/refs/heads/markdown-edit,1687541246287,7ce5898dd7d5555f349b89bbbaca67e0755d7107aa3eae4e8afe059b40eb9dc3 -.git/refs/heads/text-markdown-edit,1686228545647,49f7d5a11d24a51aa9c9c30be44b6a854d00e18087d197930394367988e7b910 -.git/objects/05/bb995e64c90c239cd36cc26eb0361f66b0cd13,1687859571713,4b6ba6a27b238f2e02b63b7a51c8a24a49537861eddafe480fddb9aa8e7b6412 -.git/refs/remotes/origin/HEAD,1685733005853,309067256ef321c6851b59e293ca58f7ccae3509e768e9597fd3348d34570b32 -.git/refs/remotes/origin/kmahmood74-patch-1,1686145268469,0b296817eb421e7ed50caf08144e3f01ca153c63e9ce3436226ef54869c621eb -.git/objects/10/3d4ca32cde54f0aeeffeebe1ef90554316ad03,1687859524335,ce627b989e34289ccf69c3cae6f88cf820e770dcf4bf0b310263d33ef96282a0 -.git/refs/remotes/origin/markdown-edit,1687541268361,7ce5898dd7d5555f349b89bbbaca67e0755d7107aa3eae4e8afe059b40eb9dc3 -.git/refs/remotes/origin/text-markdown-edit,1686228563565,49f7d5a11d24a51aa9c9c30be44b6a854d00e18087d197930394367988e7b910 -.git/objects/10/45397106cd7762eda9f0560f5ba04398917ee4,1687893642511,ef9a3f9e4c0ec49d75acf99c2e07a9f55f02ba6cf438256874d66c046ebe4758 -build/Pro Tips,1685733005867,5f94a71d64b64d68e3082bde0397d12ad4e411ca6f0a9e58d1dd72800121ffc6 -build/extend/1-local-assets.md,1685733005868,590d7887e9695a78a872e721dec2bf966fe57c1ab0bfad9a0e8d68f9bcdf652a -build/handle-data/item-template/1-interaction-with-api.md,1685733005874,c65b278b834f41d166a73da5616df331d499321d4fa0c90f3dbd6a9b1f8b430b -build/handle-data/item-template/2-filter-data.md,1685733005875,9391b325d16470b039d8747f3957eb1ad63264fa0278b2e296f6144da2caf296 -build/handle-data/local-storage/1-local-storage.md,1685733005876,3062e4185c5b47f689a1ced96313e57b0bf4276e80648a87288017463f1249b1 -build/javascript/Date.md,1685733005877,3988758e52be2971d7e59c5a79787ea74dea89150cd754aeb83fde1100a0269a -build/javascript/Ensemble.md,1685733005878,cbe2bb02311e8bd9fd59161701ab5ac6696422372e6ad0cca5e1d8c6d0b4ba74 -build/javascript/Global.md,1685733005878,b344d4427031f4ad54b893b1e8c3034ae1f54275c11bffc3826d2d530c8c49a3 -build/javascript/JSON.md,1685733005883,cbe2bb02311e8bd9fd59161701ab5ac6696422372e6ad0cca5e1d8c6d0b4ba74 -build/javascript/JsonPath.md,1685733005884,cbe2bb02311e8bd9fd59161701ab5ac6696422372e6ad0cca5e1d8c6d0b4ba74 -build/javascript/MapAndArray.md,1686858768819,2a865f3c4fed2e2cf7119b014e6401feeff67a6d4ab02d1889e7ffd14812a2b2 -build/javascript/Math.md,1685733005885,cbe2bb02311e8bd9fd59161701ab5ac6696422372e6ad0cca5e1d8c6d0b4ba74 -build/javascript/Numbers.md,1685733005885,727936853c17d03bd002455ac5fa1b3eb60be59d43458aca2cad3945ec3f7ff2 -build/javascript/README.md,1685733005886,cab0caa28768c3908ec810e89413585a1dee814e8974fb311297a94b2dffc4da -build/javascript/String.md,1685733005887,3d9914832e05e80c47878ce88c91054b50e2d28fbf03b34038df706b00f6c669 -build/make-it-interactive/actions-and-events/1-invokeAPI.md,1685733005889,4fd3192d25172d1e665c658d6d9cd5914e2ff0c1a2a45d1dc780ad0806e32e97 -build/make-it-interactive/actions-and-events/2-executeCode.md,1685733005889,7662a52727921836a38d506187ed6611999c1e82911d28c33c35b0c0e41f4aa5 -build/make-it-interactive/actions-and-events/3-openCamera.md,1685733005890,17fffc6f2e70561350054e89763d5129c6f3dd73c40dce7915972394b04bea66 -build/make-it-interactive/actions-and-events/4-openUrl.md,1685733005891,f6e04562004e3f46aaf565e62cd79a84f9c4aa0881c2e779b8a5f79b5a553b55 -build/make-it-interactive/actions-and-events/5-startTimer.md,1685733005891,e207d9c883d5c3a1269762822373cd6fecc11227abc7b74835f99068fd015519 -build/make-it-interactive/actions-and-events/6-showToast.md,1687285342187,d17ba0094575e4f2e4f5538694360f8c0b744a2d691ca9ea34a7df3f1f74164c -.git/objects/11/1fbe259bc6463ffaa021d8afd04bdce7483968,1687859571616,736de60c388568ce24e0ea0ed1b993df23392f30290833c3f870fff3bc31e16f -build/user-interface/2-widgets.md,1687557591233,7815e461160a41070d6279131ec3111de74db4bc2e806baf64c9481e85588304 -build/user-interface/3-layouts.md,1687557591240,f43eabc7ab0e2c83a74c6e9acca5008ff2cb2931392ab32ac365cbde8d9216ff -.git/objects/0c/c438fb87fdb86b3f6c59545a54b0c1bfb4aff5,1687893655212,450ce0a5607c1df3023142ad257248a70c193dd7ca246f9e8783a295ba6b35b3 -.git/objects/14/9a32facd969dc098aad07180753359dca4f588,1687859571488,8568190de1de73d849636beb0b4b003efb473598d2c65ed8e4b2bfce133a9afa -.git/objects/13/2b445d6d820dbe78df7241895626e5323ca6dc,1687893007566,fc08e70c0b8b0455c701b76103bd8db5f5ab4cb7ec812ea0dc2a19f6e230279a -.git/objects/24/0b8542b7721723f228bc0a8579414c28846e0b,1687893246022,c6981173640ba71ad9d994f92ab694d0680d9d24ac7907c4a4bb0450e36aa9a4 -.git/objects/3a/d16298d3bd825022c84d91c06064782535f963,1687859524472,ebaa93758956206f30f0ab0ef58980d06ff25129cee8cd5f4ff2231501d7fb57 -build/user-interface/intro.md,1685733005899,f54b12c34813dd338c6ac5cb7433fbf3f5f4fb0298094d564ada104193effd36 -deploy/1-prepare-app.md,1685733005900,5aabd31b3236e5b4e83e0ed0302db55bd06b69358809d8d8bebdeabef07efd53 -deploy/2-ios-appstore.md,1685733005901,8dec33190324b720f5254d63d9e6bd525949169bc0f8b4272ace39f8b0654504 -deploy/3-android-device.md,1685733005901,38b8f2d1515458a24cb63d76acfe70f8c8b210b949cccddce9528fb7c7eb5a92 -deploy/4-android-play-store.md,1685733005902,21e6406b94f5eb7a0d3a389775845a19e95e33f4d9da11a3bbacd3939c21619c -deploy/5-prepare-for-production.md,1685733005903,141746c4de8d0cee63ef9768c44c9bcfe5d62395624fdac3e9bebe74e0be7fa2 -exercises/0-prerequisite.md,1685733005909,2e19e2568c06847e259c8b564978ac52044823fd91d4c805ca27b09e3d1db347 -exercises/1-update-app-title.md,1685733005909,dd88d5d3c95325d29005eb61b1ea366a753749a5f60b6c99273a84e795c00155 -exercises/2-add-header.md,1685733005910,210c61d8a02cd8202bc5259c6697dc9f7aaa1fd2a4601f7cc63885b5f5fc089d -exercises/3-add-location-field.md,1685733005911,10eb65af955077f932c0d9bca8a3686025f12b96695b35327c4aa85986c449ff -exercises/4-display-task-locations.md,1685733005911,d5b88507120be07c0fd32f095e2f1d5a89a157eea4444b7f0ac39c60386613a9 -exercises/final-code.md,1685733005917,f0cbdb705a4c89f6de0561e5c2de3357669770434e2d3aac39bb4fbbeb459dca -exercises/index.md,1685733005918,ef34e070f1823261485d83a3bebd497d7905e490a5e9554816dccc6f9c7264fb -getting-started/1-create-app.md,1685733005920,3f7d5bc02d00af86086d9faf0f1d105cfc10afc6a0a44bb199050918eac9cf28 -getting-started/2-edit.md,1685733005921,4e0a45fea6d6f2bf05ade431f85ae0d850896454e14a70dd6e293ffcbc02ebf9 -getting-started/3-ensemble-syntax.md,1685733005925,1a87e4b3764feb4a9c19c8fba557d3765321546386e3afaed6c5744584eb8ba2 -getting-started/4-form.md,1685733005925,939bd2681175d0a483e014e0163dfe2cf2d8fd35f94e2741496083401bf865f9 -getting-started/5-actions.md,1685733005926,f1cdaaececbcac48432a4a86bdfe7d6ba70c092a24c561d32634953e53af2ac2 -getting-started/6-code.md,1685733005927,3a13a6ff594dd5fa6a350df55d332d70bf9dd7a2935259850e0d0970c1137c4d -getting-started/7-storage.md,1685733005928,f2ac980521dd3c7cc7f4d2fe28aca9b0c78350302b693b999baf2944a2dcf13e -getting-started/8-item-template.md,1685733005928,ae35f8603c1e2035514f4732d5316f364db4baff08aa36e128d4e43c9a00e0c9 -getting-started/9-styling.md,1685733005933,1fb537632762da19b950d1c5a7974c796097011c0ce349e82f6c5e2b83f3350f -getting-started/home.md,1685733005934,5f50d295974c103cf051551878e79949a34dd2c8a77d709e189dafdb25e9224e -images/app-qr-code-example.jpg,1685733005936,1135a867d4b908d4f2edaee789bf69e390be04dd4fbdb571715e211e1635b8a5 -images/app-qr.png,1685733005938,a06d943365952546b68669a97deb36ce0dbf426576f90341145e43b5fabcfdaf -images/build_extend_env_config.png,1685733005939,403dd1b0edaa197f0edce6c0ee11d0059969f0043dad44cf259a30915e9f4a16 -images/build_extend_env_usage.png,1685733005941,cc0c861b9d4008f8128325eaf72a0972654535575eb793e191ca6aa05fcffdc1 -images/deploy_ios_0.png,1685733005944,cbbbc0c9823cbf996ea9d00dc3c2e5c0965c4bb7a67345c7d967a452a944e82c -images/deploy_ios_1.png,1685733005946,197619bdbd01baa039e40db4afd176ac24bf58cf7ce75c2d80cea2d4dfba36f0 -images/deploy_ios_2.png,1685733005949,92b4a1b9354565c761c72053519c3f7aa5d44d290576694b24dbd55fe42c6787 -images/deploy_ios_3.png,1685733005953,cba61c43f529cd3013de567a87688916fe03fbba58ee411e5fa2bd372ea4600a -images/deploy_ios_4.png,1685733005955,f755f8fdd4b884e8a19c044f0068ea17f4d89ce65c48a4c21a4a1f04eeaf19f4 -images/exercise_0.png,1685733005964,f4737735f39a4f7cbd351cfda063cf802fc64330b75b19e1a1de08f4f472290c -images/exercise_1.jpg,1685733005965,9fc6b4d334cea7c2c13b1e59cf05c8d247642f7d8b13895c8ce3de948e60a6ac -images/exercise_2.jpg,1685733005966,92fcc3c69208ca108418a397ca71fafa74eb255cd529607c820bf77ee04325b6 -images/exercise_3.jpg,1685733005967,a96277224f5ac4d81e71f6cbb58aaf29d2be0dc0f7e19d5d54ae544a2f905a87 -images/exercise_4.jpg,1685733005968,305c0f62d2839501a59c51ca7bc5cbe820f11de63507e4339614b09792f74d9d -images/favicon.ico,1685733005969,14e71e603a59e407b56f059fa3d7dea358abe039981020e1c2d75849f57e37d2 -images/get-web-preview-link.jpg,1685733005969,b208dfbdc8092573309a4a4c1af09ddbc7cab75c7bbe6d6601878b180a9ec5f4 -images/gs1.png,1685733005971,cc216d1fcf35ad051ad9710f3619f9208e97e666db1d177b97a923d673ed9312 -images/gs2.png,1685733005973,8e485e4d92e64935a6b5ee3eb6f0d9f48315acfb642aba22cf05e9ee49537b84 -images/gs3a.png,1685733005980,6b3060d9ca854221c92ac33a4a0db490d52cb675225f2f0498b6391ce017942f -images/gs3b.png,1685733005982,ebbce560c9d744fa2dcc0c4d9cf258caf96630d2a03bec2552ebac80116689ee -images/gs4.png,1685733005984,b9046913185e8a3946bdaba91c98b0aac94d4a4195b97f92a30ee0dc1fdd0dc2 -images/gs5a.png,1685733005986,b227f3879094e5d450946a248e3eb11483ef37bb8e768068745d038541ba2393 -images/gs7a.png,1685733005988,506fe21e95d600ced1f07337b80633b8fe5a0063fadf3f2ebe66b3a5a1e300d6 -images/gs7b.png,1685733005990,42b55bf053ec47553a4db30e7db237a9c69b97b8ab41d13317c91170bc2f535c -images/gs8.png,1685733005992,5ae2e308a794d2d07a5b2d471bd357efd35924a18db30ad560d21297ea5b01cb -images/layouts_0.png,1685733005994,fa86363c8c13b6bc576f566a43b8cd0d4a6b39331da02abbe2ba654b9d967510 -images/logo.svg,1685733005994,01fb1ac2e5fd8e609a317925dba5ccdf81e27f78a9930893e4b537729849d05b -images/page_structure_0.png,1685733005995,a0e80c9fa0090215c584a03769da266c1512fcb9a2eca2f55a9bd570cbf7ce1d -images/page_structure_1.png,1687557591242,d97aa1fce294818c583de5effb075c25cff910f005b1a16412353b8331f38379 -images/todo_app_1.jpg,1685733005997,3b2a84bc85659823b2b991a658d169eae398e189580a39c4d76a1779b165b900 -images/todo_app_2.jpg,1685733006000,3403f5258d71cd9a8d72c2d7af33a5c097e7c59ae434e534a6eef73864051f17 -.git/objects/3f/5f98da7dc4e71b9ea592a45584a8e7cd000d62,1687878286116,669175ecc054f67027fe4c00a0949e32e683465fd0817418dec5d9a4076caac9 -samples/kitchen sink/Button.md,1685733006003,cf8a9124da0f135354d61cdf0715c76106e97d86afcb23d6ab83b4046a75b960 -test/1-preview-app.md,1685733006003,4c9593e4cc1e6d4bb5347ca0c403678009ae74ae1614381bcb1eb3ed108ddc1a -widget-reference/button.md,1687541231738,c1b013cecc37249deb8eb5376c9979acad77dddc8f4279807bf62e4f275609ba -widget-reference/carousel.md,1687541231740,826cc59605873a3203626ec32da5cdde40e2d2002d16d71c7bc5522ac27a0e53 -widget-reference/checkbox.md,1687541231741,8076907f271155f20abc010f3aed8ed52c2f279e6091e564d3f9d3db92d4ad41 -widget-reference/column.md,1687541231743,669daa37c63933087ce4381ffeefbf9ece09fb27c70f36ac58b52bdedc8e552f -widget-reference/datagrid.md,1687557591245,7252440295460df4509e6db6ce8e0d48744c3581a79f81bc650994dafe176223 -widget-reference/date.md,1687541231746,96864a1710cc6b3d8caea4bae738cd7d2754644dae9c2d0ecf2da324a869af6c -widget-reference/directory.md,1687541231747,6635b56640c3bb2835412c2a87c801bd4a35eded17b300089faab6a06cff2c06 -widget-reference/divider.md,1687541231748,fb16ceb8d27cf8a1c6c77bd9b8c3729085ba2f71183553f908dfccd6ada02971 -widget-reference/dropdown.md,1687541231750,926c4e526bf874597ddde444a180d322501a5e02bca16d0065ac1e131b1102c1 -widget-reference/flex.md,1687541231752,4345ea278998fcd51d7ee2be057692d8210818ae1a1ff8813948269b9d08ea10 -widget-reference/flow.md,1687541231754,e8582d3b95d7489d79ac72fabcbfd72921c84f26429489a9682dce2eb878fc6a -widget-reference/form.md,1687541231756,cf54c069f5e44bc638f745781ed97b1d6c05a99576a41cea60895e96301a0a6f -widget-reference/gridview.md,1687541231757,29ca8083013d6e3473039886d8acdcde12543fd3e40228e68ffb7e7c89624386 -widget-reference/html.md,1686836699043,268bca201a3bc2779374251195446d991bcdc4c63fb625b5968659d1ba6c245a -widget-reference/Icon.md,1687285222408,2312139d2e35948e17670f05078badd160bbe7bf1296d860e793bd22df82ef70 -widget-reference/Image.md,1687285222408,43ec0aa5445014dc31c6fda2a0dc15c6061ce063cbdb03fd055e55c83c903729 -widget-reference/listview.md,1687541231759,d94a06c2c280716163b31465d46354659acc4dc1d0ee775190c37c7086ef2f0c -widget-reference/lottie.md,1687285222414,297ba029b82e046d95773b4541c6822287b1fc2ccdde8b6a22d37317f4df99b0 -widget-reference/Map.md,1687285222408,3c9f1cc3fd55aa6942b30324481a8fa42f0a9c20325b3b5dc1c852f917018820 -widget-reference/markdown.md,1687285222414,5ffe0017b1cdd02b923d7ba2583cd51e0865f7a3e00811aea15dd5e28d9e07be -widget-reference/passwordinput.md,1687557591246,57c18a4b0225dc15c3c6aaa56ee9a0dda4bf461cbde4e1a8590b73c9858c5fd6 -widget-reference/progressindicator.md,1686836699047,3cfcdc30728860ef62c969f70ca4113f0a0e8ac1a7bda09c3286d34cef6c420c -widget-reference/qrcode.md,1687285222419,39756152ed0c95e4b45c34ad55f284504ffb7397ca3e2c53171d1552edaf2479 -widget-reference/row.md,1687541231761,fa5209dc355b152e365d27629140d38740adf1c89b7e337fe6c045208eb26460 -widget-reference/spacer.md,1687541231762,f9fb16eaad345de4d31d43712a1916bed89a64a28df58159fc513eb1bcf7b08a -widget-reference/stack.md,1687541231764,d8f02595dea730c2a9ac5dc369d25e619b0c98230ca9be6395ef648900d600bd -widget-reference/switch.md,1687541231766,97b360dc03f738acd5eca9e3bcd4d4247c18affaebdfa6a7defc5855bdc6694d -widget-reference/tabbar.md,1687541231768,88db2a97606aab135c88bd6c0f32cf3dfa683ee7d30b26058292d5d8076554d1 -widget-reference/text.md,1687285222419,de4bae2e3a5578e139ac37eb7423222f520901106eed530193cfbff6bc1b70d7 -widget-reference/textinput.md,1687541231769,e639eab1aeca267532cec4c3bca32b7f60c043a472bbbe94d9ed44dc7a4ce90a -widget-reference/time.md,1687541231771,0adba07f363768b5fe113da276dca19c3773a854b7487eb8df668cf05fca5c07 -widget-reference/video.md,1686836699056,d045faa289006e993e64a255e18d43c7f2c55dc7f05613c62e1a5c5408248f6f -widget-reference/webview.md,1687285222423,14bc709a9e660031d4a8b6d770520b237ccbdb148785d5f2ae0967e8b561568a -.git/objects/3f/b83cfe286f8032cccdefd3ef8aaae35490c928,1687859703591,cf1cb31ad8cb97921135614c6cedb94ff52341f16995f0e879a3fd9db6a3c7bc -.git/objects/4b/508f76e1b933ce08e2ce4c96f7936236c442fa,1687859571490,76eff60e5e01a8d97f96bc6b85ba6e00dac49120be16bb5d7096c6480d7261f5 -.git/objects/3c/7b4a29b1c6a2f4d651177f43c21f72e2811a93,1687859571488,33dd2ce4d7bfd073671447fc2143c41a86987eb0fe0c28899d68927c8845e5cb -.git/objects/59/9f32bd0921d904afe1a571f954dcb8762435a3,1687859571645,4f58fbbc1274ac19614985eeed1d56d14293e84e6bbf873cd1c42b5d46aa8dc0 -.git/objects/51/7ecf71506270508937880cea4486c211cdefdf,1687859571702,f32666ca521771c45e501465950e68a4747018154bb8f5e131cd44a701e8f9b9 -.git/objects/5a/7d2c586cd15b6030a0b47192d5897f0b88dfa2,1687893040176,7a5eaea324b574bf81469cdfc2940f338477916d786dc05353f434ac5f2425a1 -.git/objects/5e/b3a98ce29ee6eeb3d7138a89e298093012551a,1687859703593,e6470b2f8f80d1dd7e8897f33d5c3f1646767979604a6d51af563724e4db7e40 -.git/objects/67/919df23780479019e630fec96eb32305aa2fab,1687859571718,78881fa43f45e20c15c711947705d5f712fb14a1486623b9c7acab9c41ef53c6 -.git/objects/72/468a907b4f3f3266683b6030e211da698afe32,1687859631982,93decc86277c5da0117a03ac06728856333c1f31699aa772a0b955781f01aebe -.git/objects/6d/a4f7a9ff0e2a59e26b16c52aa92b74ac637f1e,1687859593848,5cf33ddd147627ef129077047f1079257bead84565c1e1817706a1b5b25883b0 -.git/objects/75/4c5620f1019e051a2559c05afeb9af387b7597,1687893007551,5765b4390922f14ce01a5a1718024e89cf7f0dbdbdd33c828cbdfe278e1cfc13 -.git/objects/72/a767d37c8fa6027fa92d3289bf909d338f4868,1687859703632,d55fbd92d93c301788e8ace116bb8a2334717a07c1646f7651cf55e5c2660211 -.git/objects/86/a65099ac3fc9c505bc86b79c9b3052c46482e4,1687893657597,0e0cf6c650e8fce9767836b3fbbdcc63989923f70859665697b90f52fad98ef2 -.git/objects/82/9eda8fdcf133ab2083dbc880b6362b11d0c8ea,1687893642542,31e710a359907986259a4a426ec018940b6c7e63aa8d211739358203c2752c8b -.git/objects/8b/80079072555fa9d0a11b1827b9f637db4d0767,1687893655164,c034e2e0b19730bd5586f235e3a34a8330ac956c24f8e788769084e3d96ad494 -.git/objects/92/b6e851c0ec3f8698b7900f1998bc2a3a357854,1687859703606,81648400d54c38072107c3c8e5bd99c8c5f445611cd19a73ae68412fd1a30f2d -.git/objects/9a/3965902dba4dc45015880a2b890471ebd5061e,1687859631983,6349166b4d4e07603ad25add1e35c21fb73fab43fc19e9434657977dbd298405 -.git/objects/1c/491e0063e9cbd274d4fbb983ce7d28c37943fd,1687893556177,523d9b32ea19038e1211073f6176f23d939722084445a8385aed62dfe0ef053d -.git/objects/a2/87a7eab21cab32ab726268d55a70fc3c9fe2ac,1687893040151,7a96ad09a14e84c28d7797e48da2b250bb0ddb0fac465d0e1669a988e3489b46 -.git/objects/97/0d9acfc5b612197a75386dc0f4fe7c082d2ef6,1687893007542,8f8936c18ec508c46111cf1577fb8a323a3cc13ff120eff5af4a9845b631d83c -.git/objects/a8/45d37defc6b3dd3daf52c6f78f4a4fa6c316df,1687859571489,b438f33ea353b162466cf93d36dbf2e70d2eefcb66e43aa83495de424f4fb0a9 -.git/objects/c0/fc8235aac416e100f887496ce5ae1e530d59ca,1687859631984,72bdfa66156f0224689fb0ea174b593c4fb381c8d2d1ad4df3ba5cfcdd8617aa -.git/objects/ad/eb48b13e05e06d5af2dade1404f1d10be48478,1687859571711,4e1df4fd3fdd33cf11724e34b2e693f2fe2b3ea4d8629f8ab6609ed5023fe809 -.git/objects/ab/af75798fef7d5df25b9d914ef142178c273ec6,1687859703620,493654e682b1b086aa27a4873f570b8bb74dc1c4336a5fdcd3ce0cc27ad4af51 -.git/objects/c6/f823a83634b49336cb816656896dfe15455d81,1687859571713,c467d66a669ae6cf8d15d560950acd4aa94374f29549acd81f92040c8d1c659a -.git/objects/c6/657534b03123c790cb3414918989995f378b66,1687893246002,1cde416131708b4250e578bef8d9b7045511dbd77450bbd50efc2c521cc338b9 -.git/objects/ab/dae53b15897d0c559fbf2208e85090434bd320,1687859571494,0d09338f65cacf160d67e1b0d00170e546fd3a3852f53d28844c811196fbc493 -.git/objects/d6/7ee18403be9463dc279610d2d926eccfb10355,1687893040161,60556985c978701151bed1c4226c5369e33df3117bc69a72eacad2e2c0a22557 -.git/objects/d9/c93cfcd0eba258c771c09d8fea850a3ce1c6bd,1687893007556,454adfbae1ddd18ee380d92050a3cc4782d86b204d3f1d94cd6b08f3c2bfab15 -.git/objects/ce/55554130d6cef065ccac47f13f4662199c84b9,1687859571714,4ff5477ca4757f2955a161c1147d4691c6982e1430a01ccc7566d447c5563e49 -.git/objects/e9/3b374f74b1aef1cb0bca91b2f1ea74dbe7903e,1687859703591,7ee1b634821dd8bebfc2935e266eb5c1b3b930bcfc0d91e3aca1f250bd66962c -.git/objects/f0/1aac12ab7092064ce79fffee41592b25cb6f13,1687859571630,eea9060e7352d4c8a2445c913d761e7a5a9d57901991c4f7a698046fd8fd5853 -.git/refs/heads/docs_update,1687893040211,aac4dd8b5df8f78e1b8c9a3e360eacdc322a67bd7fe9225490bb3e927e481aa7 -.git/refs/heads/firebase-deployment,1687893661097,2b88646280806ae52ad3527bb0f721242e5ab8012950a58d7ac60eba60ea9f1c -.git/objects/f8/c126d7a8163122ebb46dd4683dc56964e32d3a,1687859571703,fd1576f7bd8aa304efa085d538183b1d5408f3ba74471bce8b4b0d6d21cc7ebd -.vscode/settings.json,1687893245677,e2d530ec19cc10e45be727b1dad322ff5b1b39cb76e70afe6ecedab4c80fb4d6 -build/user-interface/image-1.png,1687893245682,747c5d0fcbfebc3a450b419a9d59675bd2a4b9bd1e2a8d58c0c6369693b7f3b6 -build/user-interface/image-2.png,1687893245682,e60f3fa141da9c3137ebd31826947ae5e674a961a948f694af4d83a1c82a9543 -build/user-interface/image-3.png,1687893245682,7700f7c82db37d366a4f4ffe682c5a5776191ff0c6e3d7e663207d7197ac1aa0 -build/user-interface/1-page-structure.md,1687893245677,73d466f72a5a0709125b47f1238208f4107fac1076d4fbb909eb50ec68cb198f -.git/refs/remotes/origin/main,1687878286161,dfea3e2310f77d43e8d9c7d620d5dbc32509a481a094acb1cc91683fb5d452a3 -.git/refs/stash,1687859571731,a15273ae9eaed77f965d01ef0049e58f912cc19b2447c46078a961dcfd9aaae2 -.git/objects/b1/7f56e1ee464083f6b535a38e2619aec0ab66ee,1687859631982,b2f8a535617cfc5da522537bb09e7accc7c8e65cd3e76f955559285c575df20b -public/404.html,1687893246138,3240c6b45513fdd97861a63c8ae3ef0e7d2bf1357ec632ad7e6839473710326c -.git/refs/remotes/origin/docs_update,1687893061447,aac4dd8b5df8f78e1b8c9a3e360eacdc322a67bd7fe9225490bb3e927e481aa7 -.git/objects/e0/b7ea36ae7ccbf876d5e70f51b8721a4b80e9e7,1687859631983,60da98f5f99e1867aa320c342fe4bc57427de8513593c9039db74f94adbfe083 -build/user-interface/image.png,1687893245701,6003b57a26cbf911931814df796af07cccbf5c889b4c25352a61ae5e6d0e230e -.git/objects/75/7d80d5098ea560e1f37726228411b6b7eb8cf3,1687893007581,fe1836790039b6cb5c8cfe6e6cb7812ffc827e40faeb49e18d61cbc7d29622fd -build/user-interface/image-4.png,1687893245696,90c2da53767c0691fa456bd046d4009777881981a60896234c26006729ca8769 diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 23bfbbc..0000000 --- a/.gitignore +++ /dev/null @@ -1,14 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# dotenv environment variables file -.env - -.DS_STORE -_book/** -node_modules -.idea diff --git a/.nojekyll b/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 72468a9..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "cSpell.words": ["bottomnavbar"] -} diff --git a/APIs/access-api-response.md b/APIs/access-api-response.md deleted file mode 100644 index 62653ae..0000000 --- a/APIs/access-api-response.md +++ /dev/null @@ -1,186 +0,0 @@ -# Access API response body and headers - -You can access an API response through: - -- **API name** set when defining the API -- **API ID** set when invoking the API - -When invoking the same API more than once, the API name will point to the last instance of the API request. If this is not the desired effect, use an ID instead. - - -## Basic GET example - -Here, we use the API name to access the response body. In EDL, expressions are wrapped in `${}` so that Ensemble runtime evaluates the expression. In this case, the expression is referencing the API response body. - -```yaml -View: - onLoad: - invokeAPI: - name: getUser - body: - Column: - styles: - padding: 40 - children: - - Text: - text: ${getUser.body.firstName} -API: - getUser: - uri: https://dummyjson.com/users/1 - method: GET -``` - - -## GET array of data and display using a template - -An API response could include an array of objects that the app displays using an `item-template`. Any widget that supports `children` property also supports `item-template`. - -```yaml -View: - onLoad: - invokeAPI: - name: getUser - body: - Column: - styles: - padding: 40 - item-template: - data: ${getUser.body.users} - name: user - template: - Text: - text: ${user.firstName} -API: - getUser: - uri: https://dummyjson.com/users/ - method: GET -``` - - -## Using ID to access API response - -When invoking an API, optionally you can assign it an ID. Use this ID when you invoke the API multiple times to access each instance. Here are few examples: - -### 1. Invoking different APIs based on a condition - -The name of the API you invoke could be set based on an input so that you can add conditions on what API to call. In this scenari, you need to use an ID to refer to the API response. - -```yaml -View: - onLoad: - invokeAPI: - name: getMatches - - body: - Column: - item-template: - data: ${getMatchess.body} - name: m - template: - MatchInfo: - inputs: - id: ${m.id} - api: '${m.status == "Finished" ? "getPastMatchDetails" : "getUpcomingMatch"}' - -MatchInfo: - - # use the widget inputs to invoke relevant API and pass the required inputs to the API - inputs: - - id - - api - onLoad: - invokeAPI: - id: matchDetails # use this ID to bind to this API response - name: ${api} - inputs: - id: ${id} - body: - Text: - text: ${matchDetails.body.title} - -API: - - getMatchess: - uri: https://dummyjson.com/matches - method: GET - - getPastMatchDetails: - inputs: - - id - uri: https://dummyjson.com/match/histpry/${id} - method: GET - - getUpcomingMatch: - inputs: - - id - uri: https://dummyjson.com/match/info/${id} - method: GET - -``` - - -### 2. Invoking the same API multiple times - -In these scenarios, the API name, e.g. `${apiName.body...}`, will point to the last instance where that API was invoked. In contrast, the ID will ensure you are referring to the correct instance of the API response within your widget tree. - -Let's consider this scenario: - -1. The app fetches a list of people -2. For each person, the app makes a separate API call to get that person's company info - -```yaml -View: - onLoad: - invokeAPI: - name: getPeople - - body: - Column: - styles: - padding: 24 - children: - - GridView: - styles: - expanded: true - itemHeight: 50 - item-template: - data: ${getPeople.body.users} - name: p - template: - PersonCard: - inputs: - name: ${p.firstName} ${p.lasstName} - company: ${p.company.name} - -PersonCard: - inputs: - - name - - company - onLoad: - invokeAPI: - id: thisCompany # use this ID to refer to bind to this API response - name: getCompanyDetails - inputs: - company: ${company} - body: - Column: - children: - - Text: - text: ${name} - - Text: - text: ${thisCompany.body.name} - -API: - - getPeople: - uri: https://dummyjson.com/users/ - method: GET - - getCompanyDetails: - inputs: - - company - uri: https://dummyjson.com/companies/ - method: GET - parameters: - name: ${company} -``` \ No newline at end of file diff --git a/APIs/bind-item-temp.md b/APIs/bind-item-temp.md deleted file mode 100644 index 7cd75ba..0000000 --- a/APIs/bind-item-temp.md +++ /dev/null @@ -1,30 +0,0 @@ -# Binding APIs to Item Templates in Ensemble - -When developing user interfaces, it's common to display lists of items, and Ensemble simplifies this process by providing the item-template property in the YAML syntax. This property can be assigned to container widgets like Column or Row and is particularly useful for binding API responses to data-driven UI elements. - -`item-template` takes the following properties: - -- `data`: This should point to an array of data. -- `name`: Set this to a value to reference in the `template`. -- `template`: This is where we define the widgets to render for each item. - -| Property | Type | Description | -| -------- | ------ | ------------------------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | widget | The data row widget to render for each item, it can be a custom widget as well. | - -```yaml -item-template: - data: ${getPeople2.body.results} - name: item - template: - Text: - text: ${item.name.first} -``` - -The `data` property of the item-template is bound to the results of the getPeople2 API call (${getPeople2.body.results}). -The `name` property is set to "item," serving as a reference to each item in the array. -The `template` property defines the structure of each item in the list. In this case, it's a Text widget displaying the first name of each person from the API response (${item.name.first}). - -This setup uses the API response from getPeople2 to dynamically generate a list of Text widgets, each displaying the first name of a person from the API response. \ No newline at end of file diff --git a/APIs/call-api.md b/APIs/call-api.md deleted file mode 100644 index da1f509..0000000 --- a/APIs/call-api.md +++ /dev/null @@ -1,112 +0,0 @@ -# Invoking APIs, aka calling APIs - -Use `invokeAPI` action to call the APIs you defined. Here are the properties of invokeAPI: - -| Property | Type | Description | -| :--------- | :----- | :------------------------------------------------------------------------- | -| id | String | Give the API an ID allows you to bind to its result. e.g. ${apiId.body...} | -| name | String | Name of the API defined in the API section | -| inputs | Object | Key value pairs ofinputs to be passed to API definition | -| onResponse | Action | The action to handle the response | -| onError | Action | The action to handle errors | - - -invokeAPI can be passed to any event, such as `onLoad`, `onTap`, `onPullToRefresh`, ... using EDL or code. - - -## invokeAPI from EDL - -```yaml -View: - onLoad: - invokeAPI: - name: getUser - body: - # screen body -API: - getUser: - uri: https://dummyjson.com/users/1 - method: GET -``` - - -## invokeAPI from code (Javascript) - -```yaml -View: - onLoad: | - ensemble.invokeAPI("getUser"); - body: - # screen body -API: - getUser: - uri: https://dummyjson.com/users/1 - method: GET -``` - - -## Pass inputs to the API - -A common interaction is to pass user provided info from a form to an API. To achieve this, set API inputs by binding to form values. - -Using EDL, set `inputs` property of the `invokeAPI` action. - -```yaml -View: - body: - Column: - styles: - padding: 24 - gap: 8 - children: - - TextInput: - id: productName - label: Product Name - - Button: - label: Submit - onTap: - invokeAPI: - name: addProduct - inputs: - productTitle: ${productName.value} - -API: - addProduct: - inputs: - - productTitle - uri: https://dummyjson.com/products/add - method: POST - body: - title: ${productTitle} -``` - - -Using code, pass `inputs` as an object. - -```yaml -View: - body: - Column: - styles: - padding: 24 - gap: 8 - children: - - TextInput: - id: productName - label: Product Name - - Button: - label: Submit - onTap: | - ensemble.invokeAPI("addProduct", { - "productTitle": productName.value - }); - -API: - addProduct: - inputs: - - productTitle - uri: https://dummyjson.com/products/add - method: POST - body: - title: ${productTitle} -``` \ No newline at end of file diff --git a/APIs/chaining-apis.md b/APIs/chaining-apis.md deleted file mode 100644 index 24d99c9..0000000 --- a/APIs/chaining-apis.md +++ /dev/null @@ -1,29 +0,0 @@ -# Chaining APIs - -Chaining APIs, also known as making sequential API calls, is a practice in app development when you need to retrieve and use data from multiple sources in a specific order. Chaining APIs allows you to build more complex workflows and gather the necessary information for your application. - -```yaml -onLoad: - - name: getuser - onResponse: - - invokeAPI: - name: getcurrentUserContacts - - invokeAPI: - name: getExtendedNetwork - - invokeAPI: - name: getinviteLink - - onResponse: - - invokeAPI: - name: getcurrentUserProperties - - onResponse: - - invokeAPI: - name: getseekingPosts -``` - -**Sequential API Calls:** -The onResponse event for each API call specifies the next API call to be made after the current one is successfully completed. -For example, after the initial API call named "getuser" (assuming it's defined elsewhere in your YAML), the onResponse event triggers the "getcurrentUserContacts" API call. -Similarly, the subsequent API calls ("getExtendedNetwork," "getinviteLink," "getcurrentUserProperties," and "getseekingPosts") are chained together using the onResponse events. - -**Nested invokeAPI:** -The invokeAPI action is used to make API calls. Each invokeAPI action is nested within the onResponse of the previous API call, forming a chain. \ No newline at end of file diff --git a/APIs/define-api.md b/APIs/define-api.md deleted file mode 100644 index a23234f..0000000 --- a/APIs/define-api.md +++ /dev/null @@ -1,75 +0,0 @@ -# Define APIs - -You define APIs by adding the `API` section to any screen. Note that `API` would be at the root level of the document, i.e. as a sibling to the `View`. - -```yaml -API: - myFirstApi: # a new to refer to this API later - inputs: # specify an array of inputs the API expect. You can reference the inputs in the other API properties, such as the body - uri: # the endpoint to call, e.g. https://dummyjson.com/users/1 - method: # the HTTP method, such as GET, POST, PUT, DELETE, PATCH - parameters: # set the parameters to be passed to the API - headers: # set headers such as authorization tokens - body: # set body, in JSON or YAML, to pass data to the API - onSuccess: # fire an action when the API returns a 2** - onError: # fire an action when the API returns a 4** - - # add more APIs as you need - mySecondApi: -``` - - -## GET call without authentication - -For public APIs that do not require authentication, you typically need only the URI and the method. - -```yaml -API: - getUser: - uri: https://dummyjson.com/users/1 - method: GET -``` - -## GET call with bearer token - -APIs might be secured by requiring a token. This token is typically passed as a header parameter named `Authorization`. - -```yaml -API: - getUser: - uri: https://dummyjson.com/users/1 - method: GET - headers: - Authorization: "Bearer <>" -``` - - -## GET call with API key - -Some API providers would issue keys to their customers. Typically, the API provider would require the key to be passed a parameter. Check with API provider documentation on what the name of this parameter is. Here, we use `apiKey` as an example. - -```yaml -API: - getUser: - uri: https://dummyjson.com/users/1 - method: GET - parameters: - apiKey: "<>" -``` - - -## POST call with data - -Typically you use POST calls with a body to pass data from the frontend to the backend. You can specify the body of the API, and use inputs to pass them dynamically. - -```yaml -API: - addProduct: - inputs: - - productTitle - uri: https://dummyjson.com/products/add - method: POST - body: - title: '${productTitle}' # example of a dynamic data that is set based on the inputs - source: MyApp # example of a static data that is always passed -``` \ No newline at end of file diff --git a/APIs/graphql.md b/APIs/graphql.md deleted file mode 100644 index cbb3f48..0000000 --- a/APIs/graphql.md +++ /dev/null @@ -1,47 +0,0 @@ -# GraphQL - -Use Case (Social Media): GraphQL is particularly beneficial in scenarios like social media, where large-scale data is involved. It allows clients to request only the specific data they need, leading to quicker response times (1-2 seconds). -Efficiency: GraphQL enables clients to specify the exact data they want in a single query, reducing over-fetching and under-fetching. - -```yaml - inputs: - - GQLInput - uri: ${env['graphQL_URL_'ensemble.storage]} - method: POST - headers: - Authorization: Bearer ${ensemble.storage.token.exp_token} - ContentType: "application/json" - body: - "query": |- - mutation UpdatePost($input: CreateUpdatePostInput!) {} - "variables": ${GQLInput} -``` - -HTTP Method: -GraphQL APIs typically use the HTTP POST method. In your example, the method is specified as POST. -```yaml -method: POST -``` - -URI (Uniform Resource Identifier): -The URI is typically a single endpoint for GraphQL APIs. In your example, the URI is parameterized with an environment variable (assuming graphQL_URL_ensemble.storage is provided at runtime). -```yaml -uri: ${env['graphQL_URL_'ensemble.storage]} -``` - -Headers: -GraphQL API requests often include headers for authentication or specifying the content type. In your example, you have headers for Authorization (Bearer token) and ContentType (set to "application/json"). -```yaml -headers: - Authorization: Bearer ${ensemble.storage.token.exp_token} - ContentType: "application/json" -``` - -Request Body: -GraphQL API requests use a structured query language in the request body. The key part here is the "query" field, where you define the GraphQL query or mutation. In your example, you are using a mutation called "UpdatePost," and the query is parameterized with ${GQLInput}. -```yaml -body: - "query": |- - mutation UpdatePost($input: CreateUpdatePostInput!) {} - "variables": ${GQLInput} -``` \ No newline at end of file diff --git a/APIs/index.md b/APIs/index.md deleted file mode 100644 index ffcac02..0000000 --- a/APIs/index.md +++ /dev/null @@ -1,41 +0,0 @@ -# Interact with APIs - -The primary mechanism for an Ensemble app to interact with the backend is through APIs. - -- [First, define the APIs you want to call](/APIs/define-api.md) -- [Call the API](/APIs/call-api.md) on events such as onLoad or onTab -- [Access the API response](/APIs/access-api-response.md) -- [Handle errors](/APIs/on-error.md) -- [GraphQL example](/APIs/graphql.md) - -## 1. Define the API - -First, define the APIs you will be calling from your app. You can add this section to any screen. Note that `API` would be at the root level of the document. - -```yaml -API: - getUser: - uri: # the endpoint to call, e.g. https://dummyjson.com/users/1 - method: # the HTTP method, such as GET, POST, PUT, DELETE, PATCH - headers: - body: - onSuccess: - onError: -``` - -**invokeAPI** is used for calling an API. You can call an API on events such as a button tap or on screen load. First, you have to declare an API. Use the `onLoad` property of the view. - -````yaml -View: - onLoad: | - //@code - ensemble.invokeAPI("getPeople"); - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Text: - text: ${getPeople.body.results.length} records were retrieved from API -```` - - diff --git a/APIs/on-error.md b/APIs/on-error.md deleted file mode 100644 index 8f84db9..0000000 --- a/APIs/on-error.md +++ /dev/null @@ -1,21 +0,0 @@ -# onError - -When making API calls, it's crucial to handle errors gracefully to provide a better user experience. When invoking an API, `onError` event is dispatched when the response is a not a success. - -```yaml -View: - body: - Column: - children: - - Button: - label: Call API - onTap: - invokeAPI: - name: createToDo - onResponse: | - apiStatus.text = 'Call was successful'; - onError: | - apiStatus.text = 'API returned an error'; - - Text: - id: apiStatus -``` diff --git a/APIs/rest-api.md b/APIs/rest-api.md deleted file mode 100644 index f431c7f..0000000 --- a/APIs/rest-api.md +++ /dev/null @@ -1,35 +0,0 @@ -# REST API - -Basic APIs: REST APIs are based on a set of principles, including statelessness, resource-based interactions, and standard HTTP methods (GET, POST, PUT, DELETE). -Dummy JSON: REST APIs typically return data in formats like JSON or XML, and they use endpoints to represent resources. -Response Time: REST APIs may have longer response times, especially when fetching a large amount of data. The client typically asks for specific resources using endpoints. - -```yaml -createToDo: - inputs: - - name - uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' - method: 'POST' - body: - records: - - fields: - desc: "${name}" -``` - -HTTP Method: The API configurations explicitly specify the HTTP method as 'POST', which is a standard RESTful practice for creating resources. -```yaml - method: 'POST' -``` - -Endpoint (URI): The URI (Uniform Resource Identifier) is provided for the Airtable API, and it includes information about the base (appDbkGS4VOiPVQR5) and table (ToDo). This follows the RESTful convention of addressing resources. -```yaml - uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' -``` - -Data Format: The data payload for the POST request is structured in a way that aligns with typical RESTful practices. It uses a JSON format to send the data to be created. -```yaml -body: - records: - - fields: - desc: "${name}" -``` \ No newline at end of file diff --git a/CNAME b/CNAME deleted file mode 100644 index 139b66f..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -docs.ensembleui.com \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 33aca53..0000000 --- a/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Ensemble Documentation - -This repo contains Ensemble docs hosted at [docs.ensembleui.com](https://docs.ensembleui.com). - -## Contributing to the docs directly on GitHub - -Because Ensemble docs are created directly from the markdown in this repo, you can use the GitHub web editor to edit and propose changes to the docs directly from your browser without any knowledge of git. To do that, find the markdown file with the docs you want to edit and follow [GitHub's instructions](https://docs.github.com/en/free-pro-team@latest/github/managing-files-in-a-repository/editing-files-in-another-users-repository) to edit and propose changes to a markdown file. Once approved, the docs will be updated immediately. - -## Contributing to the docs by forking this repo - -1. Fork and clone this repo. -2. Install docsify: `sudo npm install -g docsify-cli` -3. Startup the local docsify server with `docsify serve .` from the root of this repo. -4. Edit the markdown and verify your changes on the localhost url outputted from the `docsify serve` command. -5. Put up a pull request to this repo - -## Other Ensemble repos and links - -* [Ensemble Runtime](https://github.com/EnsembleUI/ensemble) - use this repo to report issues and feature requests for Ensemble's core runtime library -* [Ensemble Starter](https://github.com/EnsembleUI/ensemble_starter) - Ensemble Starter project enables you to run Ensemble-powered Apps and generate release builds across iOS, Android, Web, and desktop. -* [Roadmap](https://github.com/orgs/EnsembleUI/projects/2) diff --git a/_sidebar.md b/_sidebar.md deleted file mode 100644 index 903b238..0000000 --- a/_sidebar.md +++ /dev/null @@ -1,174 +0,0 @@ -- Getting started - - - [Overview](getting-started/home) - - [Create the UI for an app](./getting-started/1-create-app) - - [Make an edit](./getting-started/2-edit) - - [Ensemble syntax](./getting-started/3-ensemble-syntax) - - [Create a Form](./getting-started/4-form) - - [Handle events](./getting-started/5-actions) - - [Write code](./getting-started/6-code) - - [Store data locally](./getting-started/7-storage) - - [Display list of items](./getting-started/8-item-template) - - [Style widgets](./getting-started/9-styling) - -- Build - - - User Interface - - - [Page Structure](build/user-interface/1-page-structure) - - [Widgets](build/user-interface/2-widgets) - - [Layouts](build/user-interface/3-layouts) - - [Theme](build/user-interface/4-theme) - - [Animations](build/user-interface/3-animations) - - - Handle Data - - - [Local Storage](build/handle-data/local-storage/1-local-storage) - - [Interaction with API](build/handle-data/item-template/1-interaction-with-api) - - [Filter Data](build/handle-data/item-template/2-filter-data) - - - Authentication - - - [Social Sign In](build/authentication/social-signin) - - [Social Sign In with Firebase](build/authentication/social-signin-firebase) - - [Auth0](build/authentication/auth0) - - - Deep Link - - [Setup Deep Linking](build/deep-link/deeplink.md) - - [(BranchIO) Deferred Deep Linking](build/deep-link/deferred-deeplink.md) - - - [Define logic](javascript-reference/README) - - [Using local assets](build/local-assets) - - [Adding custom fonts](build/custom-fonts) - - [Application Secrets](build/secrets) - -- Test - - - [Preview your App](test/1-preview-app) - -- Deploy - - - [Prepare your app for deployment](deploy/1-prepare-app) - - [Setting up Social Sign in credentials](deploy/2-social-signin) - - [Connecting to OAuth Services](deploy/3-oauth-services) - - [Deploy to iOS TestFlight](deploy/3-ios-appstore) - - [Deploy to Android devices](deploy/4-android-device) - - [Deploy to Google Play Store](deploy/5-android-play-store) - - [Prepare for production](deploy/6-prepare-for-production) - - [Making your app work when offline](deploy/7-offline-mode) - -- Action Reference - - - [Index](/actions/directory) - - [closeAllDialogs](/actions/12-closeAllDialogs) - - [connectWallet](/actions/18-connectWallet) - - [copyToClipboard](/actions/17-copyToClipboard) - - [executeCode](/actions/2-executeCode) - - [getLocation](/actions/14-getLocation) - - [invokeAPI](/actions/1-invokeAPI) - - [invokeHaptic](/actions/23-invokeHaptic) - - [navigateBack](/actions/7-navigateBack) - - [navigateModalScreen](/actions/9-navigateModalScreen) - - [navigateScreen](/actions/8-navigateScreen) - - [notification](/actions/21-notification) - - [openCamera](/actions/3-openCamera) - - [openPlaidLink](/actions/21-openPlaidLink) - - [openUrl](/actions/4-openUrl) - - [pickFiles](/actions/16-pickFiles) - - [pullToRefresh](/actions/24-pulltorefresh) - - [requestNotificationAccess](/actions/19-requestNotificationAccess) - - [showDialog](/actions/11-showDialog) - - [showNotification](/actions/20-showNotification) - - [showToast](/actions/6-showToast) - - [startTimer](/actions/5-startTimer) - - [stopTimer](/actions/13-stopTimer) - - [uploadFiles](/actions/15-uploadFiles) - -- APIs - - - [Index](/APIs/index) - - [Define APIs](/APIs/define-api) - - [Calls APIs](/APIs/call-api) - - [Access API response](/APIs/access-api-response) - - [Handle API errors](/APIs/on-error) - - [GraphQL APIs](/APIs/graphql) - -- Define logic using Javascript - - - [Intro - Limitations, When and How to use](javascript-reference/README) - - [The `ensemble` object](javascript-reference/Ensemble) - - [String](javascript-reference/String) - - [Numbers](javascript-reference/Numbers) - - [Date](javascript-reference/Date) - - [Object and Array](javascript-reference/MapAndArray) - - [Globals](javascript-reference/Global) - - [Math](javascript-reference/Math) - - [JSON](javascript-reference/JSON) - - [JsonPath](javascript-reference/JsonPath) - -- Widget Reference - - - [Index](/widget-reference/directory) - - [Avatar](/widget-reference/avatar) - - [Button](/widget-reference/button) - - [Calendar](/widget-reference/calendar) - - [Carousel](/widget-reference/carousel) - - [Checkbox](/widget-reference/checkbox) - - [Column](/widget-reference/column) - - [Conditional](/widget-reference/conditional) - - [Data Grid](/widget-reference/datagrid) - - [Date](/widget-reference/date) - - [Divider](/widget-reference/divider) - - [Dropdown](/widget-reference/dropdown) - - [Fitted Column](/widget-reference/fitted-column) - - [Fitted Row](/widget-reference/fitted-row) - - [Flex](/widget-reference/flex) - - [Flow](/widget-reference/flow) - - [Form](/widget-reference/form) - - [Grid View](/widget-reference/gridview) - - [HTML](/widget-reference/html) - - [Icon](/widget-reference/Icon) - - [Image](/widget-reference/Image) - - [List View](/widget-reference/listview) - - [Lottie Animation](/widget-reference/lottie) - - [Map](/widget-reference/Map) - - [Markdown](/widget-reference/markdown) - - [PasswordInput](/widget-reference/passwordinput) - - [Progress Indicator](/widget-reference/progressindicator) - - [Profile Image](/widget-reference/profile-image) - - [QRCode](/widget-reference/qrcode) - - [Rating Stars](/widget-reference/rating-widget) - - [Row](/widget-reference/row) - - [Shape](/widget-reference/shape) - - [Social Login](/widget-reference/social-login) - - [Spacer](/widget-reference/spacer) - - [Stack](/widget-reference/stack) - - [Staggered Grid](/widget-reference/staggeredgrid) - - [Switch](/widget-reference/switch) - - [TabBar](/widget-reference/tabbar) - - [Text](/widget-reference/text) - - [TextInput](/widget-reference/textinput) - - [Time](/widget-reference/time) - - [Video](/widget-reference/video) - - [Webview](/widget-reference/webview) - - [Types Reference](/widget-reference/types) - -- Miscellaneous - - [External Screen](/miscellaneous/external-screen) - - [App Information](/miscellaneous/app-info) - -- [Device Capabilities](/device-capabilities/index) - -- [Tips and Tricks](tips-and-tricks/directory) - - - -- [FAQs](./faq) - -- [Limitations](./limitations) diff --git a/actions/1-invokeAPI.md b/actions/1-invokeAPI.md deleted file mode 100644 index 653295a..0000000 --- a/actions/1-invokeAPI.md +++ /dev/null @@ -1,230 +0,0 @@ -# Action: invokeAPI - -To check out examples of the invokeAPI action, go to the [Ensemble Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e546b0d8-3220-4217-bd5c-181118154073). - -**invokeAPI** is used for calling an API. You can call an API on events such as a button tap or on screen load. First, you have to declare an API: - -```yaml -API: - getPeople: - uri: https://randomuser.me/api/?results=8 - method: GET -``` - -### Usage examples of InvokeAPI - -Now to call the API on screen load, use the `onLoad` property of the view, there are two ways to call invokeAPI as well - -##### 1. Using ensemble invokeAPI action. - -
- - -````yaml -View: - onLoad: - invokeAPI: - name: getPeople - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Text: - text: ${getPeople.body.results.length} records were retrieved from API - - Markdown: - text: | - Here's the API response body: - ``` - ${getPeople.body} - ``` - -API: - getPeople: - uri: https://randomuser.me/api/?results=8 - method: GET -```` - -
- -##### 2. Using JavaScript code block to execute invokeAPI action. - -
- - -````yaml -View: - onLoad: | - //@code - ensemble.invokeAPI("getPeople"); - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Text: - text: ${getPeople.body.results.length} records were retrieved from API - - Markdown: - text: | - Here's the API response body: - ``` - ${getPeople.body} - ``` - -API: - getPeople: - uri: https://randomuser.me/api/?results=8 - method: GET -```` - -
- -- **Its similar to previous only that we are now using Javascript code block**. - -To call an API on button tap, inside the body add a Button with `onTap` property: - -
- - -```yaml -View: - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Button: - label: Call API - onTap: - invokeAPI: - name: getPeople - - Column: - item-template: - data: ${getPeople.body.results} - name: item - template: - Text: - text: ${item.name.first} - -API: - getPeople: - uri: https://randomuser.me/api/?results=8 - method: GET -``` - -
- -## POST calls with input parameters - -You can also create a POST request and pass parameters to the API like this - -
- - -```yaml -View: - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Button: - label: Call API - onTap: - invokeAPI: - name: createToDo - inputs: - name: "some value" - onResponse: | - //@code - var id = response.body.records[0].id; - postStatus.text = 'Record created: ' + id; - - Text: - id: postStatus - -API: - createToDo: - inputs: - - name - uri: "https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb" - method: "POST" - body: - records: - - fields: - desc: "${name}" -``` - -
- -## Handing errors - -To handle Errors, you can use the `onError` property: - -
- - -```yaml - - Text: - text: Handle error - - Button: - label: Call API - onTap: - invokeAPI: - name: createToDoError - onResponse: | - //@code - apiStatus.text = 'Call was successful'; - onError: | - //@code - apiStatus.text = 'API returned an error'; - - Text: - id: apiStatus - -API: - createToDoError: - inputs: - - name - uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' - method: 'POST' - body: - records: "this is not what the API expects" -``` - -
- -## Use in code - -You can also call an API in code block. - -
- - -```yaml - - Button: - label: Call API - onTap: - executeCode: - body: | - //@code - - // no inputs - ensemble.invokeAPI("getNewYorkTime"); - - Text: - visible: ${getNewYorkTime.body != null} - text: Current time in NYC is ${getNewYorkTime.body.datetime} - -API: - getNewYorkTime: - uri: https://worldtimeapi.org/api/timezone/America/New_York - method: GET -``` - -
- -## Properties for invokeAPI - -| Property | Type | Description | -| :--------- | :----- | :------------------------------------------------------------------------- | -| id | String | Give the API an ID allows you to bind to its result. e.g. ${apiId.body...} | -| name | String | Name of the API defined in the API section | -| inputs | Object | Key value pairs ofinputs to be passed to API definition | -| onResponse | Action | The action to handle the response | -| onError | Action | The action to handle errors | - -Details about API [here](/build/user-interface/1-page-structure) diff --git a/actions/11-showDialog.md b/actions/11-showDialog.md deleted file mode 100644 index e8096e0..0000000 --- a/actions/11-showDialog.md +++ /dev/null @@ -1,180 +0,0 @@ -# Action: showDialog - -showDialog action triggers the display of a modal dialog box within the app, presenting users with important information, notifications, or customizable content while pausing the main app flow, ensuring clear and focused communication with users. - -### Properties - -| Property | Type | Description | -| :-------------- | :----- | :------------------------------------------------------------------------------ | -| widget | widget | Return an inline widget or specify a custom widget's name to use in the dialog. | -| options | object | [see properties](#propertiesoptions) | -| onDialogDismiss | action | Execute an Action when the dialog is dismissed. | - -#### properties.options - -| Property | Type | Description | -| :--------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| minWidth | integer | | -| maxWidth | integer | | -| minHeight | integer | | -| horizontalOffset | number | Offset the dialog's position horizontally, with -1.0 for the screen's left and 1.0 for the screen's right. (default is 0 for centering horizontally) minimum `-1.0` and maximum `1.0` | -| verticalOffset | number | Offset the dialog's position vertically, with -1.0 for the screen's top and 1.0 for the screen's bottom. (default is 0 for centering vertically) minimum `-1.0` and maximum `1.0` | -| style | string | Render the dialog with a default style. You can also specify 'none' and control your own styles in your widget. `default` `none` | - -**Example** - -Here we are gonna see how we can - -
- - -```yaml -View: - header: - title: Dialog - onLoad: - showDialog: - widget: MyStartingDialog - - body: - Column: - styles: { margin: 10, gap: 5 } - children: - # use inline widget - - Text: - text: Your dialog can also be an inline widget - - Button: - label: Show Dialog - onTap: - showDialog: - widget: - Text: - text: This dialog declares the widget inline and uses the default style. - - - Spacer: - styles: - size: 20 - - # use custom styling - - Text: - text: You can customize the dialog style - - Button: - label: Show Custom Dialog - onTap: - showDialog: - widget: MyCustomDialog - options: - # no default style - zero margin/padding, no background color - style: none - # move it up half way between the top and the center of the screen - verticalOffset: -0.5 - -# Custom Widget -MyStartingDialog: - body: - Column: - styles: - gap: 10 - children: - - Text: - text: Welcome to Ensemble - styles: - fontSize: 16 - fontWeight: bold - - Text: - text: This dialog pops up when the user first visits the page. - - Button: - label: Close dialog - onTap: closeAllDialogs - -MyCustomDialog: - body: - Column: - styles: - gap: 10 - backgroundColor: 0xffD7BFA8 - borderRadius: 10 - margin: 20 - padding: 20 - children: - - Text: - text: |- - This dialog set its own margin/padding and background color. - - It also offset the dialog position vertically. -``` - -Try complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/HRIajN2i8bDDVTL32j8m?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) - -
- -**Output** - -![Alt text](image-4.png) - -![Alt text](image-5.png) - -**Example with inputs** - -We can also make use of inputs property for `showDialog` action to pass any input parameters to be used with dialog. Lets look at the previous example but this time with some input values. - -```yaml -View: - header: - title: Dialog - onLoad: - showDialog: - widget: MyStartingDialog - body: - Column: - styles: { margin: 10, gap: 5 } - children: - - Text: - text: You can customize the dialog style and provide inputs as well - - Button: - label: Show Custom Dialog - onTap: - showDialog: - widget: - MyCustomDialog: - inputs: - name: Peter - options: - # no default style - zero margin/padding, no background color - style: none - # move it up half way between the top and the center of the screen - verticalOffset: -0.5 - - onDialogDismiss: | - //@code - console.log("dialog dismissed"); - -MyCustomDialog: - inputs: - - name - body: - Column: - styles: - gap: 10 - backgroundColor: 0xffD7BFA8 - borderRadius: 10 - margin: 20 - padding: 20 - children: - - Text: - text: |- - Hi ${name} - This dialog set its own margin/padding and background color. - - It also offset the dialog position vertically. -``` - -**Explanation** - -- In the code for showDialog we are passing an input `name` with value `Peter` which can be seen clearly in the output. - -**Output** - -![Alt text](image-1.png) - -![Alt text](image-3.png) diff --git a/actions/12-closeAllDialogs.md b/actions/12-closeAllDialogs.md deleted file mode 100644 index 994cc23..0000000 --- a/actions/12-closeAllDialogs.md +++ /dev/null @@ -1,31 +0,0 @@ -# Action : closeAllDialogs - -closeAllDialogs action dismisses or closes all open modal dialogs within the app, allowing developers to easily manage and reset the dialog stack, ensuring a clutter-free and user-friendly interface for a seamless app experience. - -**Example** - -
- - -```yaml -MyStartingDialog: - body: - Column: - styles: - gap: 10 - children: - - Text: - text: Welcome to Ensemble - styles: - fontSize: 16 - fontWeight: bold - - Text: - text: This dialog pops up when the user first visits the page. - - Button: - label: Close dialog - onTap: closeAllDialogs -``` - -
- -The complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/HRIajN2i8bDDVTL32j8m?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) demonstrates its usage along with showDialog diff --git a/actions/13-stopTimer.md b/actions/13-stopTimer.md deleted file mode 100644 index b34a2aa..0000000 --- a/actions/13-stopTimer.md +++ /dev/null @@ -1,55 +0,0 @@ -# Action : stopTimer - -stopTimer action allows developers to halt or pause a running timer within the app, providing control over time-sensitive processes and facilitating efficient handling of time-related events, enhancing user interactions and application behavior. - -### Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------------------------- | -| id | string | Stop the timer with this ID if it is running | - -**Example** - -
- - -```yaml -Joke: - body: - Column: - styles: { gap: 10 } - children: - - Text: - text: Click the button to show a Chuck Norris joke every 10 seconds. Click Stop when you have enough. - - Row: - styles: { gap: 10 } - children: - - Button: - label: Tell me a joke - onTap: - startTimer: - id: jokeTimer - options: - isGlobal: true - repeat: true - repeatInterval: 10 - startAfter: 0 - onTimer: - invokeAPI: - name: jokeAPI - onResponse: |- - //@code - output.text = response.body.value; - - - Button: - label: Stop - onTap: - stopTimer: - id: jokeTimer - - Text: - id: output -``` - -
- -see the complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/86fba216-4f96-408b-abff-d3ddcfbdcf49?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) to understand usage diff --git a/actions/17-copyToClipboard.md b/actions/17-copyToClipboard.md deleted file mode 100644 index f123001..0000000 --- a/actions/17-copyToClipboard.md +++ /dev/null @@ -1,63 +0,0 @@ -# Action: copyToClipboard - -copyToClipboard action allows users to copy text or content to their device's clipboard with a simple interaction, facilitating easy sharing and transfer of information within the app, enhancing productivity and user convenience. - -### Properties - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------- | -| value | string | The text to copy to clipboard | -| onSuccess | action | Execute another Action upon successful copy to clipboard | -| onFailure | action | Execute an Action when copy to clipboard fails | - -**Example** - -
- - -```yaml -View: - header: - title: "Action: copyToClipboard" - styles: - scrollableView: true - - body: - Column: - styles: - gap: 16 - padding: 24 - - children: - - Markdown: - text: | - Use the `copyToClipboard` action to copy a value to the clipbaord. - - - TextInput: - label: Value to copy - id: textInput - value: Hello there - - Button: - label: Copy to clipboard - onTap: - copyToClipboard: - value: ${textInput.value} - onSuccess: - showToast: - message: ${textInput.value} + "copied!" - options: - dismissable: true - type: success - duration: 3 - onFailure: - showToast: - message: ${textInput.value} + "copied!" - options: - dismissable: true - type: error - duration: 3 -``` - -
- -complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/oQGrStPwLqERIc7kzHFn?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) diff --git a/actions/2-executeCode.md b/actions/2-executeCode.md deleted file mode 100644 index e7d6fe8..0000000 --- a/actions/2-executeCode.md +++ /dev/null @@ -1,37 +0,0 @@ -# Action: executeCode - -Utilize the `executeCode` action to compose custom JavaScript code within the context of this application. When the execution of the code concludes, you can incorporate a follow-up action by leveraging the `onComplete` property. - -Keep in mind that you need to use **//@code** so Ensemble knows to treat the lines that follow as JavaScript. - -```yaml -View: - Column: - children: - - Button: - label: Execute Code - onTap: - executeCode: - body: | - //@code - codeExecuted.text = 'Code block under body is executed'; - onComplete: | - //@code - onCompleteCodeExecuted.text = 'Code block under onComplete is executed'; - - - Text: - id: codeExecuted - - - Text: - id: onCompleteCodeExecuted -``` - -For examples of the `executeCode` action, see the [Ensemble Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/6f88beb2-efe0-4278-82f3-134d110a8551) app. - -## Properties for executeCode - -| Property | Type | Description | -| :------- | :--- | :---------- | -| body | String | Block of code writen in JavaScript. This block executes when the executeCode action is called. | -| onComplete | String | Block of code writen in JavaScript. This block executes after thh executeCode action is called, and the body code block is executed. | - diff --git a/actions/21-notification.md b/actions/21-notification.md deleted file mode 100644 index 72af8b3..0000000 --- a/actions/21-notification.md +++ /dev/null @@ -1,10 +0,0 @@ -# Action: notification - -notifications action provides a comprehensive and customizable solution for managing notifications within the app, including handling incoming notifications, displaying them to users, and implementing notification-related functionalities, enhancing user experience and interaction with timely updates and alerts. - -### Properties - -| Property | Type | Description | -| :-------- | :----- | :-------------------------------------------- | -| onTap | action | Execute an Action on notification is tap. | -| onReceive | action | Execute an Action on notification is receive. | diff --git a/actions/21-openPlaidLink.md b/actions/21-openPlaidLink.md deleted file mode 100644 index 6aae515..0000000 --- a/actions/21-openPlaidLink.md +++ /dev/null @@ -1,12 +0,0 @@ -# Action: openPlaidLink - -openPlaidLink action allows users to open external URLs or web links directly from the app, facilitating seamless integration with external content and enhancing the user's browsing experience within the application. - -### Properties - -| Property | Type | Description | -| :---------------- | :------ | :-------------------------- | -| linkToken | string | The Plaid Link Token created from /link/token/create endpoint of Plaid. View Plaid's documation [here](https://plaid.com/docs/api/tokens/#linktokencreate). | -| onSuccess | action | This action is triggered when user successfully complete the Plaid Link flow. | -| onEvent | action | This action is triggered when certain events in the Plaid Link flow have occurred, for example, when the user selected an institution. This enables your application to gain further insight into what is going on as the user goes through the Plaid Link flow. | -| onExit | action | This action is triggered when user exits Plaid Link without successfully linking a financial institution, or when an error occurs during Link initialization. | diff --git a/actions/22-onNavigateBack.md b/actions/22-onNavigateBack.md deleted file mode 100644 index f507d2c..0000000 --- a/actions/22-onNavigateBack.md +++ /dev/null @@ -1 +0,0 @@ -## onNavigateBack diff --git a/actions/24-pulltorefresh.md b/actions/24-pulltorefresh.md deleted file mode 100644 index 54879b6..0000000 --- a/actions/24-pulltorefresh.md +++ /dev/null @@ -1,46 +0,0 @@ -# Pull To Refresh - -Pull to Refresh is a common interaction pattern in mobile app development, allowing users to refresh the content of a view by pulling it down. In Ensemble, you can implement Pull to Refresh using the `onPullToRefresh` event and update the content dynamically. Let's break down the example: - -```yaml - Column: - styles: - scrollable: true - padding: 20 20 200 - gap: 8 - onPullToRefresh: |- - generateRandomNumber(); - item-template: - data: ${ensemble.storage.RandomNumbers} - name: number - template: - Text: - text: ${number} - styles: - backgroundColor: cyan - textAlign: center -Global: |- - //@code - ensemble.storage.RandomNumbers = [8, 3, 5]; - - function generateRandomNumber() { - //..... - } -``` - -onPullToRefresh Event: -`onPullToRefresh`: |- - generateRandomNumber();: -Specifies the callback function (`generateRandomNumber`) to be executed when the user pulls to refresh. This ensures that new random numbers are generated and the list is updated when the user performs a pull-to-refresh gesture. - -Item Template: -`data`: ${ensemble.storage.RandomNumbers}: -Binds the list of random numbers (stored in ensemble.storage.RandomNumbers) to the item template. This data will be used to populate the list. -`name: number`: Sets a reference name for each item in the list. -`text: ${number}`: Binds each Text widget to a specific number in the list, ensuring that the correct data is displayed for each item. - -Global Section (Initialization): -`ensemble.storage.RandomNumbers = [8, 3, 5];`: -Initializes the RandomNumbers array with some initial values. -`generateRandomNumber` function: -Generates new random numbers when called. This function is triggered on pull-to-refresh. \ No newline at end of file diff --git a/actions/4-openUrl.md b/actions/4-openUrl.md deleted file mode 100644 index cddff54..0000000 --- a/actions/4-openUrl.md +++ /dev/null @@ -1,67 +0,0 @@ -# Action: openUrl - -openUrl action allows users to open external URLs or web links directly from the app, facilitating seamless integration with external content and enhancing the user's browsing experience within the application. - -### Properties - -| Property | Type | Description | -| :---------------- | :------ | :-------------------------- | -| url | string | The URL to open | -| openInExternalApp | boolean | Open URL in an external app | - -**Example** - -1. This one is simple example related to how one can make use of `openUrl` to open given url inside browser or an external browser app in android or ios. - -```yaml -View: - header: - title: "Action: openUrl" - styles: - scrollableView: true - - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Form: - styles: { mainAxis: center } - children: - - TextInput: - id: uri - value: "https://ensembleui.com" - - Row: - styles: { gap: 8 } - children: - - Button: - label: Open Url in place - onTap: - openUrl: - url: ${uri.value} -``` - -You can use `openInExternalApp` property, this will open the url in the right app based on the url scheme in native apps. For browser, it doesn't matter - -```yaml -- Button: - label: Open Url in external app - onTap: - openUrl: - url: ${uri.value} - openInExternalApp: true -``` - -2. In this example we will open the default email app depending on the device or OS like on Windows its `Mail`. - -```yaml - - TextInput: - id: email - value: 'mailto: khurram.mahmood@gmail.com' - - Button: - label: Open Url - onTap: - openUrl: - url: ${email.value} -``` - -To learn more about how to use openUrl action, check out the [Ensemble Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/TnoazbWLihcenxD1NBkr) example. diff --git a/actions/5-startTimer.md b/actions/5-startTimer.md deleted file mode 100644 index 9a261eb..0000000 --- a/actions/5-startTimer.md +++ /dev/null @@ -1,79 +0,0 @@ -# Action: startTimer - -Use the `onTimer` action to start a timer. Then use the `onTimer` and/or `onTimerComplete` properties to execute other actions once the timer finishes. - -### Properties - -| Property | Type | Description | -| :-------------- | :----- | :----------------------------------------------------------------- | -| id | string | Give this timer an ID so it can be cancelled by a stopTimer action | -| onTimer | action | Execute an Action every time the timer triggers | -| onTimerComplete | action | Execute an Action when the timer has completed and will terminate | -| options | object | [see properties](#propertiesoptions) | - -#### properties.options - -| Property | Type | Description | -| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| isGlobal | boolean | Marking this timer as global will ensure the timer, if repeating indefinitely, will continue to run even if the user navigates away from the screen, until explicitly stopped by the stopTimer action. Note that there can only ever be one global timer. Creating a new global timer will automatically cancel the previous global timer. | -| In the example below, we start a time that calls an API after 5 seconds, and repeat this action 3 times. That means after 15 seconds, the `onTimerComplete` action is executed. | -| startAfter | integer | Delay the timer's start by this number of seconds. If not specified and repeat is true, repeatInterval will be used. If none is specified, there will be no initial delay | -| repeat | boolean | Whether the time should repeat and trigger at every repeatInterval seconds. This Timer will run continuously unless a maxNumberOfTimes is specified | -| repeatInterval | integral | Trigger the timer periodically at this repeatInterval (in seconds) | -| maxNumberOfTimes | integer | Set the max number of times the timer will triggers, if repeat is true | - -**Usage Examples** - -In the example below, we start a time that calls an API after 5 seconds, and repeat this action 3 times. That means after 15 seconds, the `onTimerComplete` action is executed. - -
- - -```yaml -View: - header: - title: "Action: startTimer" - styles: - scrollableView: true - - body: - Column: - styles: - gap: 16 - padding: 24 - children: - - Button: - label: Start Timer - onTap: - startTimer: - onTimer: - invokeAPI: - name: getNYCTime - options: - repeat: true - maxNumberOfTimes: 3 - repeatInterval: 5 - onTimerComplete: - executeCode: - body: | - //@code - timerComplete.text = 'Timer completed'; - - - Text: - text: | - API response: - ${getNYCTime.body.datetime} - - - Text: - id: timerComplete - -API: - getNYCTime: - authentication: none - method: GET - uri: https://worldtimeapi.org/api/timezone/America/New_York -``` - -
- -To learn more about how to use `startTimer` action, check out the [Ensemble Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/86fba216-4f96-408b-abff-d3ddcfbdcf49) example. diff --git a/actions/6-showToast.md b/actions/6-showToast.md deleted file mode 100644 index bc5269a..0000000 --- a/actions/6-showToast.md +++ /dev/null @@ -1,45 +0,0 @@ -# Action: showToast - -The ShowToast enables the display of informative toast messages, providing temporary and non-intrusive notifications or alerts within your application for important updates or messages. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/9a576805-019a-4bd3-953f-3c623fbfb905) - -## Properties - -| Property | Type | Description | -| :-------- | :----- | :----------------------------- | -| showToast | object | Showing a toast message | -| options | object | Select a built-in toast style. | -| styles | object | Toast's styles | - -### showToast - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------------------------------------------- | -| message | string | The toast message. Either this message or a widget must be provided. | -| widget | object | The custom widget to show as the Toast's body. Either this widget or a toast message must be provided. | -| options | object | Select a built-in toast style. | -| styles | object | Toast's styles | - -### options - -| Property | Type | Description | -| :---------- | :------ | :------------------------------------------------------------------------------------------------------------------------ | -| type | string | Select a built-in toast style. | -| dismissible | boolean | Whether to show a dismiss button (default is True) | -| position | string | Toast's position. Can be one of: top, topLeft, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomRight | -| duration | integer | The number of seconds before the toast is dismissed. Minimum value is 1. | - -### styles - -| Property | Type | Description | -| :-------------- | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | | Toast's background color starting with '0xFF' for full opacity e.g 0xFFCCCCCC | -| shadowColor | string or number | Box shadow color starting with '0xFF' for full opacity. | -| shadowRadius | integer | Toast's shadow radius. Minimum value is 0. | -| shadowOffset | array | Toast's shadow offset. | -| borderRadius | | Toast's border radius. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| size | integer | Specifies the width (progress bar) or the diameter (circular progress indicator) | -| thickness | integer | Specifies the thickness of the indicator (for progress bar this is the height) | -| color | | Progress indicator color. | diff --git a/actions/7-navigateBack.md b/actions/7-navigateBack.md deleted file mode 100644 index 3aebb72..0000000 --- a/actions/7-navigateBack.md +++ /dev/null @@ -1,32 +0,0 @@ -# Action: navigateBack - -`navigateBack` action allows users to go back to the previous screen or page within the app's navigation stack, enhancing user experience and facilitating smooth app navigation. Navigating back to the previous screen if possible. The current screen will be removed from the navigation history. This also works for a modal screen. - -**Example** - -Using navigateBack is straight forward. In ensemble when you visit a screen using [navigateScreen]() by default there is a back button in the header ( if there is a header ). Otherwise you can also associate navigateBack action with either a custom button or icon as you wish. - -
- - -```yaml -View: - title: "Action: navigateBack" - styles: - scrollableView: true - - Column: - styles: { gap: 16, padding: 24 } - children: - - Markdown: - text: You can open a new screen above the current one and use "navigateScreen" to navigate back to this main screen. - - Button: - label: Show Detail Page - onTap: - navigateModalScreen: - name: "Action: navigateBackModal" -``` - -
- -can see complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/XjvL2XseLnRvYO4FS82e?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) diff --git a/actions/8-navigateScreen.md b/actions/8-navigateScreen.md deleted file mode 100644 index 8112b74..0000000 --- a/actions/8-navigateScreen.md +++ /dev/null @@ -1,208 +0,0 @@ -# Action: navigateScreen - -navigateScreen action allows users to transition to a specific screen or page within the app, facilitating seamless navigation and enhancing user interaction with different sections of the application. - -Like any other action, navigateScreen may be called in YAML or in the JS code. - -### Properties - -| Property | Type | Description | -| :------------- | :----- | :-------------------------------------------------------------------------------------- | -| name | string | Enter the Name or ID of your Screen | -| inputs | object | Specify the key/value pairs to pass into the next Screen | -| options | object | [see properties]() | -| onNavigateBack | action | triggers when users returns back to a screen it previously visited using navigateScreen | - -#### properties.options - -| Property | Type | Description | -| :------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| replaceCurrentScreen | boolean | If true, the new screen will replace the current screen on the navigation history. Navigating back from the new screen will skip the current screen. | -| clearAllScreens | boolean | If true, clear out all existing screens in the navigation history. This is useful when navigating to a Logout or similar page where users should not be able to go back to the prior screens. | - -**Example: Calling navigateScreen - Detailed Examples for YAML and JS** - -
- - -```yaml -View: - title: "Action: navigateScreen" - styles: - scrollableView: true - - Column: - styles: { gap: 16, padding: 24 } - children: - - Markdown: - text: You can navigate to another screen using action `navigateScreen` - - Button: - label: Navigate to Home - onTap: - navigateScreen: - name: Home - - - Markdown: - text: You can navigateScreen from code blocks using `ensemble.navigateScreen('ScreenName');`. - - Button: - label: Navigate to Home using code - onTap: - executeCode: - body: | - //@code - ensemble.navigateScreen('Home'); - - - Divider - - - Markdown: - text: | - #### Pass inputs - You have the option of passing inputs to the target screen. - - - TextInput: - id: messageInput - label: Message to pass - value: Hello there - - - Button: - label: Navigate and pass inputs - onTap: - navigateScreen: - name: "Action: navigateScreen inputs demo" - inputs: - message: ${messageInput.value} - - - Button: - label: Navigate and pass inputs using code - onTap: - executeCode: - body: | - //@code - ensemble.navigateScreen({ - "name": "Action: navigateScreen inputs demo", - "inputs": { - "message": messageInput.value - } - }); - - - Divider - - - Markdown: - text: | - #### options: clearAllScreens - By default, Ensemble retains your previous screens. On browser, user can press back button and get the previous view. - - When you need to remove all the previous screens from the history stack, as in a logout scenario, use `clearAllScreens: true`. - - - Button: - label: Navigate and clear all screen history - onTap: - navigateScreen: - name: Home - options: - clearAllScreens: true - - - Divider - - - Markdown: - text: | - #### options: replaceCurrentScreen - Sometimes when navigating to a new screen, you may not want the user to go back to the current screen. An example is after logging in, hitting back should not take the user back to the login screen. Use the flag `replaceCurrentScreen: true` to remove the current screen from the history stack. - - - Button: - label: Navigate to new screen and replace the current screen - onTap: - navigateScreen: - name: Home - options: - replaceCurrentScreen: true -``` - -
- -You can try complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/kgGUzKx0YiIWp96auaEO?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) - -**Example: Calling navigateScreen in Javascript** - -```javascript -//navigating to a screen without any options -ensemble.navigateScreen('My Screen'); -//navigating to a screen with options -ensemble.navigateScreen({name: 'My Screen',options: {replaceCurrentScreen: true}} -``` - -### onNavigateBack - -We can also make use of onNavigateBack in our navigateScreen action to achieve certain goals like calling an API when returning to screen, updating something which was modified on visited screen etc. - -**Example** -Below is only a snippet from a use case where we can perform any action inside the onNavigateBack event. We can call an API or update any particular parameter we want - -```yaml -navigateScreen: - name: "${booking.completion_status == 'confirmed' ? 'ConfirmedTrip' : 'ConfirmTripRequest'}" - inputs: - booking: ${booking} - onNavigateBack: |- - ensemble.debug("got back") -``` - -Another example where using in context of a button we are updating certain local storage items inside the context of the onNavigateBack - -```yaml -- Button: - label: Categories - styles: - outline: true - padding: 0 - labelStyle: - fontSize: 12 - color: 4288060321 - endingIcon: - name: chevron_right - color: 4288060321 - size: 16 - onTap: null - navigateScreen: - name: Spending - onNavigateBack: |- - //@code - getCategoriesAggregate(ensemble.storage.timeSpan); - -``` - -Note: here we are chaining actions onTap -> navigateScreen -> onNavigateBack etc. Also getCategories(...) is a function used to update certain local storage items. - -- We can also pass data from the visited screen to current screen using navigateBack action. let see an example for that as well. - -```yaml -View: - header: - title: Home - body: - Button: - label: Checkout Ensemble Kitchen Sink - onTap: - navigateBack: - data: # optional, can be simple or complex - var1: 1 - var2: "s t r i n g" -``` - -on visited screen using navigateBack we pass certain variables which can be accessed on previous screen using onNavigateBack event. - -```yaml -View: - header: - title: Home - body: - Button: - label: Checkout Ensemble Kitchen Sink - onTap: - navigateScreen: - name: nextScreen - onNavigateBack: |- - //@code - console.log("navigated back to main screen"); - console.log(event.data); -``` diff --git a/actions/9-navigateModalScreen.md b/actions/9-navigateModalScreen.md deleted file mode 100644 index 7f7367d..0000000 --- a/actions/9-navigateModalScreen.md +++ /dev/null @@ -1,54 +0,0 @@ -# Action: navigateModalScreen - -navigateModalScreen action enables users to open a specific screen or page as a modal overlay, creating a temporary and focused view to capture user input or display additional content without losing context of the main app flow. - -### Properties - -| Property | Type | Description | -| :------------- | :----- | :------------------------------------------------------- | -| name | string | Enter the Name or ID of your screen | -| inputs | object | Specify the key/value pairs to pass into the next Screen | -| onModalDismiss | action | Execute an Action when the modal screen is dismissed | - -**Note:** To close the modal from within the modal screen, just call the [navigateBack](7-navigateBack.md) action - -**Example** - -
- - -```yaml -View: - title: "Action: navigateModalScreen" - styles: - scrollableView: true - - body: - Column: - styles: { gap: 16, padding: 24 } - children: - - Markdown: - text: You can open new screen on above the main screen using action `navigateModalScreen` - - Button: - label: Show Modal - onTap: - navigateModalScreen: - name: Actions & events - - Markdown: - text: You can navigateModalScreen from code blocks using `ensemble.navigateModalScreen('ScreenName');`. - - Button: - label: Show Modal Using Code - onTap: - executeCode: - body: | - //@code - - // no inputs - ensemble.navigateModalScreen('Actions & events'); - //with inputs - //ensemble.navigateModalScreen({name: 'Actions & events',inputs:{input1: 'abc', input2: 'ced'}} ); -``` - -
- -You can try complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/67ICgJIX0McKswXCybb0?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) diff --git a/actions/directory.md b/actions/directory.md deleted file mode 100644 index 83e1d77..0000000 --- a/actions/directory.md +++ /dev/null @@ -1,28 +0,0 @@ -# Actions - -When an event is triggered (e.g. button is tapped), you can perform actions such as navigate to a screen, call an API, or even run JavaScript code. - -| Property | Description | -| :----------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [invokeAPI](/actions/1-invokeAPI) | invokeAPI is used for calling an API. You can call an API on events such as a button tap or on screen load. | -| [executeCode](/actions/2-executeCode) | executeCode action executes custom code logic within the app, enabling dynamic functionality and personalized interactions. | -| [openCamera](/actions/3-openCamera) | openCamera action allows users to access their device's camera within the app for capturing images and videos. | -| [openUrl](/actions/4-openUrl) | openUrl action opens external URLs or web links within the app, facilitating seamless integration with external content. | -| [startTimer](/actions/5-startTimer) | startTimer action initiates a timer within the app, facilitating time-sensitive processes and triggering events after a specified duration. | -| [showToast](/actions/6-showToast) | showToast action displays a temporary notification or message on the app interface, providing concise and contextual updates to users. | -| [navigateBack](/actions/7-navigateBack) | navigateBack action allows users to go back to the previous screen or page within the app's navigation stack. | -| [navigateScreen](/actions/8-navigateScreen) | navigateScreen action facilitates smooth navigation to a specific screen or page within the app's interface. | -| [navigateModalScreen](/actions/9-navigateModalScreen) | navigateModalScreen action opens a specific screen or page as a modal overlay, focusing on the temporary view without losing the main app context. | -| [openUrl](/actions/10-openUrl) | openUrl action allows users to open external URLs or web links within the app, enhancing content integration. | -| [showDialog](/actions/11-showDialog) | showDialog action triggers the display of a modal dialog box within the app, presenting important information or notifications. | -| [closeAllDialogs](/actions/12-closeAllDialogs) | closeAllDialogs action dismisses or closes all open modal dialogs within the app, ensuring a clutter-free interface. | -| [stopTimer](/actions/13-stopTimer) | stopTimer action halts or pauses a running timer within the app, providing control over time-sensitive processes. | -| [getLocation](/actions/14-getLocation) | getLocation action retrieves the device's current location, enabling location-based functionalities within the app. | -| [uploadFiles](/actions/15-uploadFiles) | uploadFiles action allows users to select and upload files from their device to the app, facilitating data transfer and sharing. | -| [pickFiles](/actions/16-pickFiles) | pickFiles action enables users to select files from their device for further processing or usage within the app. | -| [copyToClipboard](/actions/17-copyToClipboard) | copyToClipboard action copies text or content to the device's clipboard, facilitating easy sharing and transfer of information within the app. | -| [connectWallet](/actions/18-connectWallet) | connectWallet action establishes a connection between the app and the user's digital wallet, enabling blockchain-based interactions and transactions. | -| [openPlaidLink](/actions/21-openPlaidLink) | Open the Plaid Link Service so user can link their financial accounts to your service. | -| [requestNotificationAccess](/actions/19-requestNotificationAccess) | requestNotificationAccess action prompts users to grant permission for the app to send notifications to their device. | -| [showNotification](/actions/20-showNotification) | showNotification action displays local notifications within the app, notifying users of important events or information. | -| [notification](/actions/21-notification) | notification action manages and handles notifications within the app, enabling effective communication with users and delivering timely updates and alerts. | diff --git a/actions/image-1.png b/actions/image-1.png deleted file mode 100644 index a143798..0000000 Binary files a/actions/image-1.png and /dev/null differ diff --git a/actions/image-2.png b/actions/image-2.png deleted file mode 100644 index f02dc7e..0000000 Binary files a/actions/image-2.png and /dev/null differ diff --git a/actions/image-3.png b/actions/image-3.png deleted file mode 100644 index d34a887..0000000 Binary files a/actions/image-3.png and /dev/null differ diff --git a/actions/image-4.png b/actions/image-4.png deleted file mode 100644 index 5e52898..0000000 Binary files a/actions/image-4.png and /dev/null differ diff --git a/actions/image-5.png b/actions/image-5.png deleted file mode 100644 index 07f067a..0000000 Binary files a/actions/image-5.png and /dev/null differ diff --git a/actions/image.png b/actions/image.png deleted file mode 100644 index 79a66fb..0000000 Binary files a/actions/image.png and /dev/null differ diff --git a/assets/APNs-key.png b/assets/APNs-key.png deleted file mode 100644 index 34052a4..0000000 Binary files a/assets/APNs-key.png and /dev/null differ diff --git a/assets/developer-apple-keys.png b/assets/developer-apple-keys.png deleted file mode 100644 index 0701ba9..0000000 Binary files a/assets/developer-apple-keys.png and /dev/null differ diff --git a/assets/firebase-apns.png b/assets/firebase-apns.png deleted file mode 100644 index 01868e6..0000000 Binary files a/assets/firebase-apns.png and /dev/null differ diff --git a/assets/logo.svg b/assets/logo.svg deleted file mode 100644 index 6192723..0000000 --- a/assets/logo.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/assets/push-capability.gif b/assets/push-capability.gif deleted file mode 100644 index 99ad36d..0000000 Binary files a/assets/push-capability.gif and /dev/null differ diff --git a/build/authentication/auth0.md b/build/authentication/auth0.md deleted file mode 100644 index 860df12..0000000 --- a/build/authentication/auth0.md +++ /dev/null @@ -1,167 +0,0 @@ -# Setting up Authentication with Auth0 - -In this guide, we will authenticate users against an existing Auth0 tenant. - -#### Prerequisites - -1. You have an existing Auth0 tenant -2. You have created an app on Ensemble Studio -3. You have [Flutter](https://docs.flutter.dev/get-started/install) installed on your machine -4. You have a Simulator for testing - -## 1. Provision Auth0 App Credentials - -Login to your Auth0 tenant and go the [Applications](https://manage.auth0.com/#/applications) section of your dashboard. - -#### Create an Auth0 Application - -Click on "Create Application", and enter a name for your application. Select "Native" as the application type and click "Create". - -#### Enable Connections - -Your application should have at least one enabled Connection. Click on "Connections" and enable any database or identity provider, e.g. Google. - -#### Configure Application - -Navigate to the "Settings" tab on your application page, and scroll to the "Application URIs" section. This is where we will set your Allowed Callback URLs and Allowed Logout Urls for Android and iOS. The values will follow this template: - -- Android: `SCHEME://AUTH0_DOMAIN/android/YOUR_PACKAGE_NAME/callback` -- iOS: `YOUR_BUNDLE_ID://AUTH0_DOMAIN/ios/YOUR_BUNDLE_ID/callback` - -`SCHEME` can be a custom protocol key for you to differentiate client schemes. If this is not needed, you can simply use `http`. - ---- - -## 2. Configure Ensemble app - -#### Get starter app - -Clone [Ensemble Starter](https://github.com/EnsembleUI/starter) from GitHub. Using a code or text editor, open `/ensemble/ensemble-config.yaml` . - -Set your definition source to be Ensemble: - -```yaml -    definitions: -  # where your page definitions are hosted ('local', 'remote' or 'ensemble') -  from: ensemble - -  ensemble: -  appId: -``` - -You can find your Ensemble app id by navigating to the app on Ensemble Studio, clicking the menu icon, and selecting `Copy App ID` option. - -#### Configure Auth0 details for Ensemble app - -In the same file, `ensemble-config.yaml` , add your Auth0 app client ID in the following format. - -```yaml -    services: - signIn: - serverUri: # the domain of your auth0 tenant - providers: - auth0: - iOSClientId: # the client id of of the Auth0 application your created in step 1 - # you may specify additional client ids if you have different applications, otherwise this will be the same client id for all - androidClientId: - webClientId: - serverClientId: -``` - ---- - -## 3. [iOS only] Update Info.plist file - -Inside the directory where you cloned Ensemble Starter, open `/ios/Runner/Info.plist` with a code editor. Add the following to this file. - -``` - CFBundleURLTypes - - - CFBundleTypeRole - Editor - CFBundleURLName - - - CFBundleURLSchemes - - $(PRODUCT_BUNDLE_IDENTIFIER) - - - -``` - ---- - -## 4. [Android only] Update build.gradle - -Inside the directory where you cloned Ensemble starter, open `/android/build.gradle` in your code editor. Add the following to this file. - -```groovy -// android/app/build.gradle - -android { - // ... - - defaultConfig { - // ... - manifestPlaceholders += [auth0Domain: "", auth0Scheme: ""] - } - - // ... -} -``` - -## 4. Enable Auth service in Ensemble code - -By default, Ensemble does not include the authentication module to avoid installing unnecessary packages. Here, we uncomment a few lines of code to get the necessary packages. - -Inside the directory where you cloned Ensemble Starter, open `/lib/generated/ensemble_modules.dart`. - -* Search for this line and uncomment it: -``` -// import 'package:ensemble_auth/auth_module.dart'; -``` - -* Search for this line and uncomment it: -``` - // AuthModuleImpl().init(); -``` - -* Search for this line and set it to true -``` - static const useAuth = false; -``` - ---- - -## 5. Add a Sign in screen - -Now that your app is set up to use Auth0, add a new screen in the studio with following definition. - - -```yaml -View: - body: - Column: - styles: - mainAxis: center - crossAxis: center - padding: 40 - children: - - SignInWithAuth0: - scheme: flutterdemo - provider: auth0 - onAuthenticated: - showToast: - message: ${auth.user.email} -``` - ---- - -## 6. Build and run the app - -* Review `/ensemble/ensemble.properties`. Update the appId as needed - this is your app's bundle ID in the format of . e.g. `com.ensembleui.myfirstapp` (all lowercase, no special characters). -* Run `flutter pub upgrade`. Run this occasionally when the Ensemble framework has been updated. -* Run `flutter create --org com.ensembleui --project-name starter --platform=ios,android .` (note the period at the end). If you modified the appId, make sure the org and project name match the bundle ID. -* Run the App with `flutter run`. If you currently have a running iOS or Android emulator, the command will prompt for a selection, otherwise the App will be opened in the web browser. diff --git a/build/authentication/social-signin-firebase.md b/build/authentication/social-signin-firebase.md deleted file mode 100644 index 9c45689..0000000 --- a/build/authentication/social-signin-firebase.md +++ /dev/null @@ -1,187 +0,0 @@ -# Setting up Authentication with Firebase - -In this guide, we will enable authentication through Firebase. - - - - -#### Prerequisites - -1. You have created a Firebase project -2. You have created an app on Ensemble Studio -3. You have [Flutter](https://docs.flutter.dev/get-started/install) installed on your machine -4. You have a Simulator for testing - -## 1. Configure Firebase project - -Login to your Firebase account and navigate to your project in order to complete following steps. - -#### Enable Sign in with Google - -Go to the Authentication section of your Firebase project, and enable Authentication. After that, enable Google as the sign-in method. - -#### Add iOS app - -Under project settings, add iOS app to your Firebase project. As you go through the steps, you will download a file named `GoogleService-Info.plist` . We will use details from this file later on. -  -#### Add Android app - -Under project settings, add Android app to your Firebase project. As you go through the steps, you will download a file named `google-services.json` . We will use details from this file later on. - ---- - -## 2. Configure Ensemble app - -#### Get starter app - -Clone [Ensemble Starter](https://github.com/EnsembleUI/starter) from GitHub. Using a code or text editor, open `/ensemble/ensemble-config.yaml` . - -Set your definition source to be Ensemble: - -```yaml -    definitions: -  # where your page definitions are hosted ('local', 'remote' or 'ensemble') -  from: ensemble - -  ensemble: -  appId: -``` - -You can find you Ensemble app id by navigating to the app on Ensemble Studio, clicking the menu icon, and selecting `Copy App ID` option. - -#### Add Firebase app details to Ensemble app - -In the same file, `ensemble-config.yaml` , add Firebase account details in the following format. - -```yaml -    accounts: - firebase: - iOS: - apiKey: # In GoogleService-Info.plist, take the value of API_KEY - appId: # In GoogleService-Info.plist, take the value of GOOGLE_APP_ID - messagingSenderId: # In GoogleService-Info.plist, take the value of GCM_SENDER_ID - projectId: # In GoogleService-Info.plist, take the value of PROJECT_ID - android: - apiKey: # In google-services.json, take value of client.api_key.current_key - appId: # In google-services.json, take value of client.client_info.mobilesdk_app_id - messagingSenderId: # In google-services.json, take value of project_info.project_number - projectId: # In google-services.json, take value of project_info.project_id -``` - -To get these details, use the `GoogleService-Info.plist` and  `google-services.json` you downloaded during step 1. - -Here's an example of the outcome. - -firebase account details - - -#### Add sign-in providers to Ensemble app - -In the same file, `ensemble-config.yaml` , under `services` add the following. - -```yaml -    services: -      signIn: -        providers: -          google: -            iOSClientId: # In GoogleService-Info.plist, take the value of CLIENT_ID -            androidClientId: # In google-services.json, take value of client.oauth_client.client_id -``` - -Here's an example of the outcome. - - -firebase provider details - - ---- - -## 3. [iOS only] Update Info.plist file - -Inside the directory where you cloned Ensemble Starter, open `/ios/Runner/Info.plist` with a code editor. Add the following to this file. - -``` - - - - CFBundleTypeRole - Editor - CFBundleURLSchemes - - URL SCHEME GOES HERE - - - -``` - -Use the `GoogleService-Info.plist` that you downloaded during step 1, and copy the value of REVERESED_CLIENT_ID. Paste this value in inside this string tag: ` URL SCHEME GOES HERE `. - ---- - -## 4. Enable Auth service in Ensemble code - -By default, Ensemble does not include the authentication module to avoid installing unnecessary packages. Here, we uncomment a few lines of code to get the necessary packages. - -Inside the directory where you cloned Ensemble Starter, open `/lib/generated/ensemble_modules.dart`. - -* Search for this line and uncomment it: -``` -// import 'package:ensemble_auth/auth_module.dart'; -``` - -* Search for this line and uncomment it: -``` - // AuthModuleImpl().init(); -``` - -* Search for this line and set it to true -``` - static const useAuth = false; -``` - ---- - -## 5. Add a Sign in screen - -Now that your app is set up to use Firebase, add a new screen in the studio with following definition. Ensemble currently provides `SignInWithGoogle` and `SignInWithApple`. Set the provider `property` to `firebase`. - - -```yaml -View: - body: - Column: - styles: - mainAxis: center - crossAxis: center - padding: 40 - children: - - SignInWithGoogle: - provider: firebase -``` - -Depending on your need, assign actions to `onSignedIn` and `onError` properties as well. For demo purpusoes here, we will just show a toast message. - - -```yaml - - SignInWithGoogle: - provider: firebase - onSignedIn: - showToast: - message: ${auth.user.email} - onError: - showToast: - message: Something went wrong -``` - ---- - -## 6. Build and run the app - -* Review `/ensemble/ensemble.properties`. Update the appId as needed - this is your app's bundle ID in the format of . e.g. `com.ensembleui.myfirstapp` (all lowercase, no special characters). -* Run `flutter pub upgrade`. Run this occasionally when the Ensemble framework has been updated. -* Run `flutter create --org com.ensembleui --project-name starter --platform=ios,android .` (note the period at the end). If you modified the appId, make sure the org and project name match the bundle ID. -* Run the App with `flutter run`. If you currently have a running iOS or Android emulator, the command will prompt for a selection, otherwise the App will be opened in the web browser. diff --git a/build/authentication/social-signin.md b/build/authentication/social-signin.md deleted file mode 100644 index 6c09e10..0000000 --- a/build/authentication/social-signin.md +++ /dev/null @@ -1,135 +0,0 @@ -# Social Sign In - -Ensemble supports Social Sign in with Google and Apple. This guide will specifically target the **Sign in with Google** flow. -For each service, we support three different mechanism for managing the signed-in users: [Client-side](#client-side), with your [Server](#Server-side), or with [Firebase](/build/authentication/social-signin-firebase). - - - -## Client-side -Ensemble supports Signing In from the client side without any backend server. User information is stored locally on the device. - - -### Build your screens on Studio -First build a **Login** screen. - -```yaml -View: - styles: - useSafeArea: true - - body: - Column: - styles: - # centering the content - mainAxisSize: min - crossAxis: center - alignment: center - children: - - Text: - text: Welcome to a SignIn Example - styles: - textStyle: - fontSize: 20 - padding: 0 0 20 0 - - - SignInWithGoogle: - # Once signed in, go to the screen 'Home' - # Also clear all previous screens to prevent Back button navigation - onSignedIn: - navigateScreen: - name: Home - options: - clearAllScreens: true -``` -Now build the screen **Home** to show the currently logged-in user's information. - -```yaml -View: - header: - title: Welcome Home - - # onLoad check if currently signed in. If not go to the Login screen - onLoad: - verifySignIn: - onNotSignedIn: - navigateScreen: - name: Login - - body: - Column: - styles: - padding: 24 - gap: 8 - children: - - Row: - styles: - gap: 7 - children: - # Current user's info is under ${auth.user.*} - - Avatar: - source: ${auth.user.photo} - - Text: - text: |- - ${auth.user.name} - ${auth.user.email} - - Button: - label: Sign Out - onTap: - # sign out will clear the user info - signOut: - onComplete: - # once signed out, go to the Login screen - # Also clear all existing screens so the user can't go back - navigateScreen: - name: Login - options: - clearAllScreens: true -``` - - -## Server-side -Currently Social Sign In with your custom Server has to be managed manually. Below is an example flow, and your implementation can varies per your needs. -1. Use the Social Sign in to authenticate the user. This will return the idToken and the user information. -2. Send this idToken to your server, which can validate that this idToken was issued by Google, extract the user information from the idToken, and return server-specific credentials (e.g. bearer token, cookies) for this user back to the client. -3. The client can then save these credentials into storage and use them for subsequent requests. - -```yaml -View: - body: - SignInWithGoogle: - # the user successfully authenticated with Google - onAuthenticated: - invokeAPI: - # call your server, pass the idToken and return server-specific credentials - name: signInToServer - inputs: - # idToken can be accessed on event.data.idToken - token: ${event.data.idToken} - - # user info can be accessed via event.data.user.* - email: ${event.data.user.email} - - onResponse: - executeCode: - # store the bearerToken for latter use - body: |- - ensemble.storage.token = response.body.bearerToken; - onComplete: - navigateScreen: - name: Home - options: - replaceCurrentScreen: true - -API: - # Your server should validate that the idToken is indeed issued by Google - # The server can then create/update the user account in your database, and return server-specific credentials about this user - signInToServer: - inputs: [token] - uri: https://myExampleApi.com/auth - parameters: - token: ${token} -``` diff --git a/build/custom-fonts.md b/build/custom-fonts.md deleted file mode 100644 index f4e3ad4..0000000 --- a/build/custom-fonts.md +++ /dev/null @@ -1,23 +0,0 @@ -# Using Custom Fonts - -Ensemble supports Google Fonts, but you also have the option to use your own custom fonts when deploying your app with [Ensemble Starter](https://docs.ensembleui.com/#/deploy/1-prepare-app). - -### -- From the root directory of Ensemble Starter, open `pubspec.yaml`. -- Under `flutter > fonts`, add your font entry in the following format: -``` - - family: - fonts: - - asset: assets/fonts/... - weight: - style: -``` -- Add your fonts under the directory specified above (e.g. assets/fonts/). -- In your definitions, you may now reference the font specified here using `fontFamily`. -``` -Text: - text: Hello world - styles: - textStyle: - fontFamily: -``` \ No newline at end of file diff --git a/build/deep-link/deeplink.md b/build/deep-link/deeplink.md deleted file mode 100644 index e693b19..0000000 --- a/build/deep-link/deeplink.md +++ /dev/null @@ -1,34 +0,0 @@ -# Setup Deeplink - -In this guide, we'll integrate the deep linking for the Android and iOS Apps - -## Android Setup -1. Create a file named ```assetlinks.json``` and add namespace, package and sha256 -2. Upload the ```assetlinks.json``` file to the website (https://example.com/.wellknown/assetlinks.json) -3. Add ```intent-filter with domain, path, scheme,``` etc in the ```activity``` tag of ```AndroidManifest.xml``` -4. meta-data ```flutter_deeplinking_enabled``` to the ```activity``` tag -5. To test deep links, Execute the following command in the terminal - -``` -adb shell am start -a android.intent.action.VIEW \ --c android.intent.category.BROWSABLE \ --d [https://example.com](https://example.com/) -``` - -6. Test it in physical device, Send the url to any of the notes app and click the link. - -For more info: [Android App Links](https://developer.android.com/training/app-links) - -## iOS Setup -1. Add ```Associated Domain``` capability. Prefix the domain with ```applinks:``` -2. Create a new file named ```apple-app-site-association``` with no file extension. Add details like appIds (teamId.BundleID), components (url path), etc -3. It must be uploaded in the (https://ensembleui.com/.wellknown/apple-app-site-association), needs to be served with content type (application/json) but without the file extension -4. Add ```FlutterDeepLinkingEnabled``` to the ```Info.plist``` file -5. To test deep links, Use ```xcrun simctl openurl booted [https://example.com/path]```(https://example.com/path) -6. Test it in physical device, Send the url to any of the notes app and click the link - -For more info: [iOS Universal Link](https://developer.apple.com/ios/universal-links/) - - -## For Deferred Deep Linking -Checkout - https://docs.ensembleui.com/#/build/deep-link/deferred-deeplink \ No newline at end of file diff --git a/build/deep-link/deferred-deeplink.md b/build/deep-link/deferred-deeplink.md deleted file mode 100644 index f293ef5..0000000 --- a/build/deep-link/deferred-deeplink.md +++ /dev/null @@ -1,109 +0,0 @@ -# Setup Deferred Deeplink -In this guide, we'll integrate the deferred deep linking for the Android and iOS Apps. There are some service providers like branch, appsflyer, etc for deferred deep linking. - -*NOTE: Currently, we support only the BranchIO as of now.* - -## BranchIO (http://branch.io) -For Detailed Doc - https://help.branch.io/developers-hub/docs - -#### Configure Branch Dashboard -1. Go to Configuration -> General -2. Setup Default URL -3. Android Redirects - - Android URI Scheme - - Google Play Search or Custom URL - - SHA 256 Certificate Fingerprints - - Additional Settings -4. iOS Redirects - - iOS URI Scheme - - Apple Store Search or Custom URL - - Enable Universal Links (BundleID, Apple App Prefix) - - Additional Settings - -#### Configure Native Platforms -1. Android - - Add Branch to your AndroidManifest.xml - - Add Branch App Links (Test and Live) - - Add Branch Keys (Test and Live) - -2. iOS - - Configure Bundle ID - - Add associated domains from branch dashboard's Link Domain section of the configuration page to the iOS project "Signing & Capabilities" associated domain - - Configure Info.plist for adding branch keys (Test and Live) and Links (Test and Live) - - Add Custom URL Scheme in the URL types of Info.plist - -### Module (ensemble_deeplink) -Enable Deeplink service in Ensemble code - -By default, Ensemble does not include the deeplink module to avoid installing unnecessary packages. Here, we uncomment a few lines of code to get the necessary packages. - -Inside the directory where you cloned Ensemble Starter, open `/lib/generated/ensemble_modules.dart`. - -* Search for this line and uncomment it: -``` -// import 'package:ensemble_deeplink/deferred_link_manager.dart'; -``` - -* Search for this line and uncomment it: -``` - // GetIt.I.registerSingleton(DeferredLinkManagerImpl()); -``` - -* Search for this line and set it to true -``` - static const useDeeplink = false; -``` - ---- - -#### Initialize Branch SDK -1. In the ensemble project, Initialize your branch SDK using the ```deeplinkInit``` action - -```yaml -deeplinkInit: - provider: branch - options: - useTestKey: true - enableLog: true - disableTrack: false - onSuccess: | - //@code - console.log("BranchSDK:: initialized successfully"); - onLinkReceived: | - //@code - console.log("BranchSDK:: Branch Link Received: " + event.data.link); - onError: | - //@code - console.log("BranchSDK:: Failed to initialize" + event.error); -``` - -2. Create branch deep link using the ```createDeeplink``` action - -```yaml -Button: - label: Create Branch Link - onTap: - createDeeplink: - provider: branch - universalProps: - id: item/12345 - title: My Content Title - contentDescription: My Content Description - imageUrl: https://ensembleui.com/mycontent-123.png - contentSchema: product - linkProps: - channel: ensembleui - feature: Sharing - campaign: content launch - stage: New User - tags: [data, fsdf, sdd] - controlParams: - ref: 1234 - name: Ensemble - onSuccess: | - //@code - console.log("BranchSDK:: Link created successfully: " + event.data.result); - onError: | - //@code - console.log("BranchSDK:: Failed to create a link" + event.error); -``` \ No newline at end of file diff --git a/build/handle-data/item-template/1-interaction-with-api.md b/build/handle-data/item-template/1-interaction-with-api.md deleted file mode 100644 index ed840b9..0000000 --- a/build/handle-data/item-template/1-interaction-with-api.md +++ /dev/null @@ -1,252 +0,0 @@ -# Api - -API widget provides a convenient way to interact with external services or data sources, allowing developers to make HTTP requests, access data, and integrate various functionalities into their applications - -## Properties - -| Property | Type | Description | -| :--------- | :----- | :-------------------------------------------------------------------------------------------- | -| method | String | The HTTP method of the request, such as `GET`, `POST`, `DELETE`, `PUT`, `PATCH`. (`required`) | -| uri | String | The URI for the request (`required`) | -| body | Object | The request body | -| headers | Object | The headers for the request | -| onResponse | Action | The action to handle the response | -| onError | Action | The action to handle errors | -| inputs | Array | The input values users might want to send in the api uri | - -## Set Values - -First of all we have to set different values in the API widget before we move to actually using the response from the API itself. - -#### Specify Input - -Sometimes users might need to send variables as query parameters as part of their API call. Well in that scenario let us see how API allows us to use it. - -**Example** - -
- - -```yaml -onLoad: - invokeAPI: - name: getData - inputs: - appId: applTF2E7IbHETHza - -API: - getData: - inputs: - - appId - uri: https://api.airtable.com/v0/${appId}/Accounts_New/ - method: GET -``` - -
- -- Its a `Get` request and with `appId` as input to `airtable` specifying which app base it is in `AirTable`. -- We can use [invokeAPI](/build/make-it-interactive/actions-and-events/1-invokeAPI) action on a [Button](/widget-reference/button) as well through `onTap` event handler. This way instead of calling this api when screen loads up we can do it when user clicks on it ( like submitting a form ). - -
- - -```yaml -View: - styles: - scrollableView: true - - body: - Column: - children: - - Button: - label: Call API - onTap: - invokeAPI: - name: getData - inputs: - appId: applTF2E7IbHETHza - -API: - getData: - inputs: - - appId - uri: https://api.airtable.com/v0/${appId}/Accounts_New/ - method: GET -``` - -
- -We can also send form values as inputs to the api call ( using `POST` method ) while submitting a form and much more. - -#### Defining Query Parameters - -Query parameters are a critical component of frontend UI platform developing for apps. They are used provide specific instructions to the server, enabling it to return specific based on user input. Query parameters can include filter fields, sorting parameters, and page display, among others. Sometimes we might want to specify Authorization headers etc for our api let us have an example for that. - -
- - -```yaml -API: - getAirtableCars: - uri: https://api.airtable.com/v0/appznriSqyr61F6c4/tblQY1HL5LIYqCetl - method: GET - headers: - Authorization: "Bearer keyZEtlGddyj7dEmw" -``` - -
- -- The Authorization header allows to make request to this `airtable` base. - -#### URI - -URI stands for Uniform Resource Identifier and is used to identify and resources on the internet. is a string of characters that a unique address for a resource, as a webpage or file. URIs are comprised of a scheme (such as http or https), followed by the specific resource. Ley us see an example for understanding it. - -
- - -```yaml -API: - getPeople: - uri: https://randomuser.me/api/?results=6 - method: GET -``` - -
- -#### Choose HTTP Methods - -When developing a frontend UI for mobile apps, choosing the HTTP methods is crucial. methods are essential in defining how requests are made and how data is retrieved from server. There are different HTTP such as GET, PUT POST, DELETE, HEAD, OPTIONS, among others. Let's see an example for it - -
- - -```yaml -Button: - label: Call API - onTap: - invokeAPI: - name: createToDoError - onResponse: | - //@code - apiStatus.text = 'Call was successful'; - onError: | - //@code - apiStatus.text = 'API returned an error'; -Text: - id: apiStatus - -createToDo: - inputs: - - name - uri: "https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb" - method: "POST" - body: - records: - - fields: - desc: "${name}" -``` - -
- -#### API Response manipulations - -Ensemble allows users to manipulate the api response and mould it according to their needs. Let's see how it works - -
- - -```yaml -API: - getAccountInfo: - uri: https://api.airtable.com/v0/applTF2E7IbHETHza/Accounts_New - method: GET - headers: - Authorization: "Bearer keytkkjiT08gv5m9Q" - onResponse: | - //@code - var balanceSum = 0; - var assets = 0; - var loan = 0; - var spending = 0; - var spendingLastDays = 0; - var count = 0; - var catgoriesObject = {}; - var categorySum = {}; - response.body.records.map( function(account) { - if (account.fields.Date != null) { - var dateString = account.fields.Date; - // Split the date string into year, month, and date components - var dateComponents = dateString.split("/"); - // Create a new Date object - var dateObject = new Date(dateComponents[2],dateComponents[0],dateComponents[1]); - console.log(dateObject); - var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; - - // Get the weekday, month, and year values from the date object - var weekday = weekdays[dateObject.getDay()]; - var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; - var month = monthNames[dateObject.getMonth()]; - var date = dateObject.getDate(); - var year = dateObject.getFullYear(); - var formattedDate = weekday + ", " + month + " " + date + ", " + year; - account.fields.Date = formattedDate; - } - }); - response.body.records.map(function (account) { - balanceSum = balanceSum + account.fields.Balance; - assets = assets + account.fields.Investment+ account.fields.Property; - loan = loan + account.fields.Loans; - if(account.fields.Category === 'Dining' | account.fields.Category === 'Groceries' ){ - spending = spending + account.fields.Amount; - } - if (count < 30){ - spendingLastDays = spendingLastDays + account.fields.Amount; - count +=1; - } - if (!catgoriesObject[account.fields.Category]) { - catgoriesObject[account.fields.Category] = []; - } - if(!categorySum[account.fields.Category]){ - categorySum[account.fields.Category] = 0; - } - catgoriesObject[account.fields.Category].push([account.fields.Amount, account.fields.Date,account.fields.Merchant]); - categorySum[account.fields.Category] += account.fields.Amount; - }) - console.log(categorySum); - response.body.totalBalance = balanceSum; - response.body.assets = assets; - response.body.loan = loan; - response.body.spending = spending; - response.body.spendingLastDays = spendingLastDays; - ensemble.storage.accountInfo = response.body; - var categories = []; - response.body.records.map(function (account) { - if(!categories.includes(account.fields.Category)){ - categories.push(account.fields.Category); - } - }); - ensemble.storage.catgoriesObject = catgoriesObject; - ensemble.storage.categorySum = categorySum; - ensemble.storage.categories = categories; - response.body.categories = categories; -``` - -
- -**Key Points** - -Users can have their specific requirements in the design to make things work according to their needs in the App. - -- In my use case i needed a specific format for the `date` field in `getAccountInfo` api call. - - So i extracted it using `response` variable and used a `map` function from `JavaScript` to make changes in the `getAccountInfo`. - - We are mutating the original records which is not normally done using `map` as it never `mutates` an array. - - Using `Date` object we convert date into our required format and then just assign it back to each `account` field in the api response. -- In other areas i have calculated `totalBalance` variable and assigned it to `ensemble.storage` so that its not calculated each time we refresh. -- We are also extracting all `categories` and their relevant total `transaction` amount in an object. -- We can assign result to `ensemble.storage` or we can assign results back in `response.body` as well. It entirely depends on our use case. - - `response.body` will have to be passed to other screens to be useful while `ensemble.storage` can be used across all screens. - -### Conclusion - -In short API widget has many possibilities and use cases to be covered, Ensemble-UI makes sure provide maximum flexibility to users to control how their APIs work. diff --git a/build/handle-data/item-template/2-filter-data.md b/build/handle-data/item-template/2-filter-data.md deleted file mode 100644 index 51a5e9a..0000000 --- a/build/handle-data/item-template/2-filter-data.md +++ /dev/null @@ -1,86 +0,0 @@ -# Filter data based on an item in storage - -To filter data first store data in local storage with **ensemble.storage.set('variableName', 'variableValue')** - -Then get the varible stored in local storage with **ensemble.storage.get('varibleName')**, this will provide you the varible value - -Now use JavaScript ES5 to filter the data - -### Example -```yaml -Column: - styles: - padding: 20 - item-template: - data: ${getCars.body} - name: carItem - template: - Cars: - inputs: - car: ${carItem.fields} - children: - - FilterData - -Cars: - inputs: - - car - Column: - children: - - Text: - text: ${car.Name} - styles: - fontWeight: bold - -FilterData: - Column: - children: - - Button: - label: Show All Cars - onTap: - action: executeCode - body: | - //@code - ensemble.storage.make = ""; - onComplete: - action: invokeAPI - name: getCars - - - Button: - label: Show Only Audi - onTap: - action: executeCode - body: | - //@code - ensemble.storage.set('make', 'Audi'); - onComplete: - action: invokeAPI - name: getCars - - - Button: - label: Show Only Chevrolet - onTap: - action: executeCode - body: | - //@code - ensemble.storage.set('make', 'Chevrolet'); - onComplete: - action: invokeAPI - name: getCars - -API: - getCars: - uri: // your api uri - method: GET - headers: - Authorization: 'Bearer // your API token' - onResponse: | - //@code - if (ensemble.storage.get('make') != '') { - var Filter = response.body.records.filter(function(car) { - return car.fields.Make == ensemble.storage.get('make'); - }); - response.body = Filter - } else { - response.body = response.body.records - }; -``` \ No newline at end of file diff --git a/build/handle-data/local-storage/1-local-storage.md b/build/handle-data/local-storage/1-local-storage.md deleted file mode 100644 index b4adfc3..0000000 --- a/build/handle-data/local-storage/1-local-storage.md +++ /dev/null @@ -1,16 +0,0 @@ -# Local Storage -Local storage allows you to store data locally on the device. On web, it uses [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). You can access local storage in code blocks and bind widgets to their values. - -#### Store value -``` -//@code -ensemble.storage.set('key', 'value'); -ensemble.storage.key = 'value'; -``` - -#### Get value -``` -//@code -var myKey = ensemble.storage.get('key', 'value'); -var myKey = ensemble.storage.key; -``` \ No newline at end of file diff --git a/build/image.png b/build/image.png deleted file mode 100644 index af28be4..0000000 Binary files a/build/image.png and /dev/null differ diff --git a/build/local-assets.md b/build/local-assets.md deleted file mode 100644 index b610bd5..0000000 --- a/build/local-assets.md +++ /dev/null @@ -1,23 +0,0 @@ -# Using local assets - -While developing and previewing your app, you may reference images via URLs. While this is great for rapid prototyping, production Native apps may want to minimize rendering time by referencing assets locally. This is where Environment Variables come in. - -Environment variables can be used for many purposes. You define them in your App's setting on [Ensemble Studio](https://studio.ensembleui.com/) and referencing them any where in your pages with `${env.my_env_variable_name}`. Ensemble also allow you to override these variables in production. This technique allows Ensemble to serve assets locally. - -### Define the environment variables - -Navigate to your App's setting and add an environment variable. -Add Environment Variable - -### Using the environment variables - -Any screens can reference the variable with `${env.variable_name}`. Here we prefix the image with the `imageBaseUrl`. -Add Environment Variable - -### Override environment variables to load images locally - -When building Production app (see [Preparing your App](/deploy/1-prepare-app), you can load this image locally instead of via URL. - -- Add the assets under folder `/ensemble/assets/`. -- Open `/ensemble/ensemble-config.yaml` and add a matching environment variable that you defined on Ensemble Studio. Leave the value empty (if all your assets are directly under /ensemble/assets). -- Note: define the variable name but with empty value will attempt to load assets from `/ensemble/assets/`. diff --git a/build/secrets.md b/build/secrets.md deleted file mode 100644 index 3be1517..0000000 --- a/build/secrets.md +++ /dev/null @@ -1,21 +0,0 @@ -# Application Secrets - -Your application may require using sensitive values for managing access to remote data. Ensemble supports configuring development secrets easily and securely during runtime, and the ability to inject separate production secrets when deploying. - -### Define Secrets for development - -Navigate to your App's setting and add a secret -Add Secret - -Only application owners and editors can add or change secret values due to their sensitive nature. - -### Using Secrets - -Any screens can reference the variable with `${secrets.key_name}`. Here we are simply displaying the secret value in a text field. -Use Secret - -### Inject Production Secrets for Deployment - -You can override your secrets for deployment from the .env file in your Ensemble project by using the same key with a different value. - -We do not recommend version controlling your .env file as this will expose your secrets. Consider removing your .env file from version control or injecting secrets at build time. \ No newline at end of file diff --git a/build/user-interface/1-page-structure.md b/build/user-interface/1-page-structure.md deleted file mode 100644 index 5941d11..0000000 --- a/build/user-interface/1-page-structure.md +++ /dev/null @@ -1,499 +0,0 @@ -# Ensemble Page Structure - -An Ensemble app comprises a series of pages and assets. Each page starts with a [View](#view), followed by an optional [header](#header), an optional [menu](#menu), and a single widget for the body. There can be one of two things on ensemble page either a [View](#view) or group of multiple views together as [ViewGroup](#view-group). - -List of things you will find reference and details here. - -- [View](#view) -- [ViewGroup](#view-group) -- [header](#header) -- [Menu](#menu) -- [Body](#body) -- [API](#api) -- [Global](#global) - -Page Skeleton - -## View Group - -The ViewGroup widget allows you to group multiple Views together and organize them behind a menu, such as a Drawer, EndDrawer, BottomNavBar, SideBar, or EndSidebar. This provides a convenient way to create structured layouts and navigation within your application. - -### Example - -Let's look at an example with a `Bottom Navigation Bar` menu type. - -
- - -```yaml -ViewGroup: - BottomNavBar: - styles: - backgroundColor: white - items: - - icon: search - label: Search - page: Home - - icon: assignment - label: Appointments - page: MyAppointments - - icon: list - label: My Doctors - page: MyDoctors - - icon: account_circle - label: Profile - page: Profile -``` - -
- -Check it out in [studio](https://studio.ensembleui.com/app/3vEZBIhDyYnIQo6BLN2O/screen/Wewvp6ZUyb0PBwkTAltQ?propertyPanelEnabled=true&instantPreviewDisabled=false) - -##### Output - -BottomNavBar - -## View - -The View widget defines the overall structure of a page, including properties like header, body and more, to create a cohesive layout and presentation within your application. View requires only body while other components like [header](#header) and [menu](#menu) are optional. - -#### Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------------------------------------------------------------- | -| header | object | [details](#header) | -| body | object | [details](#body) | -| onLoad | action | Execute an Action from a set of pre-defined set of actions when the screen loads | -| options | string | Specify if this is a `regular` (default) or `modal` screen. | -| styles | object | [see properties](#viewstyles) | - -#### View.styles - -| Property | Type | Description | -| :--------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | integer or string | Background color for the screen starting with '0xFF' for full opacity e.g 0xFFCCCCCC. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| backgroundImage | object | Background image of the View. [see properties](#stylesbackgroundImage) | -| useSafeArea | boolean | Applicable only when we don't have a header. If true, insert paddings around the body content to account for the the devices' Safe Area (e.g. iPhone notch). Default is false. | -| scrollableView | boolean | Specify if the content of this screen is scrollable with a global scrollbar. Using this also allow you to customize the scrolling experience of the header. | -| showNavigationIcon | boolean | For a screen with header, the App will automatically show the Menu, Back, or Close icon (for modal screen) before the title. On modal screen without the header, the Close icon will be shown. Set this flag to false if you wish to hide the icons and handle the navigation yourself. | -| navigationIconPosition | string | On modal screen without a header, you can position the close button at the `start` or `end` of the screen. For left-to-right languages like English, start is on the left and end is on the right. This property has no effect on a screen with header. | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundImage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | - -## Header - -The header contains the Safe Area (e.g. iPhone notch) and by default has the background color of your theme's primaryColor. It includes: - -1. `navigation icon`. If a drawer menu is used the system will automatically show an icon to open/close the drawer, otherwise if this page can navigate back to the previous page, the back arrow will be shown. If neither condition is true, the icon will not be visible, in which case the title will stretch to fill the entire horizontal space. -2. `title`. Its simplest form is a string which is the title text. You may override it with a custom widget. -3. `flexible background`. Specifies a widget that will fill the entire header (including the notch). This is typically used as a background for the header. This widget will be laid out first, with the navigation icon and the title overlay on top. - -#### Properties - -| Property | Type | Description | -| :----------------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| title | string or widget | A simple text or a custom widget for the App's title | -| styles | object | [see properties](#headerstyles) | -| flexibleBackground | widget | This widget (typically used as an background image) acts as the header's background, with the title bar and the bottom widget overlaid on top. On non-scrollable screen, its dimensions is dictated by the header's width and height. | - -#### Header.styles - -| Property | Type | Description | -| :---------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | integer or string | By default the background color uses the theme's 'primary' color. You can override the header's background color here. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| color | integer or string | By default the navigation icon, title, and action icons uses the theme's 'onPrimary' color. You can override their colors here. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevation | integer | Raise the header on its z-coordinates relative to the body. This effectively creates a drop shadow on the header's bottom edge. Minimum value: 0, Maximum value: 24 | -| shadowColor | integer or string | If elevation is non-zero, this will override the drop shadow color of the header's bottom edge, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| centerTitle | boolean | Whether to align the title in the title bar's center horizontally (default: true) | -| titleBarHeight | integer | For consistency, the header's title bar has the default fixed height of 56 regardless of its content. You may adjust its height here. Minimum value is `0` | -| flexibleMinHeight | integer | Applicable only if scrollableView is enabled. This attribute effectively sets the header's min height on scrolling (header's height will varies between the flexibleMinHeight and flexibleMaxHeight). Note that this attribute will be ignored if smaller than the titleBarHeight | -| flexibleMaxHeight | integer | Applicable only if scrollableView is enabled. This attribute effectively sets the header's max height on scrolling (header's height will varies between the flexibleMinHeight and flexibleMaxHeight). This attribute will be ignored if smaller than the flexibleMinHeight | - -Note: when the entire View is specified as scrollable, flexible background's height can vary in height (hence flexible) on scroll with a parallax effect. - -## Menu - -Ensemble provides support for five menu types that offer extensive customization options, including the ability to add custom items which are indeed `custom widgets`. These menu types allow users to meet their unique design needs or client requirements. Below, you will find detailed information about each menu type, including the supported properties, styles, and illustrative examples for better understanding. - -### BottomNavBar - -This is the navigation bar at the bottom of the screen, typical of most iOS and Android apps. Where each item has several properties as explained [below](#bottomnavbaritems). - -#### BottomNavBar.Properties - -| Property | Type | Description | -| :------- | :--------------- | :------------------------------------------------------------------- | -| items | array of objects | List of menu items (minimum 2). [see properties](#bottomnavbaritems) | -| styles | object | [see properties](#bottomnavbarstyles) | - -#### BottomNavBar.items - -| Property | Type | Description | -| :---------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| icon | string | Icon name from ` Material Icons``Font Awesome``Remix ` or `custom font icons`. | -| iconLibrary | string | Enables the usage of various icon libraries like `FontAwesome`, `Remix`, `Material Icons` or `custom icon` fonts within ensemble. | -| label | string | Defines the text displayed below the icon, providing a descriptive title or name for the menu item | -| page | string | The new page to navigate to on click | -| selected | string | Mark this item as selected. There should only be one selected item per page. | -| floating | boolean | Mark this item as a floating icon | -| floatingMargin | integer or string | The margin around the floating. | -| floatingAlignment | string | How to align the floating in the BottomNavBar. The values are ` left``center``right ` and `none` | -| color | integer or string | Unselected icon color, starting with '0xFF' for full opacity e.g 0xFFCCCCCC. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| selectedColor | integer or string | Selected icon color, starting with '0xFF' for full opacity e.g 0xFFCCCCCC. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| floatingBackgroundColor | integer or string | Floating item background color, starting with '0xFF' for full opacity e.g 0xFFCCCCCC. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| floatingIconColor | integer or string | Floating item icon color, starting with '0xFF' for full opacity e.g 0xFFCCCCCC. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| customItem | object | Allows user to use custom widgets for two states `selected` and `UnSelected`. | - -##### BottomNavBar.items.customItem - -| Property | Type | Description | -| :------------- | :----- | :----------------------------------------------------- | -| widget | widget | Custom bottom navigation item for the unselected state | -| selectedWidget | widget | Custom bottom navigation item for the selected state | - -#### BottomNavBar.styles - -| Property | Type | Description | -| :-------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | - -#### Example - -
- - -```yaml -BottomNavBar: - styles: - backgroundColor: white - color: grey - selectedColor: orange - floatingBackgroundColor: orange - floatingIconColor: white - items: - - label: Home - activeIcon: home - icon: home - page: Home - - - customItem: - widget: CustomNavBarItem - selectedWidget: ActiveCustomNavBarItem - page: Icon - - - icon: note_add - floating: true - floatingAlignment: center - floatingMargin: 5 - onTap: | - //@code - ensemble.navigateScreen('Lottie'); - - - icon: search - label: Search - page: Image - - - customItem: - widget: CustomNavBarItemWithImage - selectedWidget: ActiveCustomNavBarItemWithImage - page: WeeklyScheduler -``` - -
- -This sippet has example for how user can utilize - -1. Custom widgets as items for the menu -2. Floating icons - -you can check the complete example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/aa634599-cd5d-411c-a4b6-1163f3b5c558). - -##### Output - -![Alt text](image.png) - -### Drawer - -This menu type puts the menu behind a drawer icon on the header. The drawer icon will be positioned to the 'start' of the header (left for most languages, right for RTL languages). - -#### Drawer.Properties - -| Property | Type | Description | -| :------- | :--------------- | :------------------------------------------------------------- | -| header | widget | The header widget for the menu | -| footer | widget | The footer widget for the menu | -| items | array of objects | List of menu items (minimum 2). [see properties](#draweritems) | -| styles | object | [see properties](#drawerstyles) | - -#### Drawer.items - -| Property | Type | Description | -| :---------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------- | -| icon | string | Icon name from ` Material Icons``Font Awesome``Remix ` or `custom font icons`. | -| iconLibrary | string | Enables the usage of various icon libraries like `FontAwesome`, `Remix`, `Material Icons` or `custom icon` fonts within ensemble. | -| label | string | Defines the text displayed below the icon, providing a descriptive title or name for the menu item | -| page | string | The new page to navigate to on click | -| selected | string | Mark this item as selected. There should only be one selected item per page. | - -#### Drawer.styles - -| Property | Type | Description | -| :-------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | - -#### Example - -It is a basic usage example for the Drawer menu. - -
- - -```yaml -View: - title: Drawer menu - menu: - Drawer: - items: - - label: Home - icon: home - page: Home - - label: Button - icon: input - page: Button - - Column: - styles: { gap: 16, padding: 24, scrollable: true } - children: - - Markdown: - text: | - This page includes menu displayed as drawer -``` - -
- -You can also check live example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/0073ebe9-6b0b-4ebf-9e8b-72a93a1275df#) - -##### Output - -![Alt text](image-2.png) -![Alt text](image-1.png) - -### End Drawer - -Similar to Drawer but the drawer icon will be positioned to the 'end' of the header (right for most languages, left for RTL languages). You can check its properties [here](#drawerproperties). You can find its example in [Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/YIcCi9aXiGJKftQRNi34#) - -### SideBar - -A fixed navigation menu to the 'start' of the screen (left for most languages, right for RTL languages). The menu may become a drawer menu on lower resolution or screen sizes. - -#### Sidebar.Properties - -| Property | Type | Description | -| :------- | :--------------- | :-------------------------------------------------------------- | -| header | widget | The header widget for the menu | -| footer | widget | The footer widget for the menu | -| items | array of objects | List of menu items (minimum 2). [see properties](#sidebaritems) | -| styles | object | [see properties](#sidebarstyles) | - -#### Sidebar.items - -| Property | Type | Description | -| :---------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------- | -| icon | string | Icon name from ` Material Icons``Font Awesome``Remix ` or `custom font icons`. | -| iconLibrary | string | Enables the usage of various icon libraries like `FontAwesome`, `Remix`, `Material Icons` or `custom icon` fonts within ensemble. | -| label | string | Defines the text displayed below the icon, providing a descriptive title or name for the menu item | -| page | string | The new page to navigate to on click | -| selected | string | Mark this item as selected. There should only be one selected item per page. | - -#### Sidebar.styles - -| Property | Type | Description | -| :-------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | The thickness of the border | -| borderColor | integer or string | Color of the border, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| itemDisplay | string | How to render each navigation item. `stacked` `sideBySide` | -| itemPadding | integer or string | Padding for each navigation item with CSS-style value | -| minWidth | integer | The minimum width for the menu (default 200) | - -#### Example - -An example on how to use Sidebar menu. - -
- - -```yaml -View: - title: Sidebar menu - menu: - Sidebar: - items: - - label: Home - icon: home - page: Home - - label: Button - icon: input - page: Button - - Column: - styles: { gap: 16, padding: 24, scrollable: true } - children: - - Markdown: - text: | - This page includes menu displayed as Sidebar -``` - -
- -You can also check live example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/QZyoRkHHrHEAkGJMwoNU#) - -##### Output - -![Alt text](image-3.png) - -## Body - -The View requires a single widget defined as its child. This will act as the body content, and can only be a Column, Row, Flex, or Stack widget. - -## API - -API provides a convenient way to interact with external services or data sources, allowing developers to make HTTP requests, access data, and integrate various functionalities into their applications. - -#### Properties - -| Property | Type | Description | -| :--------- | :----- | :------------------------------------------------------------------------------ | -| method | String | The HTTP method of the request, such as `GET`, `POST`, `DELETE`, `PUT`, `PATCH` | -| uri | String | The URI for the request | -| body | Object | The request body | -| headers | Object | The headers for the request | -| onResponse | Action | The action to handle the response | -| onError | Action | The action to handle errors | -| inputs | Array | The input values | - -You can find many great example [here](/actions/1-invokeAPI) - -## Global - -Global enables users to declare or define functions and variables which can be accessed globally inside the whole screen in every widget. In simple words its scope ig `global` just like a normal JavaScript `Global Execution Context` where users can access these functions anywhere in the screen. - -**Example** - -```yaml -View: - header: - title: "Code: Global functions" - styles: - scrollableView: true - Column: - styles: { gap: 16, padding: 24 } - children: - - TextInput: - id: secondsInput - label: Seconds - value: 28565 - - Button: - label: Convert to hours and minutes - onTap: - executeCode: - body: |- - //@code - results.text = convertSecondsToHours(secondsInput.value); - - - Text: - id: results - -Global: |- - - function convertSecondsToHours (s) { - - console.log(s); - } -``` - -**Output** - -The output can be checked in the logs for browser - -![Alt text](image-6.png) - -## Putting it together - -This example illustrates almost all the widgets which are integral part of ensemble page structure. It also demonstrates a comprehensive usage of BottomNavBar, onLoad action, API calls and custom widgets. - -
- - -```yaml -View: - onLoad: - invokeAPI: - name: getUser - inputs: - id: 32GelurbLbd6umj3ULOkAXYSYyq2 - - # Set the view to be scrollable - styles: - scrollableView: true -menu: - BottomNavBar: - styles: - shadowColor: 0xFFFD451C - items: - - icon: home - label: Home - page: Home - selected: true - - label: Favorite - icon: favorite - page: Favorite - - label: Promos - icon: loyalty - page: Promos - - label: Account - icon: account_circle - page: Profile - - # This is the parent widget for all screen content - body: - Column: - styles: - backgroundGradient: - colors: [ 0xFFF4D66C, 0xFFFEFAF3, 0xFFFFFFFF ] - start: topLeft - end: bottomRight - - children: - - UserInfo - - SearchBar - - Categories - - NearbyFood -``` - -
- -#### Output - -![Alt text](image-4.png) - -You can check the complete App [here](https://studio.ensembleui.com/app/iM58Wgr7bgzTxEi7rV40/screen/cYMnCfhOya8Vq1QG6aCC?propertyPanelEnabled=true&instantPreviewDisabled=false) diff --git a/build/user-interface/2-widgets.md b/build/user-interface/2-widgets.md deleted file mode 100644 index 8a03652..0000000 --- a/build/user-interface/2-widgets.md +++ /dev/null @@ -1,60 +0,0 @@ -# Widgets - -Ensemble widgets enable you to build both simple and complex applications. Here is a comprehensive list of widgets, their properties and Kitchen Sink examples which will help you to build powerful apps with EnsembleUI. - -### Data display - -| Widget | Documentation | Kitchen sink example | -| ---------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| Text | [Link](/widget-reference/text) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c87f8b09-58e2-4c2f-99a1-cbbe9e25e9a5) | -| Image | [Link](/widget-reference/Image) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/7c7a3ffe-68ef-4e99-b9d1-4b5cee166233) | -| Icon | [Link](/widget-reference/Icon) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e7c686f5-b8a2-4670-9e6e-8fdb0fea768e) | -| Map | [Link](/widget-reference/Map) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/36e52d1a-39c5-4a6b-b064-2be6cfe3cf7b) | -| QRCode | [Link](/widget-reference/qrcode) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/f4921ba2-9f3d-4c33-8848-4df29a5e7a4d) | -| Video | [Link](/widget-reference/video) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fce92bbb-af8e-403d-bf2d-c10926cc89a0) | -| Lottie animation | [Link](/widget-reference/lottie) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/576f3004-83e6-429d-b256-628d85e05f7f) | -| Markdown | [Link](/widget-reference/markdown) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/6b6d9c3d-359b-4768-99a5-3f087a64387c) | -| HTML | [Link](/widget-reference/html) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/ZhTBody9YozadVvTlhW0) | -| Webview | [Link](/widget-reference/webview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/22c8d57d-a906-4d11-873d-161fd6c56c0a) | - -### Layout - -| Widget | Documentation | Kitchen sink example | -| -------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| Column | [Link](/widget-reference/column) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/90a8e4df-5eab-4473-ba10-2ecffc9596b0) | -| Row | [Link](/widget-reference/row) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4bd0d453-c243-429d-a562-93cbc9db38e3) | -| Flex | [Link](/widget-reference/flex) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/R3KgxV3UPWb4TjoiPI0U) | -| Flow | [Link](/widget-reference/flow) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3e901fb8-a0e8-4f52-979b-7f5f2547e650) | -| ListView | [Link](/widget-reference/listview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/w0Wmu9ZMP4csk7IELSx3) | -| GridView | [Link](/widget-reference/gridview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/DX5j2WVQFabmxD9FCD5h) | -| Stack | [Link](/widget-reference/stack) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/572ecf3b-b9f2-46f4-960f-ff438e5fa1dc) | -| DataGrid | [Link](/widget-reference/datagrid) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c5940e18-f2c1-4318-8e68-a678a6ae7247) | -| TabBar | [Link](/widget-reference/tabbar) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/cebd491d-7d90-43f4-9f17-b8575de441ca) | -| Carousel | [Link](/widget-reference/carousel) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/2e1d88b1-f281-4c2c-9bb1-bd18016d2b8c) | -| Divider | [Link](/widget-reference/divider) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4a893a2e-5bde-400c-b974-b25b497d31a5) | -| Spacer | [Link](/widget-reference/spacer) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/1d7e42a9-5bbc-4b4b-9a02-8c102234ee05) | - -### Forms and inputs - -| Widget | Documentation | Kitchen sink example | -| --------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| Form | [Link](/widget-reference/form) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3107baf6-dfc3-42cd-b617-61c37b31f31e) | -| TextInput | [Link](/widget-reference/textinput) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/abc081b1-bcb4-4db6-ae55-7987cb6c418e) | -| Button | [Link](/widget-reference/button) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/09c1087b-f9ee-4a8c-9286-e0e881184c07) | -| Dropdown | [Link](/widget-reference/dropdown) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fb8d28a2-834e-40a9-8419-155272fb0191) | -| AutoComplete | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3tBTU9CUTu0IegpytNYa) | -| Checkbox | [Link](/widget-reference/checkbox) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/21f43d9b-db21-40fe-9c2f-806267e6c412) | -| Switch | [Link](/widget-reference/switch) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3f4ba37a-0e6a-46a1-9b78-e4e04c84937d) | -| Date | [Link](/widget-reference/date) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e7zOy8oX5dxQU7kD5IO4) | -| DateRange | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/b45c5576-ec22-4b04-832f-6dd7571dd20f) | -| Time | [Link](/widget-reference/time) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/yNHLPObY1wWgCpg0sgoW) | -| PasswordInput | [Link](/widget-reference/passwordinput) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/218fa244-f0cd-4d17-91e6-7c099bbedede) | -| Signature | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/70eb8a13-e7df-4778-b7e6-57df17b032a0) | -| WeeklyScheduler | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/244ce957-98ed-4db8-a5a7-ee587d6dfe0b) | - -### Feedback - -| Widget | Documentation | Kitchen sink example | -| ------------------ | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| Progress indicator | [Link](/widget-reference/progressindicator) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c2c248f2-a289-40d3-acd5-65a1a7f3c5a2) | -| Toast message | [Link](/actions/6-showToast) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/9a576805-019a-4bd3-953f-3c623fbfb905) | diff --git a/build/user-interface/3-animations.md b/build/user-interface/3-animations.md deleted file mode 100644 index dd77f6f..0000000 --- a/build/user-interface/3-animations.md +++ /dev/null @@ -1,78 +0,0 @@ -# Animations in EnsembleUI - -Welcome to our Animations page! Here, you'll learn how to bring your website to life with stunning page transition animations. Elevate user experience and captivate your audience with smooth transitions that seamlessly guide them through your content. Get ready to add a touch of magic to your web pages with our animation techniques. - -Note: `Currently we only support page transition animations`. - -**Example** -Let us take an example of how page transition animations work. We can make it work in teo ways either at the [Screen](#page-level-code) or in the [Theme](#theme). - -#### Page Level - -
- - -```yaml -- Button: - label: Navigate to Home - onTap: - navigateScreen: - name: Home - transition: - type: bottomToTopPop - duration: 250 # millisecond is default -``` - -
- -**Output** - -![Alt text](<7-12-2023 (23-21-29).gif>) - -**Explanation** - -The `type` property under `transition` property for _NavigateScreen_ action allows you to chose kind of animation you want. There are [list](#list-of-animation-types) of options you can chose from. - -#### Theme - -We can also define animations in our App theme, here is how you can do it. You can learn more about theme [here](). - -
- - -```yaml -Transitions: - page: - type: size - alignment: topRight - duration: 300 # Millisecond -``` - -
- -**Output** - -![Alt text](image.png) - -**Explanation** - -Works similarly to page level transition in the screen but now we are defining it in [Theme]() which makes it applicable to page transitions across the whole App. - -#### List of Animation Types - -| Type | Description | -| :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------- | -| Fade | Smoothly transition between pages with a gentle fading effect, creating a seamless and elegant user experience. | -| RightToLeft | Slide pages from right to left, providing a visually pleasing flow that guides users through your content. | -| LeftToRight | Engage users with a left-to-right animation, giving a sense of progression and intuitive navigation. | -| TopToBottom | Bring a sense of depth to your pages as they transition from top to bottom, creating a visually immersive experience. | -| BottomToTop | Enhance user engagement by animating pages from bottom to top, adding a touch of dynamism to your website. | -| Scale | Add a dramatic effect as pages smoothly scale in and out, providing a visually striking transition between content. | -| Rotate | Give your pages a unique twist as they rotate into view, creating a captivating and memorable animation. | -| Size | Play with the size of your pages as they transition, making them expand or contract for a visually engaging effect. | -| RightToLeftWithFade | Combine the sliding motion of right-to-left transition with a fading effect, adding an extra layer of elegance to your page transitions. | -| LeftToRightWithFade | Blend left-to-right motion with a fade effect, delivering a seamless and visually pleasing transition between pages. | -| LeftToRightPop | Grab attention with a pop animation that slides pages from left to right, creating a dynamic and impactful transition. | -| RightToLeftPop | Add an eye-catching pop animation to your page transitions as they slide from right to left, making a lasting impression on your users. | -| TopToBottomPop | Infuse excitement into your transitions with a pop animation that brings pages into view from top to bottom, captivating your audience. | -| BottomToTopPop | Elevate user experience with a pop animation that animates pages from bottom to top, adding a delightful touch to your website's transitions. | diff --git a/build/user-interface/3-layouts.md b/build/user-interface/3-layouts.md deleted file mode 100644 index 5e909c7..0000000 --- a/build/user-interface/3-layouts.md +++ /dev/null @@ -1,21 +0,0 @@ -# Layouts - -Ensemble layouts are themselves widgets that contain other widgets. Here is a comprehensive list of Layout widgets with their properties and usage examples in EnsembleUI. - -| Widget | Documentation | Kitchen sink example | -| ------------ | -------------- | ----------------------- | -| Column | [Link](/widget-reference/column) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/90a8e4df-5eab-4473-ba10-2ecffc9596b0) | -| FittedColumn | [Link](/widget-reference/fitted-column) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/hRFxxoaBePQaLfmoBiIb) | -| Row | [Link](/widget-reference/row) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4bd0d453-c243-429d-a562-93cbc9db38e3) | -| FittedRow | [Link](/widget-reference/fitted-row) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fvSONumk7npuTDmIWwis) | -| Flex | [Link](/widget-reference/flex) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/R3KgxV3UPWb4TjoiPI0U) | -| Flow | [Link](/widget-reference/flow) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3e901fb8-a0e8-4f52-979b-7f5f2547e650) | -| ListView | [Link](/widget-reference/listview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/w0Wmu9ZMP4csk7IELSx3) | -| GridView | [Link](/widget-reference/gridview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/DX5j2WVQFabmxD9FCD5h) | -| StaggeredGrid | [Link](/widget-reference/staggeredgrid.md) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/a9iIs4wvgqDOhU4rN6GR) | -| Stack | [Link](/widget-reference/stack) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/572ecf3b-b9f2-46f4-960f-ff438e5fa1dc) | -| DataGrid | [Link](/widget-reference/datagrid) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c5940e18-f2c1-4318-8e68-a678a6ae7247) | -| TabBar | [Link](/widget-reference/tabbar) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/cebd491d-7d90-43f4-9f17-b8575de441ca) | -| Carousel | [Link](/widget-reference/carousel) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/2e1d88b1-f281-4c2c-9bb1-bd18016d2b8c) | -| Divider | [Link](/widget-reference/divider) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4a893a2e-5bde-400c-b974-b25b497d31a5) | -| Spacer | [Link](/widget-reference/spacer) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/1d7e42a9-5bbc-4b4b-9a02-8c102234ee05) | diff --git a/build/user-interface/4-theme.md b/build/user-interface/4-theme.md deleted file mode 100644 index 10fd234..0000000 --- a/build/user-interface/4-theme.md +++ /dev/null @@ -1,119 +0,0 @@ -# Theme - -Welcome to our Theme page, your gateway to a world of visual customization! Here, we'll explore the powerful elements that make up our platform's themes. From color schemes to typography, widgets, and transition options, our comprehensive range of theme elements allows you to effortlessly personalize your app. Discover how themes can transform your online presence, create a cohesive brand identity, and provide a delightful user experience. Unlock the full potential of your app with our versatile and user-friendly theme customization features. Let's wait no further and jump right into the details. - -### Where to find it ? - -You can find the theme on Left-Side of the panel in ensemble studio after you have selected your App. - -![Alt text](image-5.png) - -For instance in my case for Ensemble Kitchen Sink as you can see the Theme selected in the picture above. - -### Properties - -Now let us see what properties does it have on larger level - -| Property | Type | Description | -| :---------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| material3 | boolean | If set true, material3 will be applied else material2. see [here](https://material.io/blog/migrating-material-3) for more details about Material Design 2 vs 3. | -| Text | object | [see properties](#text) | -| Colors | object | [see properties](#colors) | -| Widgets | object | [see properties](#widgets) | -| Transitions | object | [see properties](#transitions) | - -### Text - -| Property | Type | Description | -| :------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| fontFamily | string | Allows users to chose a specific font-family other than the default one. see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| displayLarge | object | Largest of display styles . As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens. [see properties](#textstyle) | -| displayMedium | object | Middle size of the display styles. As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens. [see properties](#textstyle) | -| displaySmall | object | Smallest of the display styles. As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens. [see properties](#textstyle) | -| headlineLarge | object | Largest of the headline styles. Headline styles are smaller than display styles. They're best-suited for short, high-emphasis text on smaller screens. [see properties](#textstyle) | -| headlineMedium | object | Middle size of the headline styles. Headline styles are smaller than display styles. They're best-suited for short, high-emphasis text on smaller screens.[see properties](#textstyle) | -| headlineSmall | object | Smallest of the headline styles. Headline styles are smaller than display styles. They're best-suited for short, high-emphasis text on smaller screens. [see properties](#textstyle) | -| titleLarge | object | Largest of the title styles. Titles are smaller than headline styles and should be used for shorter, medium-emphasis text.[see properties](#textstyle) | -| titleMedium | object | Middle size of the title styles. Titles are smaller than headline styles and should be used for shorter, medium-emphasis text. [see properties](#textstyle) | -| titleSmall | object | Smallest of the title styles. Titles are smaller than headline styles and should be used for shorter, medium-emphasis text. [see properties](#textstyle) | -| bodyLarge | object | Largest of the body styles. Body styles are used for longer passages of text. [see properties](#textstyle) | -| bodyMedium | object | Middle size of the body styles. Body styles are used for longer passages of text. [see properties](#textstyle) | -| bodySmall | object | Smallest of the body styles. Body styles are used for longer passages of text. [see properties](#textstyle) | -| labelLarge | object | Largest of the label styles. Label styles are smaller, utilitarian styles, used for areas of the UI such as text inside of components or very small supporting text in the content body, like captions. [see properties](#textstyle) | -| labelMedium | object | Middle size of the label styles. Label styles are smaller, utilitarian styles, used for areas of the UI such as text inside of components or very small supporting text in the content body, like captions. [see properties](#textstyle) | -| labelSmall | object | Smallest of the label styles. Label styles are smaller, utilitarian styles, used for areas of the UI such as text inside of components or very small supporting text in the content body, like captions. [see properties](#textstyle) | - -#### TextStyle - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| fontSize | integer | Sets the size of the text. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | - -### Colors - -| Property | Type | Description | -| :--------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| seed | string or integer | Generate color schema based on seed color. The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange`. [more here]() | -| primary | string or integer | Primary color of your App (e.g button color, focus color, ...). The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| onPrimary | string or integer | The color overlay on top of your primary color (e.g button text). The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| secondary | string or integer | The Secondary color of your App. The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| onSecondary | string or integer | The color overlay on top of your secondary color. The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabled | string or integer | Color when a widget is disabled. The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| loadingScreenBackgroundColor | string or integer | The background color while a screen is loading. The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| loadingScreenIndicatorColor | string or integer | The progress indicator color while a screen is loading. The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | - -### Widgets - -| Property | Type | Description | -| :------- | :----- | :------------------------ | -| Input | object | [see properties](#input) | -| Button | object | [see properties](#button) | - -#### Input - -| Property | Type | Description | -| :---------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| variant | string | Select a pre-defined look and feel for Input widgets [see properties](#options-for-inputvariant) | -| fillColor | string or integer | The fill color for applicable input fields (TextInput, Dropdown, ...). which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderRadius | integer | The border radius for applicable Input widgets. | -| borderWidth | integer | The border width for applicable Input widgets. | -| borderColor | integer or string | The base border color for applicable input fields. This border color determines the look and feel of your inputs, while the other colors are overrides for different states, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when input fields are disabled, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| errorBorderColor | integer or string | The border color when there are errors on the input fields, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color of the input field when it is receiving focus | -| focusedErrorBorderColor | integer or string | The border color of the input field when it is receiving focus in its error state, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| hintStyle | object | [see properties](#textstyle) | - -#### Button - -| Property | Type | Description | -| :-------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| color | integer or string | The color specification for the text, icons, divider etc, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| padding | string or integer | Padding with CSS-style value | - -#### options for Input.variant - -| Property | Description | -| :-------- | :--------------------------------------------------------- | -| underline | Draw an Underline below applicable input widgets (default) | -| box | Draw a Box border around applicable input widgets | - -### Transitions - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------- | -| page | object | [see properties](#properties-for-transitionspage) | -| modal | object | Same properties as the `page` property except `alignment`. | - -#### Properties for Transitions.page - -| Property | Type | Description | -| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| type | string | Kind of transition types. Can read more about it [here](/build/extend/3-animations). Possible values are `fade`,`rightToLeft`,`leftToRight`,`topToBottom`,`bottomToTop`,`scale`,`rotate`,`size`,`rightToLeftWithFade`,`leftToRightWithFade`,`leftToRightPop`,`rightToLeftPop`,`topToBottomPop`,`bottomToTopPop` | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| duration | integer | The duration in `ms ( millisecond )` for which the transition animation happens. | diff --git a/build/user-interface/6-responsive.md b/build/user-interface/6-responsive.md deleted file mode 100644 index a3e9818..0000000 --- a/build/user-interface/6-responsive.md +++ /dev/null @@ -1,97 +0,0 @@ -# Building responsive UIs - - - -## In a nutshell: - -1. Use `${device.width}` to modify properties according to device width -2. Use the [GridView widget's](/widget-reference/gridview) built-in responsive breakpoints -3. Use the [Flow widget](/widget-reference/flow) to wrap content -4. Use the [Flex widget](/widget-reference/flex) to toggle between horizontal and vertical layouts -5. Avoid setting explicit width and height, specially for container widgets (Rows, Columns, GridView, etc.) - - -## 1. Modify properties based on device width - -You can get the device width and height and modify properties conditionally. In the below example, the column's gap is set to 16 when device width is more than 480, otherwise it is set to 8. - -```yaml -Column: - styles: - gap: "${ device.width > 480 ? 16 : 8 }" -``` - - -## 2. GridView's built-in breakpoints - -[GridView widget](/widget-reference/gridview) includes built-in responsive breakpoints. - -You can pass 1, 3, or 5 values to `horizontalTileCount` property to make the grid responsive based on predefined set of breakpoints. - -| Breakpoint | Width | -| --- | --- | -| xSmall | width <= 480 | -| Small | width > 480 && width <= 800 | -| Medium | width > 800 && width <= 1200 | -| Large | width > 1200 && width <= 1600 | -| XLarge | width > 1600 | - -GridView's horizontalTileCount can be: - -- 1 number - number of tiles for all breakpoints -- 3 numbers - * first number corresponds to xSmall and Small, - * second number corresponds to Medium - * last numner corresponds to xLarge and Large -- 5 numbers, corresponding to each breakpoint - -When not specified, the horizontal tile count is automatic based on resolution. - ---- - -In this example, depending on the available width, there will be 3 to 5 items per row. - -```yaml -GridView: - styles: - horizontalTileCount: 3 4 5 - -# Full example here: -# https://studio.ensembleui.com/app/nWsD5baeykm3W772kkSw/screen/WS6fad3K96prUBXM4Hde -``` - -![Flex](responsive-grid.png) - -## 3. Wrap content with Flow widget - -[Flow widget](/widget-reference/flow) displays its children horizontally and wraps the children when it runs out of horizontal space. - -```yaml -Flow: - styles: - gap: 16 - lineGap: 16 - children: - - MyItem - -# Full example here: -# https://studio.ensembleui.com/app/nWsD5baeykm3W772kkSw/screen/YbsqXNaXL5kpxKavlGKQ -``` - -![Flow](responsive-flow.png) - -## 4. Toggle between horizontal and vertical layouts with Flex widget - -[Flex widget](/widget-reference/flex) dynamically switches between a Row or a Column based on the `direction` property. - -```yaml -Flex: - styles: - direction: '${device.width > 500 ? "horizontal" : "vertical"}' - -# Full example here: -# https://studio.ensembleui.com/app/nWsD5baeykm3W772kkSw/screen/jLdWFkmrfgkhuaON568d - -``` - -![Flex](responsive-flex.png) diff --git a/build/user-interface/7-12-2023 (23-21-29).gif b/build/user-interface/7-12-2023 (23-21-29).gif deleted file mode 100644 index 39e32cd..0000000 Binary files a/build/user-interface/7-12-2023 (23-21-29).gif and /dev/null differ diff --git a/build/user-interface/image-1.png b/build/user-interface/image-1.png deleted file mode 100644 index 754c562..0000000 Binary files a/build/user-interface/image-1.png and /dev/null differ diff --git a/build/user-interface/image-2.png b/build/user-interface/image-2.png deleted file mode 100644 index d9c93cf..0000000 Binary files a/build/user-interface/image-2.png and /dev/null differ diff --git a/build/user-interface/image-3.png b/build/user-interface/image-3.png deleted file mode 100644 index 132b445..0000000 Binary files a/build/user-interface/image-3.png and /dev/null differ diff --git a/build/user-interface/image-4.png b/build/user-interface/image-4.png deleted file mode 100644 index 757d80d..0000000 Binary files a/build/user-interface/image-4.png and /dev/null differ diff --git a/build/user-interface/image-5.png b/build/user-interface/image-5.png deleted file mode 100644 index af28be4..0000000 Binary files a/build/user-interface/image-5.png and /dev/null differ diff --git a/build/user-interface/image-6.png b/build/user-interface/image-6.png deleted file mode 100644 index 0149f22..0000000 Binary files a/build/user-interface/image-6.png and /dev/null differ diff --git a/build/user-interface/image.png b/build/user-interface/image.png deleted file mode 100644 index e0b7ea3..0000000 Binary files a/build/user-interface/image.png and /dev/null differ diff --git a/build/user-interface/input-validation-patterns.md b/build/user-interface/input-validation-patterns.md deleted file mode 100644 index a22c235..0000000 --- a/build/user-interface/input-validation-patterns.md +++ /dev/null @@ -1,8 +0,0 @@ -# Form Input Validation - Interaction Patterns - -Ensemble supports 3 form input validation patterns out of the box with just configurations. We also provide a number of properties and methods on input widgets and form that you can use to support any other patterns as you like. - -- Validate on Form Submit -- Validate on user interaction with the input field -- Hybrid: first time validate on Form submit and then on user interaction -- Custom interactions - use methods and properties diff --git a/build/user-interface/intro.md b/build/user-interface/intro.md deleted file mode 100644 index df9c880..0000000 --- a/build/user-interface/intro.md +++ /dev/null @@ -1,3 +0,0 @@ -# Ensemble User Interface - -Ensemble's iOS and Android apps are built on top of Flutter. We created the Ensemble language (itself based on YAML) to abstract away most of the Flutter complexity, enabling you to build beautiful and highly scalable applications without prior programing experience. diff --git a/build/user-interface/responsive-flex.png b/build/user-interface/responsive-flex.png deleted file mode 100644 index d4b92e1..0000000 Binary files a/build/user-interface/responsive-flex.png and /dev/null differ diff --git a/build/user-interface/responsive-flow.png b/build/user-interface/responsive-flow.png deleted file mode 100644 index 46f8f91..0000000 Binary files a/build/user-interface/responsive-flow.png and /dev/null differ diff --git a/build/user-interface/responsive-grid.png b/build/user-interface/responsive-grid.png deleted file mode 100644 index 47dc7ae..0000000 Binary files a/build/user-interface/responsive-grid.png and /dev/null differ diff --git a/clipboard.js b/clipboard.js deleted file mode 100644 index 9a39659..0000000 --- a/clipboard.js +++ /dev/null @@ -1,9 +0,0 @@ -function copyCode() { - const code = document.querySelector(".code-container code"); - const range = document.createRange(); - range.selectNode(code); - window.getSelection().removeAllRanges(); - window.getSelection().addRange(range); - document.execCommand("copy"); - window.getSelection().removeAllRanges(); -} diff --git a/deploy/1-prepare-app.md b/deploy/1-prepare-app.md deleted file mode 100644 index 24ed526..0000000 --- a/deploy/1-prepare-app.md +++ /dev/null @@ -1,35 +0,0 @@ -# Preparing your App for deployment - -Once you have built your UI with Ensemble and used it to build your app and are ready to take it to production, follow these instructions to deploy it to any iOS or Android devices, or to submit it to the Apple AppStore or Google Play Store. - -### Prerequisites -* Your Ensemble App ID. From [Ensemble Studio](https://studio.ensembleui.com), go to your App's Settings screen to retrieve the App ID. - -### Download Ensemble Starter -Ensemble Starter is our packaging solution, enabling you to connect to your Ensemble UI and package it. -* Clone the Starter App `git clone https://github.com/EnsembleUI/starter my_first_app` into the folder *my_first_app*. You may change the name, but don't use camelCase (e.g. myFirstApp) or dash (-) as the separators. -* Follow the README in this repo. - -### Requesting permissions from your end-users -If your app requires capabilities like location, camera, ..., you will need to enter a reason per capability. These reasons will be prompted to the end users, who can decide whether to grant or deny your requests. -* For iOS, edit `/ios/Runner/Info.plist` and add the below permissions as the direct children of the `` tag. -* For Android, edit `/android/app/src/main/AndroidManifest.xml` and add the below permissions as the direct children of the `` tag. - -Below are the snippet per capability to insert for iOS and Android respectively. - -**Location** -```xml -NSLocationWhenInUseUsageDescription -e.g. This app needs access to your location to .... -``` - -**Camera** -```xml -NSCameraUsageDescription -e.g. your reason for requesting camera access - -NSMicrophoneUsageDescription -e.g. your reason for requesting microphone access -``` - - diff --git a/deploy/2-social-signin.md b/deploy/2-social-signin.md deleted file mode 100644 index bf94072..0000000 --- a/deploy/2-social-signin.md +++ /dev/null @@ -1,95 +0,0 @@ -## Configure Social Sign In for Deployment -Before deployment, you need to configure your own OAuth credentials plus specific setups for each platforms. - -### Setting up Sign In credentials -On Google's API Console, create your OAuth client ID for each platform (i.e. iOS, Android, Web). - -For `iOS`, enter the bundle ID of your App. - -Google iOS client ID - -For `Android`, use Web Application type (don't use Android type). You can leave Authorized Origins and Redirect URIs blank. - -Google Android client ID - -For `Web`, use Web Application type. -- Authorized Origins should be your domain (e.g. https://mycompany.com). You can also use localhost while in development (e.g. http://localhost:3000). -- Redirect URIs can be empty. - -webclient ID - -Using a code or text editor, open `/ensemble/ensemble-config.yaml` and enter these credentials. - -```yaml -... -services: -  signIn: -    providers: -      google: -        iOSClientId: -        androidClientId: -        webClientId: -``` - -#### Setting up iOS -On Google's API Console, open the OAuth client ID for iOS and look for the `iOS URL Scheme` under Additional Information. - -Open `/ios/Runner/Info.plist` with a code editor, look for the block below and replace the value with your iOS URL Scheme. - -```yaml - - CFBundleURLTypes - - - - CFBundleTypeRole - Editor - CFBundleURLSchemes - - your_iOS_URL_scheme_here - - - -``` - -#### Setting up Android -There is no additional setup required for Android. - -#### Setting up Web -In the `web/index.html` file, look for the block below and replace the value with your Web client ID. -```html - -``` - - - - - -### Enable Auth service in Ensemble code - -By default, Ensemble does not include the authentication module to avoid installing unnecessary packages. Here, we uncomment a few lines of code to get the necessary packages. - -* Under pubspec.yaml. Uncomment the Auth module block, then run `flutter pub get`. -```yaml - # Uncomment to enable Auth service - ensemble_auth: - git: - url: https://github.com/EnsembleUI/ensemble_module_auth.git - ref: main -``` - -* Uncomment and update the following lines in `/lib/generated/ensemble_modules.dart`. Try running it with `flutter run` -``` -... -import 'package:ensemble_auth/auth_module.dart'; -... -static const useAuth = true; # set to true -... -if (useAuth) { - // Uncomment to enable Auth service - AuthModuleImpl().init(); -} else { - AuthModuleStub().init(); -} -... -``` diff --git a/deploy/3-ios-appstore.md b/deploy/3-ios-appstore.md deleted file mode 100644 index f6fae8d..0000000 --- a/deploy/3-ios-appstore.md +++ /dev/null @@ -1,29 +0,0 @@ -# Deploy to iOS TestFlight -Note: we are showing here how to deploy your app to Apple TestFlight. Please follow Apple's [documentation](https://developer.apple.com/app-store/submitting/) on how to deploy to the App Store. -#### Register app -If this is a brand-new app, you first need to register a unique Bundle ID and a unique App Name with Apple. -1. [Register the Bundle ID](https://developer.apple.com/account/resources/identifiers/bundleId/add/bundle) `e.g. com.mycompany.appname`. This is important and cannot be changed later on. You'll also need this ID later in this document. - -Add Bundle ID - -2. [Create a New App](https://appstoreconnect.apple.com/apps) using a unique App Name and this Bundle ID. The App Name is how your app will eventually be searchable and appear in the App Store. - -Add App - -#### Preparing Ensemble for uploading -* Make sure you completed the [Preparing your App](/deploy/1-prepare-app.md) step, including following the starter repo's README instruction to configure and run your App. -* Navigate to the app folder (e.g. my_first_app). -* Under `ios` folder, open `Runner.xcworkspace` with [XCode](https://developer.apple.com/xcode/). - * Select the Team (Apple Account) used to create the App and Bundle ID. You may need to log in to your Apple Developer Account under XCode > Preferences > Accounts. - * Under `Signing & Capabilities`, ensure the `Bundle Identifier` matches exactly your Bundle ID above. - Update App configs - - * Under `Info`, find the `Bundle display name` key and update its value to your desire name (e.g. My First App). This is the name that shows up once your App has been installed. This doesn't have to exactly match your App Name, and can be shorter so its name is not cut off under the App icon. - Add App - -* Run `flutter build ipa --no-tree-shake-icons`. This will create the ipa file at /build/ios/ipa/my_first_app.ipa. -* Download Apple’s [Transporter](https://apps.apple.com/us/app/transporter/id1450874784?mt=12) and login with the same Apple account. Drop the ipa file into the Transporter App then click Deliver. - * This may take 5-10 minutes AFTER upload completes before the build shows up under `Your App Name > TestFlight` tab, plus another 10-15 minutes to complete processing. -* Click to manage Apple's app compliance by answering the questions. - Update App configs -* You can now invite your team members to install your App under `Internal Testing`. Each person can download the app via TestFlight. diff --git a/deploy/3-oauth-services.md b/deploy/3-oauth-services.md deleted file mode 100644 index fed68bd..0000000 --- a/deploy/3-oauth-services.md +++ /dev/null @@ -1,134 +0,0 @@ -# Connecting to OAuth services (Optional) - -Ensemble supports authorizing and fetching data from OAuth2 services like Google and Microsoft. The entire flow is handled automatically if you are using Ensemble Go to preview your app. - -When deploying your Production App and you'd like to use OAuth Services, please follow these instructions to configure your back-end server to work with Ensemble's UI. - -## App Redirect -When an OAuth flow is initiated within the UI, Ensemble will redirect the users to the appropriate OAuth service's login page. Once the users enter their username/password and authorize your app, the OAuth service will invoke a callback URL (known as Redirect URL) that your app defines. This Redirect URL will re-open your app and continue the OAuth flow. - -The Redirect URL to open your App can be a Http App Link or a Custom Scheme (non-http). - -### Custom Scheme -#### iOS -- Look for `CFBundleURLTypes` inside the ios/Runner/Info.plist and update accordingly. - - `CFBundleURLName` - By convention match this with your bundleID - - `CFBundleURLSchemes` - When registering with the OAuth services, they may give you a unique string or enable you to enter your own. The scheme follows this format `some.globally.unique.scheme://`. This has to be unique so it doesn't clash with any other apps out there. - - Enter only the portion before the `://`. -``` -CFBundleURLTypes - - - CFBundleURLName - com.mycompany.myapp - CFBundleURLSchemes - - some.globally.unique.scheme - - - -``` - -#### Android -- Open `android/app/src/main/AndroidManifest.xml`. Look for the callback Activity and add an `intent-filter` for your callback. -- e.g. if your callback URL looks like this `some.globally.unique.scheme://authorize`, the android:scheme should be `some.globally.unique.scheme`, and android:host should be `authorize`. -``` - - - - - - - - - - - - - -``` - - -### Http App Link -Using a URL to redirect and open your App requires two steps for each platform: 1. adding a configuration similar to the custom schemes above, and 2. prove that you own the redirect URL's domain. -#### iOS -- Open `ios/Runner/Runner.entitlements` and add an entry for the URL you want to redirect to your App. Note the required prefix `applinks:`. -- For example, if your want the URL `https://auth.mycompany.com/callback` to open your app. Enter only the domain to the URL below. -``` - - com.apple.developer.associated-domains - - - applinks: .... - - - applinks:auth.mycompany.com - - -``` - -- Prove that you own the domain URL above by uploading the json file below to your domain (or subdomain - depending what you used). - - The file should be called `apple-app-site-association` and served with Content-Type of `application/json`. - - The file can be at the root of your server or under a folder called `.well-known`. - - Using the example URL above, add `/callback` to the paths. -``` -{ - "applinks": { - "apps": [], - "details": [ - { - "appID": ".", // e.g. 3GHDU3434.com.mycompany.myapp - "paths": ["/"] // e.g. /callback - }, - { - .. other Apps and paths here ... - } - ] - } -} -``` - -#### Android -- Open `android/app/src/main/AndroidManifest.xml`. Look for the callback Activity and add an `intent-filter` for your callback. - - android:host is the URL domain or subdomain that will open the app, while android:pathPrefix is the path after the domain. - - For example, use the below if your want the URL `https://auth.mycompany.com/callback` to open your app. -``` - - - - - - - -``` -- Prove that you own the domain URL above by uploading the json file below to your domain (or subdomain - depending what you used). - - The file should be called `assetlinks.json` and served with Content-Type of `application/json`. - - The file can be at the root of your server or under a folder called `.well-known`. - - Get your app's SHA256 by going to Google Play's developer console. -``` -[ - { - "relation": ["delegate_permission/common.handle_all_urls"], - "target": { - "namespace": "android_app", - "package_name": "com.mycompany.myapp", - "sha256_cert_fingerprints": [ - "", - ] - } - } -] -``` - -## Server component -Once the OAuth service successfully authenticates the user and redirect back to our App, we will be making a call to your server and pass the OAuth code. Your service will be exchanging this code for the access/refresh token. -- We provide the sample server code in Node (deployable with Firebase). -- Open `ensemble/ensemble-config.yaml` and go to `services -> apiAuthorization`. - - Replace the `tokenExchangeServer` \ No newline at end of file diff --git a/deploy/4-android-device.md b/deploy/4-android-device.md deleted file mode 100644 index 1b6ed88..0000000 --- a/deploy/4-android-device.md +++ /dev/null @@ -1,14 +0,0 @@ -# Deploy to Android devices - -* Make sure you completed the [Preparing your App](/deploy/1-prepare-app.md) step, then navigate to the folder created (e.g. my_first_app). -* Run `flutter create --platforms=android .` (note the period at the end) -* Run `flutter build apk --no-tree-shake-icons` to build the APKs (destination is /build/app/outputs/flutter-apk/). -* Connect your Android device to your computer, then run `adb install build/app/outputs/flutter-apk/app-release.apk`. - - -### Customizing your App -* Play Store requires each app to have a unique app ID, which cannot be changed after your submit your App. - * To update the app ID, open `/android/app/build.gradle`. Go to `android > defaultConfig > applicationId` and update the value. - * Remove `/android/app/src/main/AndroidManifest.xml`. - * Run `flutter create --platforms=android .`. -* To update the app's name. Open `/android/app/src/main/AndroidManifest.xml` and change the `android:label=` to the app name. diff --git a/deploy/5-android-play-store.md b/deploy/5-android-play-store.md deleted file mode 100644 index 95fe3dd..0000000 --- a/deploy/5-android-play-store.md +++ /dev/null @@ -1,30 +0,0 @@ -# Deploy to Android Play Store - -## Pre-requisites -* Make sure you completed the [Preparing your App](/deploy/1-prepare-app.md) step, then navigate to the folder created (e.g. my_first_app). -* Sign your Android app's release version. The below is a demonstration and maybe out-of-date. Please follow Android's latest documentation for up-to-date information. - * Generate a release key using Java's keytool - * Run `keytool -genkey -v -keystore ~/.jks -keyalg RSA -keysize 2048 -validity 10000 -alias ` - * Replace and to your liking. The tool will also ask you to choose the passwords. - * Under the /android folder, create a file called `key.properties`(DO NOT check this in) and populate these required values: -``` -storePassword= -keyPassword= -keyAlias= -storeFile= -``` - * Open `/android/app/build.gradle`. Under `android > buildTypes > release`, enter `signingConfig signingConfigs.release`. - -## Uploading your build -* Navigate to the folder for your project (e.g. my_first_app). -* Open the file `pubspec.yaml` and look for `version` e.g. version: 1.0.0+1. The last number is the build number which has to be unique on every upload. Simply increment it for each production build. -* Run `flutter build appbundle --no-tree-shake-icons`. This will create the bundle file under `build/app/outputs/bundle/release/app-release.aab`. -* Log into your [Play Store console](https://play.google.com/console) and go to your App. Select your release and upload the `.aab` file. - -## Updating your Play Store app. -* Once your app has been approved and live on the Play Store, follow these instructions for subsequent updates: - * Run `flutter pub upgrade` to upgrade Ensemble dependencies. This may include framework's bug fixes as well as new widget additions. - * If you are using Ensemble-hosted definitions, you already have the latest page definitions. -* Increment the version (the one after the + sign) in `pubspec.yaml`. -* Run `flutter build appbundle --no-tree-shake-icons`. This will create the bundle file under `build/app/outputs/bundle/release/app-release.aab`. -* Log into your [Play Store console](https://play.google.com/console) and go to your App. Select your release and upload the `.aab` file. diff --git a/deploy/6-prepare-for-production.md b/deploy/6-prepare-for-production.md deleted file mode 100644 index f836a5a..0000000 --- a/deploy/6-prepare-for-production.md +++ /dev/null @@ -1,98 +0,0 @@ -# Prepare for Production - -Now, that you have built and tested an ensemble app, you would like to publish. Before publishing your app, it is recommended to make it production-ready. - -This guide covers covers the following topics. - -- **Adding a launcher icons** -- **Adding native splash screen** - -## Adding a launcher icons - -Launcher icons are required as the visual representation of the app on the device's home screen and app drawer, helping users quickly identify and launch the app. - -Currently, the Flutter logo serves as the default icon. Let's see how to replace it with your product's logo. - -We'll be using a package called fluter launcher icons from [pub.dev](https://pub.dev/packages/flutter_launcher_icons). - -- First add the package as dev dependency in `pubspec.yaml`. -```yaml -dev_dependencies: - flutter_launcher_icons: any -``` - -- Add launcher icon configuration inside `pubspec.yaml` -```yaml -flutter_icons: - android: "launcher_icon" - ios: true - # Add path to your icon image. - image_path: "assets/icon/icon.png" - web: - generate: true - image_path: "path/to/image.png" - background_color: "#hexcode" - theme_color: "#hexcode" -``` - -- Run the following command in terminal, to update native launcher icons with above configuration -```bash -flutter pub get -flutter pub run flutter_launcher_icons -``` - -For more nitty-gritty detail check [flutter_launcher_icons#book-guide](https://pub.dev/packages/flutter_launcher_icons#book-guide) - - -## Adding Native Splash screen - -When launching an app, a splash screen is the initial display that a user sees. By default, a native app shows a white screen, but with a splash screen, you can showcase your brand or product logo, and provide the user with a visual cue that the app is in the process of loading. - -We'll be using a package called fluter native screen from [pub.dev](https://pub.dev/packages/flutter_native_splash). - -To add a splash screen to your app, these steps should be followed: - -- First add the package as dev dependency in `pubspec.yaml`. -```yaml -dev_dependencies: - flutter_native_splash: any -``` - -- Add splash screen configuration inside `pubspec.yaml` -```yaml -flutter_native_splash: - - # color or background_image is the only required parameter. - # Only one parameter can be used, color and background_image cannot both be set. - color: "#hexcode" - #background_image: "assets/background.png" - - # The image parameter allows you to specify an image used in the splash screen. It must be a - # png file and should be sized for 4x pixel density. - #image: assets/splash.png - - # The branding property allows you to specify an image used as branding in the splash screen. - # It must be a png file. It is supported for Android, iOS and the Web. For Android 12, - # see the Android 12 section below. - #branding: assets/dart.png - - # To position the branding image at the bottom of the screen you can use bottom, bottomRight, - # and bottomLeft. The default values is bottom if not specified or specified something else. - #branding_mode: bottom - - # Dark theme parameters, if not set above params will be used. - #color_dark: "#042a49" - #background_image_dark: "assets/dark-background.png" - #image_dark: assets/splash-invert.png - #branding_dark: assets/dart_dark.png -``` - -- Run the following command in terminal, to update native slash screen setting with above configuration -```bash -flutter pub get -flutter pub run flutter_native_splash:create -``` - -Re-run your app and you'll see newly added splash screen. - -For more nitty-gritty detail check [flutter_native_splash#usage](https://pub.dev/packages/flutter_native_splash#usage) diff --git a/deploy/7-offline-mode.md b/deploy/7-offline-mode.md deleted file mode 100644 index a83f005..0000000 --- a/deploy/7-offline-mode.md +++ /dev/null @@ -1,57 +0,0 @@ -# Making your app work when offline - -You can embed your app definition in your build output so that your app works without network connectivity. Note that once you make this change, you will not have the ability to change the app from Ensemble Studio. - -## Prerequisites - -* You have completed the [Prepare your app for deployment step](/deploy/1-prepare-app). -* You have a text or code editor on your machine. We recommend [VS Code](https://code.visualstudio.com/). - -## Step 1. Create a folder for your app - -In your local directory where you cloned Ensemble Starter, navigate to `/ensemble/apps` folder. Create a new folder with your desired name, and no spaces. - -This name will not be customer-facing. - -Local app folder - -## Step 2. Copy your screen definitions - -For each screen you've created in Ensemble Studio, follow these steps: - -* Inside the folder you created, create a file with `.yaml` extension, and name the file matching your screen name in Studio. E.g. for a screen named `Home`, create a file named `Home.yaml`. -* Open the local file with your desired code or text editor. -* copy the screen definition from Studio to the local file, and save it. - -## Step 3. Copy your theme - -If you have added theme configuration in Studio, follow these steps: - -* Inside the folder you created, create a file named `theme.ensemble`. -* Go to the theme section in Studio, and copy the theme definition to this file. -* Don't forget to save it! - -## Step 4. Update your app to read the definitions locally - -In your local directory where you cloned Ensemble Starter, open `/ensemble/ensemble-config.yaml` file with your desired code or text editor. - -At the top, set the `from` property to `local`: - -```yaml -definitions: - # where your page definitions are hosted ('local', 'remote' or 'ensemble') - from: local -``` - -Then set the `appId` and `appHome` properties under `local` - -```yaml - local: - path: ensemble/apps/ - appId: myApp # this is the name of the folder you created in step 1 - appHome: MyHomeScreen # this is the name of the screens that should be rendered first when your app id launched -``` - -## 5. Rebuild your app - -Now you can follow the steps for iOS or Android to build and upload your app to the respective app stores. diff --git a/deploy/8-google-play-api-key.md b/deploy/8-google-play-api-key.md deleted file mode 100644 index 3788a3f..0000000 --- a/deploy/8-google-play-api-key.md +++ /dev/null @@ -1,79 +0,0 @@ -# Guide: Generating Google Play Console API Key - -## Overview - -This guide outlines the steps to generate a Google Play Console API Key, enabling seamless deployment of APKs or App Bundles directly to the Google Play Store. Make sure to follow these steps sequentially for a smooth process. - -**Note:** Before using the Google API for direct app uploads, you must manually upload at least one build to Google Play Console. However, the build system can still be used to obtain the APK/App Bundle for subsequent uploads. - -## Steps for Creating Google Play API Key - -1. **Log in to Google Cloud Console:** - - Open [Google Cloud Console](https://console.cloud.google.com/). - - Ensure you are logged in with the same account as your Google Play Console. - - If needed, switch accounts by clicking on the avatar. - -2. **Select Google Play Console Developer:** - - Confirm that your account is set to `Google Play Console Developer` in the dropdown menu (located right of the Google Cloud Console logo). - -3. **Access APIs & Services:** - - Select `APIs & Services` from Quick Access. If not visible, use the search bar in the top center. - -![Google Cloud Console Home screen](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/b88f2d9e-8959-4c03-aa3d-b30b3aac56da) - -4. **Navigate to Credentials:** - - In the left panel, click on `Credentials`. - -5. **Create Service Account:** - - Click on `+ Create Credentials` at the top, then select `Service Account`. - - Provide a name for the service account (memorable for identification). - - Click `Create and Continue`. - -![Add Credentials](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/2f64dff5-5657-40dd-9461-e79eb5ccb6aa) - -6. **Define Role:** - - Choose the role as `Service Account User`. - - Click `Done` to create the API Key. - -![Select adequate role](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/81cb60a6-acac-41d4-b18b-53faceaa2bd6) - -7. **Copy Email Address:** - - Copy the email address of the created key (will be needed later). - -8. **Manage Key:** - - Click on the edit icon in the Action row, select `Manage Key`. - -![Manage Key](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/da4986fe-311c-4080-87cc-240b119fbce2) - -9. **Generate JSON Key File:** - - In the `Keys` tab, click on `Add Key`, then `Create new key`. - - Choose `JSON` and click `Create`. - - Save the downloaded `.json` file securely. - -![Download json key](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/0cede178-01ac-4fe8-841d-25e59067f9ec) - -**Note:** This key needs to be linked to Google Play Console before use. - -10. **Link Key to Google Play Console:** - - Open [Google Play Console](https://play.google.com/console/) and go to `Users and Permissions` in the sidebar. - -11. **Invite New Users:** - - Click on `Invite New Users` and paste the email address saved in step 7. - -![Invite new user](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/bd4df269-e351-4dad-a82d-acb45bc99801) - -12. **Set App Permissions:** - - In the App Permissions tab, select the apps for direct upload using the build system. - -![App Permissions](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/e2294e7f-01e2-4223-a378-9851fc34b1fe) - -13. **Configure Account Permissions:** - - In the `Account Permissions` tab, check relevant options under `App Access` and `Releases`. - -![Account permissions 1](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/41ae9244-7dd3-4ba5-b7bf-26068bd85ac7) -![Account permissions 2](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/5fd3b828-cfd9-4be8-9b21-54125c38a09e) - -14. **Send Invite:** - - Click on `Invite User`, then `Send Invite` to link the generated key with the apps successfully. - -Follow these steps diligently to ensure a hassle-free setup of your Google Play Console API Key. diff --git a/deploy/9-appstore-connect-api-key.md b/deploy/9-appstore-connect-api-key.md deleted file mode 100644 index 42eb448..0000000 --- a/deploy/9-appstore-connect-api-key.md +++ /dev/null @@ -1,47 +0,0 @@ -# Guide: Generating API Key for App Store Connect - -## Overview - -This guide provides step-by-step instructions on generating an API key for App Store Connect. This key allows you to interact programmatically with App Store Connect which would be required for deploying apps directly to App Store Connect using Build System. - -**Note:** Ensure you have the necessary App Store Connect account permissions to generate API keys. - -## Steps for Creating API Key - -1. **Navigate to App Store Connect:** - - Visit [App Store Connect](https://appstoreconnect.apple.com/). - -2. **Log in to Your Account:** - - Log in with your App Store Connect credentials. - -3. **Access API Keys Section:** - - From the homepage, navigate to the `Users and Access` section. - -4. **Select API Keys:** - - Click on the `Keys` option from the top. - -5. **Generate a New API Key:** - - Click on the `+` button. - -![Keys section](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/a1622af9-6bc4-44e8-9d40-01ecaa802e38) - -6. **Fill in the Details:** - - Provide a name for your API key. It will be useful to identify your key later on. - - Choose `App Manager` in the access part of the dialog. - -![API Key form](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/63059213-709b-4686-84ab-7293398951e1) - -7. **Generate the Key:** - - Click on the `Generate` button to create the API key. - -8. **Download and Store the Key:** - - There will be a `Download` button for the newly generated key. Download the `.p8` file which is the API key. - - Safely store the key file, as it cannot be downloaded again. - -![Download the generated API Key](https://github.com/EnsembleUI/ensemble_docs/assets/46677360/4998013e-c189-4289-97b9-e4a6fb61038a) - -9. **Copy Key ID and Issuer ID:** - - Copy the `Key ID` for the generated key. Also, copy the `Issuer Id` at the top. - - They both will be required later on in the build system. - -Follow these steps to successfully generate an API key for App Store Connect, allowing seamless integration with the Build System. diff --git a/device-capabilities/index.md b/device-capabilities/index.md deleted file mode 100644 index 9841d8b..0000000 --- a/device-capabilities/index.md +++ /dev/null @@ -1,16 +0,0 @@ -# Directory for device capabilities - -- [checkPermission](/actions/26-checkPermission) -- [connectWallet](/actions/18-connectWallet) -- [getLocation](/actions/14-getLocation) -- [getPhoneContacts](/actions/25-getPhone) -- [invokeHaptic](/actions/23-invokeHaptic) -- [openCamera](/actions/3-openCamera) -- [openURL](/actions/10-openUrl) -- [pickFiles](/actions/16-pickFiles) -- [rateApp](/actions/28-rateApp) -- [requestNotification](/actions/19-requestNotificationAccess) -- [share](/actions/27-share) -- [showNotification](/actions/20-showNotification) -- [uploadFiles](/actions/15-uploadFiles) -- [storage](/javascript-reference/storage.md) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 08ec05c..f41e2b8 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -38,7 +38,6 @@ - [(BranchIO) Deferred Deep Linking](build/deep-link/deferred-deeplink.md) - [Define logic](javascript-reference/README) - - Add interactions with Actions - See Actions Reference - [Using local assets](build/local-assets) - [Adding custom fonts](build/custom-fonts) - [Application Secrets](build/secrets) @@ -112,6 +111,7 @@ - [Index](/widget-reference/directory) - [Avatar](/widget-reference/avatar) - [Button](/widget-reference/button) + - [Calendar](/widget-reference/calendar) - [Carousel](/widget-reference/carousel) - [Checkbox](/widget-reference/checkbox) - [Column](/widget-reference/column) @@ -155,8 +155,23 @@ - Miscellaneous - [External Screen](/miscellaneous/external-screen) - -- [Device Capabilities](/device-capabilities/index) + - [App Information](/miscellaneous/app-info) + +- Device Capabilities + - [checkPermission](/device-capabilities/26-checkPermission) + - [connectWallet](/device-capabilities/18-connectWallet) + - [getLocation](/device-capabilities/14-getLocation) + - [getPhoneContacts](/device-capabilities/25-getPhone) + - [invokeHaptic](/device-capabilities/23-invokeHaptic) + - [openCamera](/device-capabilities/3-openCamera) + - [openURL](/device-capabilities/10-openUrl) + - [pickFiles](/device-capabilities/16-pickFiles) + - [rateApp](/device-capabilities/28-rateApp) + - [requestNotification](/device-capabilities/19-requestNotificationAccess) + - [share](/device-capabilities/27-share) + - [showNotification](/device-capabilities/20-showNotification) + - [uploadFiles](/device-capabilities/15-uploadFiles) + - [storage](/device-capabilities/storage.md) - [Tips and Tricks](tips-and-tricks/directory) diff --git a/actions/10-openUrl.md b/docs/device-capabilities/10-openUrl.md similarity index 100% rename from actions/10-openUrl.md rename to docs/device-capabilities/10-openUrl.md diff --git a/actions/14-getLocation.md b/docs/device-capabilities/14-getLocation.md similarity index 100% rename from actions/14-getLocation.md rename to docs/device-capabilities/14-getLocation.md diff --git a/actions/15-uploadFiles.md b/docs/device-capabilities/15-uploadFiles.md similarity index 100% rename from actions/15-uploadFiles.md rename to docs/device-capabilities/15-uploadFiles.md diff --git a/actions/16-pickFiles.md b/docs/device-capabilities/16-pickFiles.md similarity index 100% rename from actions/16-pickFiles.md rename to docs/device-capabilities/16-pickFiles.md diff --git a/actions/18-connectWallet.md b/docs/device-capabilities/18-connectWallet.md similarity index 100% rename from actions/18-connectWallet.md rename to docs/device-capabilities/18-connectWallet.md diff --git a/actions/19-requestNotificationAccess.md b/docs/device-capabilities/19-requestNotificationAccess.md similarity index 100% rename from actions/19-requestNotificationAccess.md rename to docs/device-capabilities/19-requestNotificationAccess.md diff --git a/actions/20-showNotification.md b/docs/device-capabilities/20-showNotification.md similarity index 100% rename from actions/20-showNotification.md rename to docs/device-capabilities/20-showNotification.md diff --git a/actions/23-invokeHaptic.md b/docs/device-capabilities/23-invokeHaptic.md similarity index 100% rename from actions/23-invokeHaptic.md rename to docs/device-capabilities/23-invokeHaptic.md diff --git a/actions/25-getPhone.md b/docs/device-capabilities/25-getPhone.md similarity index 100% rename from actions/25-getPhone.md rename to docs/device-capabilities/25-getPhone.md diff --git a/actions/26-checkPermission.md b/docs/device-capabilities/26-checkPermission.md similarity index 100% rename from actions/26-checkPermission.md rename to docs/device-capabilities/26-checkPermission.md diff --git a/actions/27-share.md b/docs/device-capabilities/27-share.md similarity index 100% rename from actions/27-share.md rename to docs/device-capabilities/27-share.md diff --git a/actions/28-rateApp.md b/docs/device-capabilities/28-rateApp.md similarity index 100% rename from actions/28-rateApp.md rename to docs/device-capabilities/28-rateApp.md diff --git a/actions/3-openCamera.md b/docs/device-capabilities/3-openCamera.md similarity index 100% rename from actions/3-openCamera.md rename to docs/device-capabilities/3-openCamera.md diff --git a/docs/device-capabilities/index.md b/docs/device-capabilities/index.md index 2819f77..9841d8b 100644 --- a/docs/device-capabilities/index.md +++ b/docs/device-capabilities/index.md @@ -12,4 +12,5 @@ - [requestNotification](/actions/19-requestNotificationAccess) - [share](/actions/27-share) - [showNotification](/actions/20-showNotification) -- [uploadFiles](/actions/15-uploadFiles) \ No newline at end of file +- [uploadFiles](/actions/15-uploadFiles) +- [storage](/javascript-reference/storage.md) diff --git a/javascript-reference/storage.md b/docs/device-capabilities/storage.md similarity index 100% rename from javascript-reference/storage.md rename to docs/device-capabilities/storage.md diff --git a/docs/index.html b/docs/index.html index 1a6b31b..cac3202 100644 --- a/docs/index.html +++ b/docs/index.html @@ -34,7 +34,7 @@ text: 'Edit this document', text: '
memoEdit this document
', // repo: 'ensemble_docs', - repo: 'https://github.com/EnsembleUI/ensemble_docs/blob/main/', + repo: 'https://github.com/EnsembleUI/ensemble_docs/blob/main/docs/', cssClass: 'docsify-edit-link m-0' }, search: 'auto', diff --git a/exercises/0-prerequisite.md b/exercises/0-prerequisite.md deleted file mode 100644 index a0bdd6f..0000000 --- a/exercises/0-prerequisite.md +++ /dev/null @@ -1,7 +0,0 @@ -# 0. Prerequisite - -First, clone the [ToDo demo app](https://studio.ensembleui.com/app/31a0ce97-5e34-4d07-b50d-8cf5ff33fab3/screens) so you can modify it. - -Skip if you already followed the [introduction](../) and made your own app. - -Duplicate app \ No newline at end of file diff --git a/exercises/1-update-app-title.md b/exercises/1-update-app-title.md deleted file mode 100644 index 7255ba3..0000000 --- a/exercises/1-update-app-title.md +++ /dev/null @@ -1,8 +0,0 @@ -# 1. Update the title - -The current app's title displayed in the top bar is `Home`. Update it to `ToDo app` and save. Verify the app title is updated. - - -### Here's the expected outcome - -Exercise 1 \ No newline at end of file diff --git a/exercises/2-add-header.md b/exercises/2-add-header.md deleted file mode 100644 index 9d4a6a8..0000000 --- a/exercises/2-add-header.md +++ /dev/null @@ -1,12 +0,0 @@ -# 2. Add a header - -Our UX designer is not happy because we forgot to add a header. Using the `Text` widget, add "My tasks" above the list. We also got the following styling requirements from the designer: - -* Font size is 22 -* Font weight is bold - -The properties you need to set on the `Text` widget are `text` and `styles`. `styles` will have two properties: `fontSize` and `fontWeight`. - -### Here's the expected outcome - -Exercise 2 \ No newline at end of file diff --git a/exercises/3-add-location-field.md b/exercises/3-add-location-field.md deleted file mode 100644 index dfa5b0f..0000000 --- a/exercises/3-add-location-field.md +++ /dev/null @@ -1,11 +0,0 @@ -# 3. Add location field - -We got a new requirement to store a location for each task. Our backend team already added the `location` field. Here's what you need to do: - -1. Add another text input for location, with label Location. -2. Pass the location value to `createToDo` API. To do so, give this text field an id -3. Test and verify location of new tasks are stored in [Airtable](https://airtable.com/shrYy4pqloELiJNOm) - -### Here's the expected outcome - -Exercise 3 \ No newline at end of file diff --git a/exercises/4-display-task-locations.md b/exercises/4-display-task-locations.md deleted file mode 100644 index 68f50fc..0000000 --- a/exercises/4-display-task-locations.md +++ /dev/null @@ -1,7 +0,0 @@ -# 4. Display task locations - -To display the task location after the name, update the `trailingText` property to include more content. Add `@ ${todoItem.fields.location}` at the end of the existing value. - -### Here's the expected outcome - -Exercise 4 \ No newline at end of file diff --git a/exercises/final-code.md b/exercises/final-code.md deleted file mode 100644 index df922fd..0000000 --- a/exercises/final-code.md +++ /dev/null @@ -1,97 +0,0 @@ -# How did it go? - -Hopefully you got through all exercises. No worries if you didn't. We're enhancing the Studio experience and Ensemble docs. Your feedback would help us achieve that faster. - -**[Fill this 1 minute survey on your experience](https://forms.gle/GDK5CE4WwWniMsGLA)** - -## Completed exercise screen - -```yaml -View: - title: Home - onLoad: - action: invokeAPI - name: getToDos - Column: - styles: - padding: 20 - gap: 20 - children: - - TextInput: - label: Task name - hintText: Enter a task - required: true - id: newTaskName - - TextInput: - label: Location - hintText: e.g. Office - required: true - id: newTaskLocation - - Button: - label: Add - onTap: - action: invokeAPI - name: createToDo - inputs: - name: ${newTaskName.value} - location: ${newTaskLocation.value} - onResponse: - action: invokeAPI - name: getToDos - - Text: - text: My tasks - styles: - fontWeight: bold - fontSize: 22 - - Column: - item-template: - data: ${getToDos.body.records} - name: todoItem - template: - Checkbox: - value: ${todoItem.fields.completed} - trailingText: ${todoItem.fields.desc} @ ${todoItem.fields.location} - onChange: - action: invokeAPI - name: updateToDo - inputs: - payload: - records: - - id: "${todoItem.id}" - fields: - completed: "${this.value}" - onResponse: - action: invokeAPI - name: getToDos - - -API: - - getToDos: - uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' - method: 'GET' - - createToDo: - inputs: - - name - uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' - method: 'POST' - body: - records: - - fields: - desc: "${name}" - completed: false - - updateToDo: - inputs: - - id - - completed - uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' - method: 'PATCH' - body: - records: - - id: "${id}" - fields: - completed: "${completed}" - -``` \ No newline at end of file diff --git a/exercises/index.md b/exercises/index.md deleted file mode 100644 index 05aef9b..0000000 --- a/exercises/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Exercises - -Take a few quick exercises to get hands-on experience with Ensemble. \ No newline at end of file diff --git a/faq.md b/faq.md deleted file mode 100644 index 14fa492..0000000 --- a/faq.md +++ /dev/null @@ -1,9 +0,0 @@ -# FAQs - -### What do I need to know to use Ensemble? - -We've designed Ensemble for both ease of use and flexibility. You can start with little or no programming background, however, experience with YAML will help as Ensemble UIs are written in YAML. This enables developers to quickly define the UI without learning new tools. - -More to come... - - diff --git a/getting-started/1-create-app.md b/getting-started/1-create-app.md deleted file mode 100644 index ca53a90..0000000 --- a/getting-started/1-create-app.md +++ /dev/null @@ -1,18 +0,0 @@ -# Create the UI - -Get started by creating a new UI in [Ensemble Studio](https://studio.ensembleui.com). - -1. Login to Ensemble Studio at [studio.ensembleui.com/sign-in](https://studio.ensembleui.com/sign-in) -2. Click Create new app (creating an app is the same as creating the UI, we call it app for familiarity) - -![Alt text](image.png) - -3. Enter a name for your app, also specify a screen name for first screen ( you can create more later on ) and click Create app. - -![Alt text](image-1.png) - -Along with the app, a screen is created. You can add additional screens as you go along to complete your app. - -In the editor, you see the definition for the UI of your screen that is rendered on the `right`. While in `center` is a default generated yaml code which is generated whenever a new screen or an App is created. On `left` is `Widget Tree` which shows all the widgets you have used. - -![Alt text](image-2.png) diff --git a/getting-started/2-edit.md b/getting-started/2-edit.md deleted file mode 100644 index a0aaf9c..0000000 --- a/getting-started/2-edit.md +++ /dev/null @@ -1,6 +0,0 @@ -# Make your first edit - -Your app definitions are stored server-side. Once you edit and save, the server will notify the client that there are changes to the app. Try it out by changing the title on `Home` screen under `header` from value `Home` to `ToDo App` on line 8. Now click Save at the Top-Right corner or hit `Ctrl + s` on keyboard ( specially if your writing yaml ). You should now see the updated title right away. - -![Alt text](image-3.png) - diff --git a/getting-started/3-ensemble-syntax.md b/getting-started/3-ensemble-syntax.md deleted file mode 100644 index 475ba06..0000000 --- a/getting-started/3-ensemble-syntax.md +++ /dev/null @@ -1,26 +0,0 @@ -# Ensemble Syntax for a screen - -Ensemble apps are written in YAML. YAML is similar to XML and JSON but uses a more minimalist syntax. In general, most things in a YAML file are a form of key-value pair, like: - -```yaml -title: ToDo app -``` - -Now back to Ensemble! `View` is the root object for a screen. View has several properties, such as `header`, `styles`, and `body`. You can read more about them [here](/build/user-interface/1-page-structure) - -```yaml -View: - # set screen styling such as backgroundColor - styles: - - # set the screen title and its styling - header: - - # specify the widget that will contain body of the screen - # this is typically a container widget such as Column, ListView, Stack, ... - body: -``` - -You can see all widget reference [here](/widget-reference/directory) and can also check out the [Kitchen Sink app](https://studio.ensembleui.com/preview/index.html?appId=e24402cb-75e2-404c-866c-29e6c3dd7992) which enlists all the widgets and actions along with example of each . To see the source code of these screens, see the Kitchen Sink app in [Ensemble Studio](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screens). - -Similar to the `View`, each widget has properties that drive its behavior and styling. diff --git a/getting-started/4-form.md b/getting-started/4-form.md deleted file mode 100644 index 56cb4f4..0000000 --- a/getting-started/4-form.md +++ /dev/null @@ -1,112 +0,0 @@ -# Add a Form - -Let’s create a simple Form starting with this base code you can copy and paste into Ensemble Studio - -A Form is a container widget with special behavior such as `onSubmit` event handler. - -```yaml -View: - # Optional - style the screen - styles: - scrollableView: true - - # Optional - set the header for the screen - header: - title: ToDo App - - # Specify the body of the screen - body: - Column: - styles: - padding: 24 - gap: 8 - children: - - Text: - text: Hi there! - - Button: - label: Checkout Ensemble Kitchen Sink - onTap: - openUrl: - url: "https://studio.ensembleui.com/preview/index.html?appId=e24402cb-75e2-404c-866c-29e6c3dd7992" -``` - -Let's create a simple form with one text input and a button. Start by removing the [Text](/widget-reference/text) and [Button](/widget-reference/button) widget and add a [Form](/widget-reference/form) widget instead. - -Take note of proper indentation and make sure everything is nested within another; messing this up could cause misrepresentation of the app's data hierarchy. - -### Add a TextInput - -Container widgets have a property called `children` where you can add more widgets. Let's add a [TextInput](/widget-reference/textinput) widget. Here's what you should have so far: - -```yaml -View: - header: - title: ToDo app - styles: - scrollableView: true - - # widget for this View - body: - Column: - styles: - padding: 20 - backgroundColor: white - children: - - Form: - children: - - TextInput -``` - -**What is that dash?** - -`-` is used in YAML to define array items. Since `children` property takes an array of widgets, we use a `-` each time we add a widget to this property. - -### Set properties of the TextInput - -We can define the TextInput's behavior by setting a few properties: - -```yaml -- TextInput: - label: New task - hintText: Enter task name - required: true -``` - -### Add a Button - -Our form needs a button that triggers the form submission. - -```yaml -- Button: - label: Add - submitForm: true -``` - -Save your changes and verify the form appears. - -```yaml -View: - header: - title: ToDo app - styles: - scrollableView: true - - # widget for this View - body: - Column: - styles: - padding: 20 - backgroundColor: white - children: - - Form: - children: - - TextInput: - label: New task - hintText: Enter task name - required: true - - Button: - label: Add - submitForm: true -``` - -![Alt text](image-4.png) diff --git a/getting-started/5-actions.md b/getting-started/5-actions.md deleted file mode 100644 index 6053bdc..0000000 --- a/getting-started/5-actions.md +++ /dev/null @@ -1,19 +0,0 @@ -# Handle events - -Ensemble widgets can trigger events. For instance, a button has an `onTap` event, and a view has an `onLoad` event. - -You handle events by assigning an action to the event: - -```yaml -View: - onLoad: - action: # perform an action here -``` - -Let's add a `onLoad` property to the `View`, and then an `action` to this property. You can see available actions in Ensemble [here](/actions/directory). - -![Alt text](image-5.png) - -Note: There is no api to call but the purpose is just to show how actions can be used, you can check all the actions [here](/actions/directory) - -Let's use `executeCode` action so we can initiate a local storage variable in the next step. diff --git a/getting-started/6-code.md b/getting-started/6-code.md deleted file mode 100644 index 57ed2e4..0000000 --- a/getting-started/6-code.md +++ /dev/null @@ -1,33 +0,0 @@ -# Write code - -Ensemble allows you to write JavaScript code so you can have client-side logic to satisfy your use-cases. You can write code by using the `executeCode` property on any event. - -When using `executeCode`, also specify a `body` property so you can include the code: - -```yaml -View: - onLoad: - executeCode: - body: | - //@code - - // your JavaScript code goes here - // and it could be on multiple lines -``` - -Note the following in the above example: - -1. Use a `|` after `body: ` since you will be writing on multiple lines. This a YAML syntax requirement. -2. Add `//@code` so Ensemble runtime libraries know how to treat the following lines -3. There is another way to write code directly under `onLoad` event and it works as well. - -```yaml -View: - onLoad: | - //@code - // Write an javascript code here -``` - -**Note** - -Ensemble uses ES5 syntax so using `let`, `const`, `arrow functions ()=>{}` is not supported yet. However you can make use use plain functions and `var` for declaring variables. See more details about JavaScript in ensemble [here](/javascript-reference/README) diff --git a/getting-started/7-storage.md b/getting-started/7-storage.md deleted file mode 100644 index e7a1d89..0000000 --- a/getting-started/7-storage.md +++ /dev/null @@ -1,52 +0,0 @@ -# Store data locally - -Ensemble provides local storage that persists unless user clears app or browser data. - -In our ToDo example, we will store an array of to-do items in local storage. When the `View` loads, we create this storage item unless it already exists. - -```yaml -View: - header: - title: ToDo app - styles: - scrollableView: true - onLoad: - executeCode: - body: | - //@code - if (ensemble.storage.todoItems == null) { - ensemble.storage.todoItems = []; - } -``` - -Once you make the above change, you can verify it in the browser's developer tool. ( If you cannot find it under local storage in dev tools just refresh page while still keeping the dev tools opened and you will find it under GetStorage ) - -![Alt text](image-6.png) - -### Store item when form is submitted - -Let's add another event handler, this time the form's `onSubmit`. - -```yaml -- Form: - onSubmit: | - //@code - var items = ensemble.storage.todoItems; - items.push(newTodo.value); - ensemble.storage.todoItems = items; - children: - - TextInput: - id: newTodo - label: New task - hintText: Enter task name - required: true - - Button: - label: Add - submitForm: true -``` - -Note that we added in `id` property to the `TextInput` so we can reference its value in the code section. - -Save and verify the change by adding a new task and pressing the button. - -![Alt text](image-7.png) diff --git a/getting-started/8-item-template.md b/getting-started/8-item-template.md deleted file mode 100644 index 07fdacc..0000000 --- a/getting-started/8-item-template.md +++ /dev/null @@ -1,77 +0,0 @@ -# Display list of items - -A common pattern in UI is displaying a list of items. Ensemble provides `item-template` property to achieve this within the YAML syntax. You can assign this property to container widgets such as `Column`, `Row`, etc. - -`item-template` takes the following properties: - -- `data`: This should point to an array of data. -- `name`: Set this to a value to reference in the `template`. -- `template`: This is where we define the widgets to render for each item. - -| Property | Type | Description | -| -------- | ------ | ------------------------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | widget | The data row widget to render for each item, it can be a custom widget as well. | - -Let's add `item-template` that will display a list of checkboxes for the ToDo items. - -```yaml -item-template: - data: ${ensemble.storage.todoItems} - name: item - template: - Checkbox: - trailingText: ${item} -``` - -Notice the use of `${}`. This is how you tell Ensemble that what's inside the bracket is an expression to be evaluated. In other words, if you're point to a data or doing inline logic, you wrap them with `${}`. - -complete code until now - -```yaml -View: - header: - title: ToDo app - styles: - scrollableView: true - onLoad: - executeCode: - body: | - //@code - if (ensemble.storage.todoItems == null) { - ensemble.storage.todoItems = []; - } - # widget for this View - body: - Column: - styles: - padding: 20 - backgroundColor: white - children: - - Form: - onSubmit: | - //@code - var items = ensemble.storage.todoItems; - items.push(newTodo.value); - ensemble.storage.todoItems = items; - children: - - TextInput: - id: newTodo - label: New task - hintText: Enter task name - required: true - - Button: - label: Add - submitForm: true - item-template: - data: ${ensemble.storage.todoItems} - name: item - template: - Checkbox: - trailingText: ${item} -``` - -Once you save, you should see the item you added previously. Test it by adding a new item too. - -![Alt text](image-8.png) diff --git a/getting-started/9-styling.md b/getting-started/9-styling.md deleted file mode 100644 index 1a249ab..0000000 --- a/getting-started/9-styling.md +++ /dev/null @@ -1,113 +0,0 @@ -# Style widgets - -All widgets, including the `View`, take a `style` property, which is an object. That means you create key-value pairs under the `style`, similar to what you do in CSS. - -For instance, here's how you add margin to the `Column` which is : - -```yaml -Column: -styles: - padding: 20 - backgroundColor: white - margin: 20 12 -children: - - Form: - onSubmit: | - //@code - var items = ensemble.storage.todoItems; - items.push(newTodo.value); - ensemble.storage.todoItems = items; - children: - - TextInput: - id: newTodo - label: New task - hintText: Enter task name - required: true - - Button: - label: Add - submitForm: true -item-template: - data: ${ensemble.storage.todoItems} - name: item - template: - Checkbox: - trailingText: ${item} -``` - -Similar to margin in CSS, you have multiple ways of providing the margin's value: - -- `margin: 20` a single value for all side. -- `margin: 20 0` two values where the first value applies to top/bottom, and second value applies to the sides. -- `margin: 20 10 40 0` four values for each side, starting from top. - -Another handy style is `gap`, which let's you put space between children of container widgets, such as a `Form`. - -```yaml -- Form: - styles: - gap: 16 - onSubmit: | - //@code - var items = ensemble.storage.todoItems; - items.push(newTodo.value); - ensemble.storage.todoItems = items; - children: - - TextInput: - id: newTodo - label: New task - hintText: Enter task name - required: true - - Button: - label: Add - submitForm: true -``` - -The above definition will add a gap of 16 between the `TextInput` and the `Button`. - -Here's the full syntax so far. - -```yaml -View: - header: - title: ToDo app - styles: - scrollableView: true - onLoad: - executeCode: - body: | - //@code - if (ensemble.storage.todoItems == null) { - ensemble.storage.todoItems = []; - } - # widget for this View - body: - Column: - styles: - padding: 20 - backgroundColor: white - margin: 20 12 - children: - - Form: - styles: - gap: 16 - onSubmit: | - //@code - var items = ensemble.storage.todoItems; - items.push(newTodo.value); - ensemble.storage.todoItems = items; - children: - - TextInput: - id: newTodo - label: New task - hintText: Enter task name - required: true - - Button: - label: Add - submitForm: true - item-template: - data: ${ensemble.storage.todoItems} - name: item - template: - Checkbox: - trailingText: ${item} -``` diff --git a/getting-started/home.md b/getting-started/home.md deleted file mode 100644 index 25d334a..0000000 --- a/getting-started/home.md +++ /dev/null @@ -1,12 +0,0 @@ -# Welcome to Ensemble - -Ensemble is a declarative platform for collaboratively building modern user interfaces. - -With Ensemble, you create user interfaces by defining them using a declarative language. Ensemble is designed to focus on the visual and interactive aspects of your application, allowing you to specify the widget tree, interactions, events, and more. This user-centric approach makes it ideal for designing and prototyping user interfaces across multiple platforms, including iOS, Android, web, and desktop apps. By using Ensemble's client libraries, your application's user interface can be rendered consistently, ensuring a seamless user experience across all devices. - -You can get feedback on your UI from your stakeholders through the Ensemble Preview apps on Apple Appstore. Once ready, you can use Ensemble SDK to help you develop your app anyway you like and submit it to Apple Appstore for approval. - - -## Ready to build an app? - -Follow [our guide](/getting-started/1-create-app) to create a simple ToDo app in less than 15 minutes. diff --git a/getting-started/image-1.png b/getting-started/image-1.png deleted file mode 100644 index 13a158b..0000000 Binary files a/getting-started/image-1.png and /dev/null differ diff --git a/getting-started/image-2.png b/getting-started/image-2.png deleted file mode 100644 index a80b584..0000000 Binary files a/getting-started/image-2.png and /dev/null differ diff --git a/getting-started/image-3.png b/getting-started/image-3.png deleted file mode 100644 index b04dacf..0000000 Binary files a/getting-started/image-3.png and /dev/null differ diff --git a/getting-started/image-4.png b/getting-started/image-4.png deleted file mode 100644 index 538ed06..0000000 Binary files a/getting-started/image-4.png and /dev/null differ diff --git a/getting-started/image-5.png b/getting-started/image-5.png deleted file mode 100644 index 149a1e3..0000000 Binary files a/getting-started/image-5.png and /dev/null differ diff --git a/getting-started/image-6.png b/getting-started/image-6.png deleted file mode 100644 index 53d79b1..0000000 Binary files a/getting-started/image-6.png and /dev/null differ diff --git a/getting-started/image-7.png b/getting-started/image-7.png deleted file mode 100644 index a50c73a..0000000 Binary files a/getting-started/image-7.png and /dev/null differ diff --git a/getting-started/image-8.png b/getting-started/image-8.png deleted file mode 100644 index 10782d8..0000000 Binary files a/getting-started/image-8.png and /dev/null differ diff --git a/getting-started/image.png b/getting-started/image.png deleted file mode 100644 index 6ec1336..0000000 Binary files a/getting-started/image.png and /dev/null differ diff --git a/global.css b/global.css deleted file mode 100644 index c0fc823..0000000 --- a/global.css +++ /dev/null @@ -1,30 +0,0 @@ -.code-container { - position: relative; - } - .copy-code-button { - position: absolute; - top: 0; - left: 0; - padding: 8px; - background-color: #f1f1f1; - font-size: 12px; - color: black; - border: none; - cursor: pointer; - z-index:1; - } - .copy-code-button:hover{ - background-color: #000; - color: white; - } - pre > code { - padding: 2.5em 5px !important; - } - pre { - margin: 0; - } - - .language-yaml { - background-color: #f1f1f1; - padding: 10px; - } \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store deleted file mode 100644 index ccae09d..0000000 Binary files a/images/.DS_Store and /dev/null differ diff --git a/images/.nojekyll b/images/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/images/app-qr-code-example.jpg b/images/app-qr-code-example.jpg deleted file mode 100644 index 48fcc0c..0000000 Binary files a/images/app-qr-code-example.jpg and /dev/null differ diff --git a/images/app-qr.png b/images/app-qr.png deleted file mode 100644 index 4a5c424..0000000 Binary files a/images/app-qr.png and /dev/null differ diff --git a/images/build_extend_env_config.png b/images/build_extend_env_config.png deleted file mode 100644 index f844146..0000000 Binary files a/images/build_extend_env_config.png and /dev/null differ diff --git a/images/build_extend_env_usage.png b/images/build_extend_env_usage.png deleted file mode 100644 index 7ffd316..0000000 Binary files a/images/build_extend_env_usage.png and /dev/null differ diff --git a/images/build_extend_secrets_config.png b/images/build_extend_secrets_config.png deleted file mode 100644 index b0aa861..0000000 Binary files a/images/build_extend_secrets_config.png and /dev/null differ diff --git a/images/build_extend_secrets_usage.png b/images/build_extend_secrets_usage.png deleted file mode 100644 index a9b639c..0000000 Binary files a/images/build_extend_secrets_usage.png and /dev/null differ diff --git a/images/deploy_ios_0.png b/images/deploy_ios_0.png deleted file mode 100644 index a116cd6..0000000 Binary files a/images/deploy_ios_0.png and /dev/null differ diff --git a/images/deploy_ios_1.png b/images/deploy_ios_1.png deleted file mode 100644 index 67f5f8f..0000000 Binary files a/images/deploy_ios_1.png and /dev/null differ diff --git a/images/deploy_ios_2.png b/images/deploy_ios_2.png deleted file mode 100644 index 4086a54..0000000 Binary files a/images/deploy_ios_2.png and /dev/null differ diff --git a/images/deploy_ios_3.png b/images/deploy_ios_3.png deleted file mode 100644 index fbc034a..0000000 Binary files a/images/deploy_ios_3.png and /dev/null differ diff --git a/images/deploy_ios_4.png b/images/deploy_ios_4.png deleted file mode 100644 index 2714f16..0000000 Binary files a/images/deploy_ios_4.png and /dev/null differ diff --git a/images/exercise_0.png b/images/exercise_0.png deleted file mode 100644 index 0fa8597..0000000 Binary files a/images/exercise_0.png and /dev/null differ diff --git a/images/exercise_1.jpg b/images/exercise_1.jpg deleted file mode 100644 index 2f1bcf3..0000000 Binary files a/images/exercise_1.jpg and /dev/null differ diff --git a/images/exercise_2.jpg b/images/exercise_2.jpg deleted file mode 100644 index c90d54f..0000000 Binary files a/images/exercise_2.jpg and /dev/null differ diff --git a/images/exercise_3.jpg b/images/exercise_3.jpg deleted file mode 100644 index f171f12..0000000 Binary files a/images/exercise_3.jpg and /dev/null differ diff --git a/images/exercise_4.jpg b/images/exercise_4.jpg deleted file mode 100644 index 94901c2..0000000 Binary files a/images/exercise_4.jpg and /dev/null differ diff --git a/images/favicon.ico b/images/favicon.ico deleted file mode 100644 index b41468d..0000000 Binary files a/images/favicon.ico and /dev/null differ diff --git a/images/firebase-account-details.png b/images/firebase-account-details.png deleted file mode 100644 index 63d00a1..0000000 Binary files a/images/firebase-account-details.png and /dev/null differ diff --git a/images/firebase-auth.mov b/images/firebase-auth.mov deleted file mode 100644 index 689ddee..0000000 Binary files a/images/firebase-auth.mov and /dev/null differ diff --git a/images/firebase-provider-details.png b/images/firebase-provider-details.png deleted file mode 100644 index 52ea920..0000000 Binary files a/images/firebase-provider-details.png and /dev/null differ diff --git a/images/get-web-preview-link.jpg b/images/get-web-preview-link.jpg deleted file mode 100644 index 4938474..0000000 Binary files a/images/get-web-preview-link.jpg and /dev/null differ diff --git a/images/gs1.png b/images/gs1.png deleted file mode 100644 index 375917b..0000000 Binary files a/images/gs1.png and /dev/null differ diff --git a/images/gs2.png b/images/gs2.png deleted file mode 100644 index ae603ea..0000000 Binary files a/images/gs2.png and /dev/null differ diff --git a/images/gs3a.png b/images/gs3a.png deleted file mode 100644 index 85bb25a..0000000 Binary files a/images/gs3a.png and /dev/null differ diff --git a/images/gs3b.png b/images/gs3b.png deleted file mode 100644 index 75d0daa..0000000 Binary files a/images/gs3b.png and /dev/null differ diff --git a/images/gs4.png b/images/gs4.png deleted file mode 100644 index bed077a..0000000 Binary files a/images/gs4.png and /dev/null differ diff --git a/images/gs5a.png b/images/gs5a.png deleted file mode 100644 index c89ed19..0000000 Binary files a/images/gs5a.png and /dev/null differ diff --git a/images/gs7a.png b/images/gs7a.png deleted file mode 100644 index a7bedc7..0000000 Binary files a/images/gs7a.png and /dev/null differ diff --git a/images/gs7b.png b/images/gs7b.png deleted file mode 100644 index ca37c03..0000000 Binary files a/images/gs7b.png and /dev/null differ diff --git a/images/gs8.png b/images/gs8.png deleted file mode 100644 index 0a91f8f..0000000 Binary files a/images/gs8.png and /dev/null differ diff --git a/images/layouts_0.png b/images/layouts_0.png deleted file mode 100644 index ece2081..0000000 Binary files a/images/layouts_0.png and /dev/null differ diff --git a/images/local_app_folder.png b/images/local_app_folder.png deleted file mode 100644 index d53e348..0000000 Binary files a/images/local_app_folder.png and /dev/null differ diff --git a/images/logo.svg b/images/logo.svg deleted file mode 100644 index 6192723..0000000 --- a/images/logo.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/images/page_structure_0.png b/images/page_structure_0.png deleted file mode 100644 index 2282153..0000000 Binary files a/images/page_structure_0.png and /dev/null differ diff --git a/images/page_structure_1.png b/images/page_structure_1.png deleted file mode 100644 index 452e6e7..0000000 Binary files a/images/page_structure_1.png and /dev/null differ diff --git a/images/profile-photo-1.png b/images/profile-photo-1.png deleted file mode 100644 index a668b42..0000000 Binary files a/images/profile-photo-1.png and /dev/null differ diff --git a/images/signin-client.mov b/images/signin-client.mov deleted file mode 100644 index b550f01..0000000 Binary files a/images/signin-client.mov and /dev/null differ diff --git a/images/signin-google-android.png b/images/signin-google-android.png deleted file mode 100644 index 03fee48..0000000 Binary files a/images/signin-google-android.png and /dev/null differ diff --git a/images/signin-google-ios.png b/images/signin-google-ios.png deleted file mode 100644 index 96cad57..0000000 Binary files a/images/signin-google-ios.png and /dev/null differ diff --git a/images/signin-google-web.png b/images/signin-google-web.png deleted file mode 100644 index 7c49b38..0000000 Binary files a/images/signin-google-web.png and /dev/null differ diff --git a/images/todo_app_1.jpg b/images/todo_app_1.jpg deleted file mode 100644 index c21f9e4..0000000 Binary files a/images/todo_app_1.jpg and /dev/null differ diff --git a/images/todo_app_2.jpg b/images/todo_app_2.jpg deleted file mode 100644 index 990fe67..0000000 Binary files a/images/todo_app_2.jpg and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 1a6b31b..0000000 --- a/index.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - - - - - - - Ensemble Docs - - - - -
- - - - - - - - - - - - - - - - - - - - diff --git a/javascript-reference/Date.md b/javascript-reference/Date.md deleted file mode 100644 index a98ec6b..0000000 --- a/javascript-reference/Date.md +++ /dev/null @@ -1,266 +0,0 @@ -# JavaScript Date -The Date object is a built-in JavaScript object that represents a single moment in time, based on the number of milliseconds since January 1, 1970, 00:00:00 UTC. - -- Let us know on our [Discord server](https://discord.gg/k4CJeuRc) if you need any of other capabilities -- or open a [ticket](https://github.com/EnsembleUI/ensemble/issues) - -## Constructors - -### Date() -Creates a new Date object with the current date and time. - -Example: -```js -var date = new Date(); -console.log(date.toString()); // Example output: "Fri Jun 02 2022 12:49:07 GMT+0200 (Central European Summer Time)" -``` - -### Date(milliseconds) -Creates a new Date object with the time set to the number of milliseconds since January 1, 1970, 00:00:00 UTC. - -Example: -```js -var date = new Date(1622633347521); -console.log(date.toString()); // Example output: "Fri Jun 02 2022 12:49:07 GMT+0200 (Central European Summer Time)" -``` -### Date(dateString) -Creates a new Date object with the time set to the value specified by the dateString. - -**Note: The function parses a subset of ISO 8601, which includes the subset accepted by RFC 3339.** - -The accepted inputs are currently: - -* A date: A signed four-to-six digit year, two digit month and two digit day, optionally separated by - characters. Examples: "19700101", "-0004-12-24", "81030-04-01". -* An optional time part, separated from the date by either T or a space. The time part is a two digit hour, then optionally a two digit minutes value, then optionally a two digit seconds value, and then optionally a '.' or ',' followed by at least a one digit second fraction. The minutes and seconds may be separated from the previous parts by a ':'. Examples: "12", "12:30:24.124", "12:30:24,124", "123010.50". -* An optional time-zone offset part, possibly separated from the previous by a space. The time zone is either 'z' or 'Z', or it is a signed two digit hour part and an optional two digit minute part. The sign must be either "+" or "-", and cannot be omitted. The minutes may be separated from the hours by a ':'. Examples: "Z", "-10", "+01:30", "+1130". -* This includes the output of both toString and toIso8601String, which will be parsed back into a DateTime object with the same time as the original. - -The result is always in either local time or UTC. If a time zone offset other than UTC is specified, the time is converted to the equivalent UTC time. - -Examples of accepted strings: - -* "2012-02-27" -* "2012-02-27 13:27:00" -* "2012-02-27 13:27:00.123456789z" -* "2012-02-27 13:27:00,123456789z" -* "20120227 13:27:00" -* "20120227T132700" -* "20120227" -* "+20120227" -* "2012-02-27T14Z" -* "2012-02-27T14+00:00" -* "-123450101 00:00:00 Z": in the year -12345. -* "2002-02-27T14:00:00-0500": Same as "2002-02-27T19:00:00Z" - -This method accepts out-of-range component values and interprets them as overflows into the next larger component. For example, "2020-01-42" will be parsed as 2020-02-11, because the last valid date in that month is 2020-01-31, so 42 days is interpreted as 31 days of that month plus 11 days into the next month. - -Example: -```js -var date = new Date("2022-06-02T10:49:07.521Z"); -console.log(date.toString()); // Example output: "Fri Jun 02 2022 12:49:07 GMT+0200 (Central European Summer Time)" -``` -### Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]) -Creates a new Date object with the specified date and time components. The month parameter is 0-indexed (0 for January, 1 for February, etc.). - -Example: -```js -var date = new Date(2022, 5, 2, 10, 49, 7, 521); -console.log(date.toString()); // Example output: "Thu Jun 02 2022 10:49:07 GMT+0200 (Central European Summer Time)" -``` -## Methods - -### Date.UTC(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]) -Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC for the specified date and time components. - -Example: -```js -var utc = Date.UTC(2022, 5, 2, 10, 49, 7, 521); -console.log(utc); // Example output: 1654259347521 -``` -### getTime() -Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC. - -Example: -```js -var date = new Date(); -var time = date.getTime(); -console.log(time); // Example output: 1622633347521 -``` -### getFullYear() -Returns the year according to the local time. - -Example: -```js -var date = new Date(); -var year = date.getFullYear(); -console.log(year); // Example output: 2022 -``` -### getMonth() -Returns the month according to the local time (0-indexed). - -Example: -```js -var date = new Date(); -var month = date.getMonth(); -console.log(month); // Example output: 5 (for June) -``` -### getDate() -Returns the day of the month according to the local time. - -Example: -```js -var date = new Date(); -var dayOfMonth = date.getDate(); -console.log(dayOfMonth); // Example output: 2 -``` -### getHours() -An integer, between 0 and 23, representing the hours for the given date according to local time. - -Example: -```js -var birthday = new Date('March 13, 08 04:20'); -console.log(birthday.getHours());// Expected output: 4 -``` -### getMinutes() -Returns the minutes according to the local time. - -Example: -```js -var date = new Date(); -var minutes = date.getMinutes(); -console.log(minutes); // Example output: 49 -``` -### getSeconds() -Returns the seconds according to the local time. - -Example: -```js -var date = new Date(); -var seconds = date.getSeconds(); -console.log(seconds); // Example output: 7 -``` -### getMilliseconds() -Returns the milliseconds according to the local time. - -Example: -```js -var date = new Date(); -var milliseconds = date.getMilliseconds(); -console.log(milliseconds); // Example output: 521 -``` -### getDay() -Returns the day of the week according to the local time. - -Example: -```js -var date = new Date(); -var dayOfWeek = date.getDay(); -console.log(dayOfWeek); // Example output: 4 (for Thursday) -``` -### setTime(timeValue) -Sets the Date object to the time represented by the number of milliseconds since January 1, 1970, 00:00:00 UTC. - -Example: -```js -var date = new Date(); -date.setTime(1622633347521); -console.log(date.toString()); // Example output: "Fri Jun 02 2022 12:49:07 GMT+0200 (Central European Summer Time)" -``` -### toJSON() -Returns the Date object as an ISO 8601 formatted string in UTC. - -Example: -```js -var date = new Date(); -var jsonString = date.toJSON(); -console.log(jsonString); // Example output: "2022-06-02T10:49:07.521Z" -``` -### toString() -Returns the Date object as a human readable string. It does not support internationalized strings. -This string can be parsed back into the Date object using the parse() method - -Example: -```js -var date = new Date(); -var str = date.toString() -console.log(str); // Example output: "2023-11-02 17:03:32.094453" -``` -### toISOString() -Returns the Date object as a ISO8601 string. It does not support internationalized strings. -This string can be parsed back into the Date object using the parse() method - -Example: -```js -var event = new Date('2023-11-02 17:07:35.053068'); -var str = date.toISOString() -console.log(str); // Example output: "2023-11-03T00:07:35.053068Z" -``` - -## UTC Methods -These methods are similar to their local-time counterparts but use UTC time instead of local time. - -### getUTCFullYear() -Example: -```js -var date = new Date(); -var utcFullYear = date.getUTCFullYear(); -console.log(utcFullYear); // Example output: 2022 -``` -### getUTCMonth() -Example: -```js -var date = new Date(); -var utcMonth = date.getUTCMonth(); -console.log(utcMonth); // Example output: 5 (for June) -``` -### getUTCDate() -Example: -```js -var date = new Date(); -var utcDate = date.getUTCDate(); -console.log(utcDate); // Example output: 2 -``` -### getUTCHours() -Example: -```js -var date = new Date(); -var utcHours = date.getUTCHours(); -console.log(utcHours); // Example output: 10 -``` -### getUTCMinutes() -Example: -```js -var date = new Date(); -var utcMinutes = date.getUTCMinutes(); -console.log(utcMinutes); // Example output: 49 -``` -### getUTCSeconds() -Example: -```js -var date = new Date(); -var utcSeconds = date.getUTCSeconds(); -console.log(utcSeconds); // Example output: 7 -``` -### getUTCMilliseconds() -Example: -```js -var date = new Date(); -var utcMilliseconds = date.getUTCMilliseconds(); -console.log(utcMilliseconds); // Example output: 521 -``` -### getUTCDay() -Example: -```js -var date = new Date(); -var utcDay = date.getUTCDay(); -console.log(utcDay); // Example output: 4 (for Thursday) -``` -## Arithmatic Operations with Date -You can use a Date object as a primitive and add, subtract, multiply etc. as follows. -Example -```js -var date = new Date(2022, 5, 2, 10, 49, 7, 521); -var yesterday = date - 1000 * 60 * 60 * 24; // current date's milliseconds - 1,000 ms * 60 s * 60 mins * 24 hrs * (# of days beyond one to go back) -yesterday = new Date(yesterday); -console.log(yesterday); //Example output: 1 -``` diff --git a/javascript-reference/Ensemble.md b/javascript-reference/Ensemble.md deleted file mode 100644 index 8db1047..0000000 --- a/javascript-reference/Ensemble.md +++ /dev/null @@ -1,3 +0,0 @@ -# Ensemble object -The Ensemble object `ensemble` is used to access storage, call util functions and call actions in js. - diff --git a/javascript-reference/Global.md b/javascript-reference/Global.md deleted file mode 100644 index d691d54..0000000 --- a/javascript-reference/Global.md +++ /dev/null @@ -1,49 +0,0 @@ -- Let us know on our [Discord server](https://discord.gg/k4CJeuRc) if you need any of other capabilities -- or open a [ticket](https://github.com/EnsembleUI/ensemble/issues) - -For `parseInt`, `parseFloat`, see [String.tryParseInt](/build/javascript/String) and [String.tryParseDouble](/build/javascript/String) respectively. - -### console.log - -The `console.log()` function is used to print messages to the console. It can be used for debugging purposes or to display information. - -**Example:** - -```javascript -console.log("Hello, World!"); // Output: Hello, World! -``` - -### regexp.test - -The `regexp.test()` function is used to test if a given string matches a regular expression pattern. It returns `true` if the string matches the pattern, and `false` otherwise. - -**Example:** - -```javascript -var pattern = /hello/; -var str = "Hello, World!"; -console.log(pattern.test(str)); // Output: false -str = "hello, how are you?"; -console.log(pattern.test(str)); // Output: true -``` -### btoa - -The `btoa()` function is used to encode a string in base64 format. It takes a string as input and returns a base64 encoded string. - -**Example:** - -```javascript -var str = "Hello, World!"; -console.log(btoa(str)); // Output: SGVsbG8sIFdvcmxkIQ== -``` - -### atob - -The `atob()` function is used to decode a base64 encoded string. It takes a base64 encoded string as input and returns the decoded string. - -**Example:** - -```javascript -var base64Str = "SGVsbG8sIFdvcmxkIQ=="; -console.log(atob(base64Str)); // Output: Hello, World! -``` diff --git a/javascript-reference/JSON.md b/javascript-reference/JSON.md deleted file mode 100644 index c4d1769..0000000 --- a/javascript-reference/JSON.md +++ /dev/null @@ -1,34 +0,0 @@ -# JSON -Ensemble Javascript provides two key methods to deal with the JSON objects. - -## Methods -### parse() -The JSON.parse() static method parses a JSON string, constructing the JavaScript object described by the string. - -#### Returns -Returns a Javascript object - -Example - -```js -const json = '{"result":true, "count":42}'; -const obj = JSON.parse(json); - -console.log(obj.count); -// Expected output: 42 - -console.log(obj.result); -// Expected output: true -``` -### stringify() -The JSON.stringify() static method converts a JavaScript value to a JSON string. - -Types that are directly converted to json strings - string, number, array, object (map), boolean and date. Date objects are converted to string by calling the [toISOString()](https://github.com/EnsembleUI/ensemble_docs/blob/main/javascript-reference/Date.md#toisostring) method. - -#### Returns -Returns a string representing the json object - -Example - -```js -console.log(JSON.stringify({ x: 5, y: 6 })); -// Expected output: '{"x":5,"y":6}' -``` diff --git a/javascript-reference/JsonPath.md b/javascript-reference/JsonPath.md deleted file mode 100644 index a099036..0000000 --- a/javascript-reference/JsonPath.md +++ /dev/null @@ -1 +0,0 @@ -TBD diff --git a/javascript-reference/MapAndArray.md b/javascript-reference/MapAndArray.md deleted file mode 100644 index 650a6e8..0000000 --- a/javascript-reference/MapAndArray.md +++ /dev/null @@ -1,338 +0,0 @@ -# Object -Any property of a javascript object may be accessed using either the parenthesis `['propname']` or the dot `myObj.propname`. - -- It the property does not exist on the object, it will return null. Exception will *not* be thrown. -- Let us know on our [Discord server](https://discord.gg/k4CJeuRc) if you need any of other capabilities -- or open a [ticket](https://github.com/EnsembleUI/ensemble/issues) - -## Methods -### keys() -Just like the Object.keys() method in javascript. Returns an array containing the keys (propery names) of an object. - -#### Returns -Returns an array containing the keys (propery names) of an object. - -Example - -```js -var headers = {}; -headers['abc'] = 'xyz'; -headers['def'] = 123; -headers['ghi'] = '456'; -var keys = headers.keys(); -keys.forEach(function(key) { - console.log(key + ':' + headers[key]); -}); -/* outputs -abc:xyz -def:123 -ghi:456 -*/ -``` -### values() -Just like the Object.values() method in javascript. Returns an array containing the values (propery values) of an object. - -#### Returns -Returns an array containing the values (propery values) of an object. - -Example - -```js -var headers = {}; -headers['abc'] = 'xyz'; -headers['def'] = 123; -headers['ghi'] = '456'; -headers.values().forEach(function(val) { - console.log(val); -}); -/* outputs -xyz -123 -456 -*/ -``` -### entries() -Just like the Object.entries() method in javascript. Returns an array containing the entries of an object where each entry is an object - {key:,value:} - -#### Returns -Returns an array containing the values (propery values) of an object. - -Example - -```js -var headers = {}; -headers['abc'] = 'xyz'; -headers['def'] = 123; -headers['ghi'] = '456'; -headers.entries().forEach(function(entry) { - console.log(entry.key + ':' + entry.value); -}); -/* outputs -abc:xyz -def:123 -ghi:456 -*/ -``` -### path(jsonPath,mapFunction) -The `path` method is a function that takes a JSON path as a string and an optional mapping function as arguments. The function traverses the object using the provided path and returns a list of the values found at that path. - -The optional mapFunction argument is a function that transforms the values found at the JSON path. If a mapFunction is provided, it is applied to each value found at the path. - -#### Parameters -jsonPath (String): The JSON path at which to look for values.
-mapFunction (Function, optional): A function to transform the values found at the path. This function is called with one argument: a list containing the current value. Pass `null` if not needed - -#### Returns -A list of values found at the specified JSON path. If mapFunction is provided, the list will contain the transformed values. - -Example - -```js -var obj = { - 'name': 'John', - 'age': 30, - 'city': 'New York' -}; - -var result = obj.path('$.name', (val) => val[0].toUpperCase()); -console.log(result); // Outputs: ["J"] -``` -# Array -Arrays behave exactly as they would in regular javascript. You can access an item in the array with the index e.g. `myArray[0]` -- Let us know on our [Discord server](https://discord.gg/k4CJeuRc) if you need any of other capabilities -- or open a [ticket](https://github.com/EnsembleUI/ensemble/issues) - -## Properties -### length -Returns the length of the array. Works exactly like the javascript arrays. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -console.log(roots.length); // 3 -``` - -## Methods -### map - -The `map()` method creates a new array with the results of calling a provided function on every element in the calling array. - -**Parameters:** - -- `callback`: Function that produces an element of the new array, taking one argument (*note this is slightly different from js you may be used to*): - - `currentValue`: The current element being processed in the array. - -**Return value:** - -A new array with each element being the result of the `callback` function. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -var roots = numbers.map(Math.sqrt); -console.log(roots); // [1, 2, 3] -``` - -### filter - -The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. - -**Parameters:** - -- `callback`: Function that tests each element of the array, taking one argument (*note this is slightly different from js you may be used to*): - - `currentValue`: The current element being processed in the array. - -**Return value:** - -A new array with the elements that pass the test. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -var evenNumbers = numbers.filter(function(num) { - return num % 2 === 0; -}); -console.log(evenNumbers); // [4] -``` - -### forEach - -The `forEach()` method executes a provided function once for each array element and does not return. - -**Parameters:** - -- `callback`: Function to execute for each element, taking one argument (*note this is slightly different from js you may be used to*): - - `currentValue`: The current element being processed in the array. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -numbers.forEach(function(num) { - console.log('Element is ' + num); -}); -// Output: -// Element is 1 -// Element is 4 -// Element is 9 -``` - -### push - -The `push()` method adds one or more elements to the end of an array and does not return. - -**Parameters:** - -- `item`: The element to add to the end of the array. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -numbers.push(16); -console.log(numbers.length); // 4 -``` - -### indexOf - -The `indexOf()` method returns the first index at which a given element can be found in the array, or -1 if it is not present. - -**Parameters:** - -- `searchElement`: Element to locate in the array. - -**Return value:** - -The first index of the element in the array; -1 if not found. - -**Example:** - -```javascript -var numbers = [1, 4, 9, 4]; -var index = numbers.indexOf(4); -console.log(index); // 1 -``` - -### lastIndexOf - -The `lastIndexOf()` method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting from the end. - -**Parameters:** - -- `searchElement`: Element to locate in the array. - -**Return value:** - -The last index of the element in the array; -1 if not found. - -**Example:** - -```javascript -var numbers = [1, 4, 9, 4]; -var index = numbers.lastIndexOf(4); -console.log(index); // 3 -``` - -### sort - -The `sort()` method sorts the elements of an array in place and returns the sorted array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values. - -**Parameters:** - -- `compareFunction` (optional): Specifies a function that defines the sort order. If omitted, the array is sorted according to each character's Unicode code point value. - -`compareFunction` is called with two parameters `(a,b)` to be compared and must return - - - a negative integer if [a] is smaller than [b] - - zero if [a] is equal to [b], and - - a positive integer if [a] is greater than [b]. - -**Return value:** - -The sorted array. - -**Example:** - -```javascript -var numbers = [9, 4, 1]; -var sortedNumbers = numbers.sort(); -console.log(sortedNumbers); // [1, 4, 9] -``` - -### concat - -The `concat()` method is used to merge two arrays. This method does not change the existing arrays, but instead returns a new array. - -**Parameters:** - -- `array: Array to concatenate into a new array. - -**Return value:** - -A new array that is the result of merging the arrays. - -**Example:** - -```javascript -var array1 = [1, 2, 3]; -var array2 = [4, 5, 6]; -var mergedArray = array1.concat(array2); -console.log(mergedArray); // [1, 2, 3, 4, 5, 6] -``` - -### find - -The `find()` method returns the value of the first element in the array that satisfies the provided testing function. Otherwise, `-1` is returned. - -**Parameters:** - -- `callback`: Function to execute on each value in the array, taking one argument: - - `currentValue`: The current element being processed in the array. - -**Return value:** - -The first element in the array that satisfies the provided testing function; otherwise, `-1`. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -var found = numbers.find(function(num) { - return num > 2; -}); -console.log(found); // 4 -``` - -### includes - -The `includes()` method determines whether an array includes a certain element, returning `true` or `false` as appropriate. - -**Parameters:** - -- `searchElement`: The element to search for. -- `fromIndex` (optional): The position in this array at which to begin searching for `searchElement` - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -var found = numbers.includes(1) -console.log(found); // true -``` - -### at - -The `at()` method returns the element at specified index. - -**Parameters:** - -- `index`: The index to get element for. - -**Return value:** - -The element at specified index. - -**Example:** - -```javascript -var numbers = [1, 4, 9]; -var element = numbers.at(1) -console.log(element); // 4 -``` diff --git a/javascript-reference/Math.md b/javascript-reference/Math.md deleted file mode 100644 index e8da2cf..0000000 --- a/javascript-reference/Math.md +++ /dev/null @@ -1,118 +0,0 @@ -# JavaScript Math -Provides most of the functions exposed by the [Math library](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) in JS. - -1. **Math.floor()**: - - Returns the largest integer less than or equal to a given number. - ```javascript - console.log(Math.floor(4.7)); // Output: 4 - ``` - -2. **Math.abs()**: - - Returns the absolute value of a number. - ```javascript - console.log(Math.abs(-4.7)); // Output: 4.7 - ``` - -3. **Math.ceil()**: - - Returns the smallest integer greater than or equal to a given number. - ```javascript - console.log(Math.ceil(4.4)); // Output: 5 - ``` - -4. **Math.round()**: - - Rounds a number to the nearest integer. - ```javascript - console.log(Math.round(4.4)); // Output: 4 - ``` - -5. **Math.trunc()**: - - Truncates the decimal part of a number, returning the integer part. - ```javascript - console.log(Math.trunc(4.7)); // Output: 4 - ``` - -6. **Math.log()**: - - Returns the natural logarithm (base e) of a number. - ```javascript - console.log(Math.log(10)); // Output: 2.302585092994046 - ``` - -7. **Math.pow()**: - - Returns the base to the exponent power. - ```javascript - console.log(Math.pow(2, 3)); // Output: 8 - ``` - -8. **Math.acos()**: - - Returns the arccosine (in radians) of a number. - ```javascript - console.log(Math.acos(0.5)); // Output: 1.0471975511965979 - ``` - -9. **Math.asin()**: - - Returns the arcsine (in radians) of a number. - ```javascript - console.log(Math.asin(0.5)); // Output: 0.5235987755982989 - ``` - -10. **Math.atan()**: - - Returns the arctangent (in radians) of a number. - ```javascript - console.log(Math.atan(1)); // Output: 0.7853981633974483 - ``` - -11. **Math.atan2()**: - - Returns the arctangent of the quotient of its arguments. - ```javascript - console.log(Math.atan2(1, 1)); // Output: 0.7853981633974483 - ``` - -12. **Math.cos()**: - - Returns the cosine of a number. - ```javascript - console.log(Math.cos(0)); // Output: 1 - ``` - -13. **Math.exp()**: - - Returns e^x, where x is the argument. - ```javascript - console.log(Math.exp(1)); // Output: 2.718281828459045 - ``` - -14. **Math.max()**: - - Returns the largest of zero or more numbers. - ```javascript - console.log(Math.max(10, 20)); // Output: 20 - ``` - -15. **Math.min()**: - - Returns the smallest of zero or more numbers. - ```javascript - console.log(Math.min(10, 20)); // Output: 10 - ``` - -16. **Math.sin()**: - - Returns the sine of a number. - ```javascript - console.log(Math.sin(0)); // Output: 0 - ``` - -17. **Math.sqrt()**: - - Returns the square root of a number. - ```javascript - console.log(Math.sqrt(9)); // Output: 3 - ``` - -18. **Math.tan()**: - - Returns the tangent of a number. - ```javascript - console.log(Math.tan(0)); // Output: 0 - ``` - -19. **Math.random()**: - - Returns a random number between 0 and 1. - ```javascript - console.log(Math.random()); // Output: a random number between 0 and 1 - ``` - -Each of these functions can be called using the `Math` object followed by the function name and the necessary arguments enclosed in parentheses. diff --git a/javascript-reference/Numbers.md b/javascript-reference/Numbers.md deleted file mode 100644 index 3c6b95a..0000000 --- a/javascript-reference/Numbers.md +++ /dev/null @@ -1,59 +0,0 @@ -# Number Functions - -This document covers JavaScript Number functions available in Ensemble with examples. Each function is briefly explained and followed by an example demonstrating its usage. - -### toFixed - -The `toFixed()` method in JavaScript is used to format a number using fixed-point notation. It takes one argument, which is the number of digits to appear after the decimal point. The method returns a string representation of the number with the specified number of decimal places. - -**Syntax:** - -```javascript -numObj.toFixed(digits); -``` - -**Parameters:** - -- `digits`: An integer specifying the number of digits to appear after the decimal point. This is required unlike in js where it is optional. - -**Example:** - -```javascript -var num = 123.456; -var fixedNum = num.toFixed(2); - -console.log(fixedNum); // Output: "123.46" -``` - -In this example, the `toFixed()` method is called on the `num` variable with the argument `2`. This means that the number will be formatted with two decimal places. The result is the string `"123.46"`. - ---- - -### toString - -The `toString()` method in JavaScript is used to convert a number to a string. It can also be used to represent the number in a different base (radix) by providing an optional argument. - -**Syntax:** - -```javascript -numObj.toString([radix]); -``` - -**Parameters:** - -- `radix` (Optional): An integer between 2 and 36 that represents the base to use for representing numeric values. The default value is 10. - -**Example:** - -```javascript -var num = 42; -var numStr = num.toString(); -var numStrInBase16 = num.toString(16); - -console.log(numStr); // Output: "42" -console.log(numStrInBase16); // Output: "2a" -``` - -In this example, the `toString()` method is called on the `num` variable without any arguments, which means that the number will be converted to a string in base 10 (decimal). The result is the string `"42"`. - -The `toString()` method is then called again on the `num` variable, but this time with the argument `16`. This means that the number will be converted to a string in base 16 (hexadecimal). The result is the string `"2a"`. diff --git a/javascript-reference/README.md b/javascript-reference/README.md deleted file mode 100644 index 62676e9..0000000 --- a/javascript-reference/README.md +++ /dev/null @@ -1,141 +0,0 @@ -# Add logic using JavaScript - -Welcome to the Ensemble Javascript manual. It provides how-to guides, API reference documentation and examples. - -## Limitations - -Ensemble's javascript is a limited subset of the javascript you may be used to. It is used primarily for manipulating the JSON response from the server, performing UI logic when handling events or writing re-usable functions. - -Following are the key limitations of the javascript in Ensemble. - -- Only supports ES5. Which means that it does _not_ support any of the ES6 features listed [here](https://www.w3schools.com/js/js_es6.asp). There is _no_ support for arrow function synatx (=>), let keyword and many other features you may be used to. -- No support for importing libraries. Limited to what's provided outside the box. -- No support for `.prototype` or defining new objects. This may come in the future. - -Let us know on our [Discord server](https://discord.gg/k4CJeuRc) if you need any of these capabilities or open a [ticket](https://github.com/EnsembleUI/ensemble/issues) - -## Where is Javascript code used? - -Javascript is the language to build your logic in Ensemble. It is used either as code blocks or as inline expressions. We discuss both below. - -### Code Block - -Each code block must start with `//@code` as the first line. This tells the platform to process the text as code. - -- Use code blocks to handling events or processing API responses. -- Each code block must be in the `body` of the `executeCode` action. - -See below the two use cases where code blocks are used. - -#### Handling Events - -Specified as the `executeCode` action. -Example - - -```js - Button: - label: Click Me - onTap: - executeCode: - body: | - //@code - myText.text = 'tapped out'; -``` - -#### Process API responses - -Another common place code blocks are used is when the API response has to be handled to extract values to be set on widgets or response to be set so that one or more `item-template` on the page may get the data in the format that they expect. See both examples below. -Example 1: set widget property in API response - -```js - API: - getDummyData: - uri: https://dummyjson.com/users/1 - method: GET - onResponse: - executeCode: - body: | - //@code - myText.text = 'Got Response!'; -``` - -Example 2: processing response and setting it for the `item-template` that are bound to this API to use - -```js - API: - getDummyData: - uri: https://dummyjson.com/users/1 - method: GET - onResponse: - executeCode: - body: | - //@code - //this will replace the response and be used by the item-templates that bind to this API - response.body.data = [{"field1:"value1"}]; -``` - -### Inline Expressions and bindings - -Use inline expressions for dynamically assigning values to widget properties. Inline expressions automatically update the properties of widgets by `binding` them to API responses or template data. - -More details coming soon... TBD - -## Referencing Ensemble widgets and their properties inside javascript - -All widgets on a screen can be referenced within the code block by their `id` field. This also means that ids need to be unique on a screen. Don't set id on your re-usable custom widgets. -No need to call a function, simply use the id of the widget and start accessing its properties. For example, if your widget has `id: myText`, you can reference it in code block or inside an expression as just `myText`. See below. - -```js - Column: - styles: - padding: 24 - gap: 8 - children: - - Text: - id: myText - text: Hi there! - - Button: - label: Click Me - onTap: - executeCode: - body: | - //@code - myText.text = 'tapped out'; -``` - -Widgets within an item-template can be referenced by their index in the array using the `this.selectedItemIndex` syntax. -For example. - -```js - ListView: - id: listView - onItemTap: - navigateScreen: - name: ListView - Detail Page - inputs: - doc_type: ${getPeople.body.users[this.selectedItemIndex]} - styles: {expanded: true } - item-template: - data: ${getPeople.body.users} - name: users - template: - MyRow: - inputs: - p: ${users} -``` - -## Core Libraries - -- [The `ensemble` object](/javascript-reference/Ensemble) -- [String](/javascript-reference/String) -- [Numbers](/javascript-reference/Numbers) -- [Date](/javascript-reference/Date) -- [Object and Array](/javascript-reference/MapAndArray) -- [Globals](/javascript-reference/Global) -- [Math](/javascript-reference/Math) -- [JSON](/javascript-reference/JSON) -- [JsonPath](/javascript-reference/JsonPath) - -## Common Errors and Logging/Debugging - -TBD diff --git a/javascript-reference/String.md b/javascript-reference/String.md deleted file mode 100644 index 004e2be..0000000 --- a/javascript-reference/String.md +++ /dev/null @@ -1,378 +0,0 @@ -# String Functions - -This document covers JavaScript String functions available in Ensemble with examples. Each function is briefly explained and followed by an example demonstrating its usage. - -- [Code:String in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/bf9e503e-286b-437a-a692-14d0d5814918) has examples for using the String functions. Copy it into your own app and play around. -- Let us know on our [Discord server](https://discord.gg/k4CJeuRc) if you need any of other capabilities -- or open a [ticket](https://github.com/EnsembleUI/ensemble/issues) - -### length - -The `length` property returns the length of the string - -**Example:** - -```javascript -var str = "Hello"; -var len = str.length; -console.log(len); // 5 -``` - -### indexOf - -The `indexOf()` method returns the index of the first occurrence of the specified value in a string. - -**Example:** - -```javascript -var str = "Hello, world!"; -var index = str.indexOf("world"); -console.log(index); // 7 -``` - -### lastIndexOf - -The `lastIndexOf()` method returns the index of the last occurrence of the specified value in a string. - -**Example:** - -```javascript -var str = "Hello, world! world!"; -var index = str.lastIndexOf("world"); -console.log(index); // 14 -``` - -### charAt - -The `charAt()` method returns the character at the specified index in a string. - -**Example:** - -```javascript -var str = "Hello, world!"; -var char = str.charAt(7); -console.log(char); // 'w' -``` - -### endsWith - -The `endsWith()` method determines whether a string ends with the characters of a specified string. - -**Example:** - -```javascript -var str = "Hello, world!"; -var result = str.endsWith("world!"); -console.log(result); // true -``` - -### includes - -The `includes()` method determines whether a string contains the characters of a specified string. - -**Example:** - -```javascript -var str = "Hello, world!"; -var result = str.includes("world"); -console.log(result); // true -``` - -### toLowerCase - -The `toLowerCase()` method returns the calling string value converted to lowercase. - -**Example:** - -```javascript -var str = "Hello, World!"; -var lowerCaseStr = str.toLowerCase(); -console.log(lowerCaseStr); // "hello, world!" -``` - -### toUpperCase - -The `toUpperCase()` method returns the calling string value converted to uppercase. - -**Example:** - -```javascript -var str = "Hello, World!"; -var upperCaseStr = str.toUpperCase(); -console.log(upperCaseStr); // "HELLO, WORLD!" -``` -### trim -The trim() method removes whitespace from both ends of a string. - -```js -var str = " Hello, world! "; -var result = str.trim(); -console.log(result); // "Hello, world!" -``` -### trimStart -The trimStart() method removes whitespace from the beginning of a string. - -```js -var str = " Hello, world!"; -var result = str.trimStart(); -console.log(result); // "Hello, world!" -``` -### trimEnd -The trimEnd() method removes whitespace from the end of a string. - -```js -var str = "Hello, world! "; -var result = str.trimEnd(); -console.log(result); // "Hello, world!" -``` -### repeat -The `repeat()` method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together. - -```js -var str = "Hello "; -var result = str.repeat(3); -console.log(result); // "Hello Hello Hello " -``` - -### search -The `search()` method executes a search for a match between a regular expression and this String object. - -```js -var str = "Hello, world!"; -var result = str.search(/world/); -console.log(result); // 7 -``` - -### slice -The `slice()` method extracts a section of a string and returns it as a new string, without modifying the original string. - -```js -var str = "Hello, world!"; -var result = str.slice(7, 12); -console.log(result); // "world" -``` - -### substr -The `substr()` method returns a portion of the string, starting at the specified index and extending for a given number of characters afterward. - -```js -var str = "Hello, world!"; -var result = str.substr(7, 5); -console.log(result); // "world" -``` - -### match - -The `match()` method retrieves the result of matching a string against a regular expression and returns null in case there is no match. - -**Example:** - -```javascript -var str = "Hello, world!"; -var regex = /world/; -var result = str.match(regex); -console.log(result); // "world" -``` - -### matchAll - -The `matchAll()` method returns an array of all the matched strings or an empty array in case there is no match. - -**Example:** - -```javascript -var str = "Hello, world! world!"; -var regex = /world/g; -var matches = str.matchAll(regex); -console.log(matches[0]); // "world" -console.log(matches[1]); // "world" -``` - -### padStart - -The `padStart()` method pads the current string with another string (multiple times, if needed) on the left until the resulting string reaches the given length. - -- If width is already smaller than or equal to `this.length`, no padding is added. A negative `width` is treated as zero. -- The second argument (string to be padded with) is optional. When not specified, space is used for padding -- If padding has length different from 1, the result will not have length width. This may be useful for cases where the padding is a longer string representing a single character, like " " or "\u{10002}". In that case, the user should make sure that this.length is the correct measure of the string's length. - -**Example:** - -```javascript -var str = "world"; -var paddedStr = str.padStart(6, "Hello"); -console.log(paddedStr); // "Helloworld" -paddedStr = str.padStart(10, "Hello"); -console.log(paddedStr); // "HelloHelloHelloHelloHelloworld" -paddedStr = str.padStart(8, "<"); -console.log(paddedStr); // "<<get in touch with us to discuss your requirements so we can prioritize upcoming features. Remember to join our [discord server](https://dsc.gg/ensembleui). - -Currently, Ensemble does not support the following: - -#### Widgets - -See the supported widgets in [Kitchen Sink app](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screens). diff --git a/miscellaneous/app-info.md b/miscellaneous/app-info.md deleted file mode 100644 index d0d372b..0000000 --- a/miscellaneous/app-info.md +++ /dev/null @@ -1,33 +0,0 @@ -# App Information - -Get ensemble app informations such as appId, version, etc in Ensemble Definition Language - -- appId - Ensemble AppId (ex: GJ4nZIEFlZTv2HQGw) -- appName - Project App Name -- packageName - Android package name or iOS bundleId -- version - Project Version (ex: 1.0.0) -- bundleNumber - Project Build Number (2) - -```yaml -View: - styles: - scrollableView: true - header: - title: AppInfo - body: - Column: - styles: - gap: 16 - padding: 24 - children: - - Text: - text: "${appInfo.appId}" - - Text: - text: "${appInfo.appName}" - - Text: - text: "${appInfo.packageName}" - - Text: - text: "${appInfo.version}" - - Text: - text: "${appInfo.buildNumber}" -``` \ No newline at end of file diff --git a/miscellaneous/external-screen.md b/miscellaneous/external-screen.md deleted file mode 100644 index 510a88a..0000000 --- a/miscellaneous/external-screen.md +++ /dev/null @@ -1,103 +0,0 @@ -# External Screen - -Let's say their is a flutter screen already built or their is a screen which can't be made with Ensemble at the moment, you can construct that screen and Ensemble allows you to navigate to that custom screen. - -> [NOTE] -> You can find the entire source code [here](https://github.com/EnsembleUI/starter/tree/external-screen). - - -## How it works. - -This is our beloved counter widget. Let's see how you can specify this widget and call it in your Ensemble App. - -```dart -class CounterWidget extends StatefulWidget { - const CounterWidget({ - super.key, - this.message, - }); - - final String? message; - - @override - State createState() => _CounterWidgetState(); -} - -class _CounterWidgetState extends State { - int counter = 0; - - void _incrementCounter() { - setState(() { - counter++; - }); - } - - @override - void initState() { - super.initState(); - } - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - backgroundColor: Theme.of(context).colorScheme.inversePrimary, - title: const Text('Flutter Page'), - ), - floatingActionButton: FloatingActionButton( - onPressed: _incrementCounter, - tooltip: 'Increment', - child: const Icon(Icons.add), - ), - body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - widget.message ?? 'You have pushed the button this many times:', - ), - Text( - '$counter', - style: Theme.of(context).textTheme.headlineMedium, - ), - ], - ), - ), - ); - } -} - -``` - - -First we need to specify a map of name and builder widget. The builder has context and args as parameters. -The args are basically passed using `navigateScreen`'s inputs. - - -```dart -void main() async { - WidgetsFlutterBinding.ensureInitialized(); - Ensemble().setExternalScreenWidgets({ - 'counterScreen': (context, args) { - final message = args?['message']; - return CounterWidget(message: message); - }, - }); - runApp(const EnsembleApp()); -} -``` - -Now, the ensemble framework know about external screen named `counterScreen`. We can now navigate to external screen like following. - -```yaml -Button: - label: Navigate external screen - onTap: - navigateScreen: - name: counterScreen - external: true - inputs: - message: Hello world - -``` - diff --git a/miscellaneous/push-notification b/miscellaneous/push-notification deleted file mode 100644 index 51244c9..0000000 --- a/miscellaneous/push-notification +++ /dev/null @@ -1,70 +0,0 @@ -# Push Notification - -So, you have built the app with ensemble but now you would like to increase the engagement and decided to implement push notification. - -At ensemble we are currently supporting push notification with firebase. Here are the following steps need to be taken to enable push notification. - -- Initialize Notification manager -- IOS setup, (Android doesn't require any setup). - -## Setup Notification manager - -In `main.dart` inside `main()` initialize notification manager with your firebase payload and `backgroundNotificationHandler`. -- The firebase payload data can be found in Project Settings > Your apps. -- `backgroundNotificationHandler`'s purpose is to allow you write any business logic. Here in example we are updating the app icon badge but it can be set to any business logic. - -```dart -void main() async { - WidgetsFlutterBinding.ensureInitialized(); - await NotificationManager().init( - FirebasePayload( - apiKey: '', - projectId: '', - messagingSenderId: '', - appId: '', - ), - backgroundNotificationHandler:_backgroundNotificationHandler, -); - -@pragma('vm:entry-point') -Future _backgroundNotificationHandler(RemoteMessage message) async { - try { - // business logic - await StorageManager().init(); - int badgeCount = - Utils.getInt(await StorageManager().read('badgeCount'), fallback: 0); - int count = badgeCount + 1; - await StorageManager().write('badgeCount', count); - if (await FlutterAppBadger.isAppBadgeSupported()) { - return FlutterAppBadger.updateBadgeCount(count); - } - - } catch (error) { - debugPrint("Error running background handler ${error.toString()}"); - } -} - -``` - -## IOS setup - -#### Add push notification capability in xcode -![xcode push notification capability](../assets/push-capability.gif) - - - -#### Create an APNs key -Here is the link to apple developer website to create APNs key and download it.[Apple developer key link](https://developer.apple.com/account/resources/authkeys/list) -![Developer portal key](../assets/developer-apple-keys.png) - -![Create key and check APNs ](../assets/APNs-key.png) - -#### Upload APNs key to Firebase - -Now upload the APNs key to firebase console. -So, under the firebase project settings > Cloud Messaging > Apple app configuration. You can upload the APNs key that we downloaded from the previous step. - -![Firebase App APNs key upload](../assets/firebase-apns.png) - ---- -That's all now you can go to your firebase messaging module and send a push notification and it will work for both the platform android and IOS. diff --git a/overview-video.html b/overview-video.html deleted file mode 100644 index df74139..0000000 --- a/overview-video.html +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index d3ecd51..0000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "ensemble_docs", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} diff --git a/package.json b/package.json deleted file mode 100644 index 0967ef4..0000000 --- a/package.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/samples/kitchen sink/Button.md b/samples/kitchen sink/Button.md deleted file mode 100644 index 309d028..0000000 --- a/samples/kitchen sink/Button.md +++ /dev/null @@ -1,125 +0,0 @@ -## Button - -* Various button styles: Demonstrates different colors, rounded corners, custom padding, and margins. -* Starting and ending icons: Shows how to add icons to the beginning and end of buttons. -* Navigating screens: Uses onTap to navigate to another screen. -* API calls: Shows how to make an API call (e.g., fetching current time in NYC) with onTap. -* Executing JavaScript: Executes JavaScript code using the onTap property. -* Custom API configuration: Includes a custom API configuration for getting the current time in New York City. - -``` -View: - header: - title: Button - styles: - scrollableView: true - Column: - styles: { gap: 16, padding: 24 } - children: - - Flow: - styles: {gap: 8, lineGap: 8} - children: - - Button: - label: Hello - - Button: - styles: { outline: true, borderColor: 0xffED5742, color: 0xffED5742 } - label: Everyone - - Button: - styles: { borderRadius: 5 } - label: I can be rounded - - Button: - styles: { borderRadius: 100, backgroundColor: 0xffED5742 } - label: or very rounded - - Button: - styles: { backgroundColor: 0xffAAD6DE, borderColor: 0xffED5742, color: 0xffff748c } - label: with custom color - - Button: - label: or disabled like this - enabled: false - - Button: - styles: {outline: true} - label: or this - enabled: false - - Button: - styles: { borderRadius: 5, padding: 20 10 } - label: with custom padding - - Button: - styles: { margin: 15 0 0 0 } - label: and top margin - - Button: - label: with starting icon - startingIcon: - name: arrow_back - - Button: - label: with ending icon - endingIcon: - name: arrow_forward - - - - Divider - - ##### onTap - - ## Navigate screen - - Text: - text: onTap can navigate to another screen - - Button: - label: Go to Home - onTap: - navigateScreen: - name: Home - - - Divider - - ## API call - - Text: - text: onTap can call an API - - Button: - label: Get NYC time - onTap: - invokeAPI: - name: getNYCTime - - - Text: - text: | - What's the time in NYC? - ${getNYCTime.body.datetime} - - - Divider - - - ##### onTap execute code - - Text: - text: onTap can execute Javacript code - - - Button: - label: Execute code - onTap: | - //@code - statusText.text = 'Yes, we just executed a Javascript code!'; - - - Text: - id: statusText - text: Code executed? - - - - - Divider - - Row: - styles: { mainAxis: spaceAround } - children: - - Button: - styles: { outline: true, padding: 20 } - label: View all available widgets - onTap: - navigateScreen: - name: Home - - -API: - getNYCTime: - authentication: none - method: GET - uri: https://worldtimeapi.org/api/timezone/America/New_York - -``` \ No newline at end of file diff --git a/test/1-preview-app.md b/test/1-preview-app.md deleted file mode 100644 index 58ca4a6..0000000 --- a/test/1-preview-app.md +++ /dev/null @@ -1,33 +0,0 @@ -# Preview your app - -Your apps are available for preview on web, and iOS and Android devices. Share it with your QA, Product Managers, customers, ... for early feedbacks. - -## Preview on iOS and Android - -First, download Ensemble Preview app by scanning this QR Code: - -QR code for Ensemble Preview - -or select your platform: -
- Download on the App Store - Get it on Google Play -
- -Now follow these steps to preview your app: - -1. Log in to Ensemble Studio. -2. Click on the app you want to preview. -3. Click Settings on the left sidebar. Here you find the app ID and a QR code. -4. Open Ensemble Preview app and select the option to scan the QR code on the settings page. - -Get app qr code - -## Preview on web - -1. Log in to Ensemble Studio. -2. Locate the app you want to share, and click the `...` menu. -3. Select Get Preview Link. -4. The preview link is now copied to your clipboard. Paste it in the browser or share with others to run your app on web. - -Get web preview link diff --git a/tips-and-tricks/WhatsApp Image 2023-07-12 at 00.04.57.jpeg b/tips-and-tricks/WhatsApp Image 2023-07-12 at 00.04.57.jpeg deleted file mode 100644 index 82c0bca..0000000 Binary files a/tips-and-tricks/WhatsApp Image 2023-07-12 at 00.04.57.jpeg and /dev/null differ diff --git a/tips-and-tricks/avatar.md b/tips-and-tricks/avatar.md deleted file mode 100644 index 547cc49..0000000 --- a/tips-and-tricks/avatar.md +++ /dev/null @@ -1,32 +0,0 @@ -# Creating an Avatar - -Display basic avatars with various configurations such as size, shape, and borders. You can also display avatars with initials when an image source is unavailable. - -Use the `Avatar` component inside a `Flow` or other container. -Set the `source` attribute to the URL of the image for the avatar. - -```yaml -- Avatar: - source: https://mui.com/static/images/avatar/1.jpg -- Avatar: - source: https://mui.com/static/images/avatar/2.jpg - styles: - width: 50 - borderColor: grey -``` - -Use the `Stack` component to overlay additional elements on the `Avatar`. - -```yaml -- Stack: - children: - - Avatar: - source: https://mui.com/static/images/avatar/2.jpg - styles: - width: 80 - - Icon: - name: camera_line - library: remix - styles: - color: black -``` \ No newline at end of file diff --git a/tips-and-tricks/background-color-ensemble-preview.md b/tips-and-tricks/background-color-ensemble-preview.md deleted file mode 100644 index adb2f9c..0000000 --- a/tips-and-tricks/background-color-ensemble-preview.md +++ /dev/null @@ -1,46 +0,0 @@ -# BackgroundColor issue in Ensemble Emulator or Preview App - -There Can be issue with button text color when using a backgroundColor for button specially when testing app using _Ensemble Go_ ( IOS ) or _Ensemble Preview App_ ( Android ). Like this - -**Output** - -![Alt text](image-7.png) - -Note: `As we can see in the image the text Color is not what we declared it in our App which can be resolved using Ensemble Theme `. - -**Code:** - -
- - -```yaml -- Button: - label: $6,780 income - startingIcon: - name: dollarSign - library: fontAwesome - size: 16 - color: 0xFF667483B2 - gap: 6 - styles: - backgroundColor: 0x20667483 - borderRadius: 20 - padding: 8 - labelStyle: - fontSize: 16 - color: 0xFF000000 -``` - -
- -- The color for text is slight grayish but it appears as white in the Ensemble Preview App. - -### Remedy - -We can make use of outline property set it to true and also set primary color in theme ( look at this [trick](/tips-and-tricks/general_primary_color-theme.md) ). - -**Output:** - -![Alt text]() - -The primary color in theme is `0xFF308775`. diff --git a/tips-and-tricks/calling-api-response-to-fill-an-array.md b/tips-and-tricks/calling-api-response-to-fill-an-array.md deleted file mode 100644 index 06a8845..0000000 --- a/tips-and-tricks/calling-api-response-to-fill-an-array.md +++ /dev/null @@ -1,15 +0,0 @@ -# Calling an API and Using It's Response to Fill an Array - -**Objective** -To retrieve the API response, modify an array containing user details through a designated function each time the API is called, and subsequently update this array whenever the API is invoked using a code block triggered by the onTap event on an Icon. Finally, to visualize these user details by generating icons from the updated array using an item template. - -To achieve this, consider the following steps: - -1. Storage Handling: - Store the user details array as a variable in ensemble.storage. -2. Binding with Item Template: - Bind your item template to the stored array. This ensures that any manipulation of the array automatically triggers changes in the associated widget. -3. Array Update Mechanism: - After modifying the array values, make sure to set the array again. This step is crucial for triggering the binding mechanism and updating the widget accordingly. - -By following this approach, you can integrate API responses, array manipulation, and visual representation using Ensemble, creating a dynamic and responsive user interface. \ No newline at end of file diff --git a/tips-and-tricks/custom-card-component.md b/tips-and-tricks/custom-card-component.md deleted file mode 100644 index 3fa36ab..0000000 --- a/tips-and-tricks/custom-card-component.md +++ /dev/null @@ -1,30 +0,0 @@ -# Customizable Card Component - -**Objective** - -To construct a card component with individualized backgroundGradient or backgroundImage for each instance. - -To achieve this, consider the following steps: - -1. Define View Structure: - Begin by setting up the View component to establish a flexible layout that accommodates multiple card instances. - -2. Create Test Widget: - Develop the Test component to serve as the card. Ensure it has the necessary structure to receive customizable inputs. - -3. Pass Colors as Input: - Within the instantiation of the Test component in the View, employ the inputs attribute to provide an array of colors: - ```yaml - - Test: - inputs: - colors: [0xFFFF0000, 0xFFFF00FF] - ``` - -4. Apply BackgroundGradient Styles: - Inside the Test component's implementation, utilize the passed colors to define the backgroundGradient styles for the relevant container, e.g., a Row: - ```yaml - Row: - styles: - backgroundGradient: - colors: ${colors} - ``` \ No newline at end of file diff --git a/tips-and-tricks/custom-navbar-items.md b/tips-and-tricks/custom-navbar-items.md deleted file mode 100644 index 29ff2c2..0000000 --- a/tips-and-tricks/custom-navbar-items.md +++ /dev/null @@ -1,6 +0,0 @@ -# Custom BottomNavBar item styling - -Beside the default styling for the Bottom Navbar items you can style them according to your needs and desire. Ensemble allows user to style items based on many features concept inherited from the CSS and Flutter technologies such as active, non-active states styling etc. Let us move to the code directly and see how it works practically. - -- [Icon Without Label](/tips-and-tricks/icon-with-label) -- [Profile Picture as Item](/tips-and-tricks/profile-picture-item) diff --git a/tips-and-tricks/custom-progress-dialog-close-on-an-event.md b/tips-and-tricks/custom-progress-dialog-close-on-an-event.md deleted file mode 100644 index 4c1a011..0000000 --- a/tips-and-tricks/custom-progress-dialog-close-on-an-event.md +++ /dev/null @@ -1,51 +0,0 @@ -One common theme in most apps is to show a progress dialog while an API is being processed on the server and close it when the response from the API has been received. This can easily be achieved as follows. Note the use of closeAllDialogs action. - -This method will not work when the progress container is being displayed on top of an existing dialog as closeAllDialogs will close the dialog under it as well which may not be what you desire. - -Lastly a dialog is not the samething as a modal that is displayed with navigateModalScreen. Calling closeAllDialogs does NOT close the modal that is opened with navigateModalScreen - - ```yaml - - Button: - label: Custom Progress - closes in 3 seconds - onTap: - showDialog: - widget: - ProgressDialog: - inputs: - userId: 1 - -ProgressDialog: - inputs: - - userId - onLoad: - invokeAPI: - name: getMockUser - inputs: - userId: ${userId} - onResponse: - #adding this timer here just so that we can delay closing the dialog - startTimer: - options: - startAfter: 3 - repeat: false - onTimer: - #all you need to do to close the dialog is to call closeAllDialogs action - closeAllDialogs: - body: - Column: - styles: - crossAxis: center - gap: 8 - children: - - Progress: - - Text: - text: Just a moment... - -API: - getMockUser: - inputs: - - userId - uri: https://dummyjson.com/users/${userId} - method: GET -``` -See [this](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c2c248f2-a289-40d3-acd5-65a1a7f3c5a2#) for a live example diff --git a/tips-and-tricks/directory.md b/tips-and-tricks/directory.md deleted file mode 100644 index b7fadda..0000000 --- a/tips-and-tricks/directory.md +++ /dev/null @@ -1,23 +0,0 @@ -# Tips and Tricks - -Welcome to our Tips and Tricks page! Here, you'll find a collection of expert insights and best practices to help you make the most of our platform. Discover shortcuts, time-saving techniques, and hidden features to enhance your productivity. Unlock the full potential of our platform with these invaluable tips and tricks. - -# Index - -- [Custom BottomNavBar item styling](/tips-and-tricks/custom-navbar-items) -- [Making the UI responsive](/build/user-interface/6-responsive) -- [Use device's camera for updating profile picture](/tips-and-tricks/user-profile-picture) -- [Generalized Color All Button across an App ](/tips-and-tricks/general_primary_color-theme) -- [Making Progress Bars](/tips-and-tricks/progress-bars) -- [Background Color issue in EnsembleUI Preview](/tips-and-tricks/background-color-ensemble-preview) -- [Inputs to ChartJs](/tips-and-tricks/inputs-chartjs) -- [How to get ListView/GridView to take up all available height](/tips-and-tricks/list-gridview-stretch-to-available-height) -- [How to modify the BottomNavBar with custom styling and widgets](/tips-and-tricks/how-to-modify-bottom-navbar) -- [Using navigate Screen with BottomNavBar](/tips-and-tricks/navigateScreen-with-bottomNavBar) -- [Calling an API to fill and array](/tips-and-tricks/calling-api-response-to-fill-an-array) -- [Dynamic color modification](/tips-and-tricks/dynamic-color-modification) -- [Custom card component](/tips-and-tricks/custom-card-component) -- [Icons in bottomNavBar](/tips-and-tricks/icons-in-bottomNavBar) -- [InvokeHaptic](/tips-and-tricks/invoke-haptic.md) -- [Lottie Animations](/tips-and-tricks/lottie-animations.md) -- [HTML Widget](/tips-and-tricks/html-widget.md) diff --git a/tips-and-tricks/dynamic-color-modification.md b/tips-and-tricks/dynamic-color-modification.md deleted file mode 100644 index 6daf9c3..0000000 --- a/tips-and-tricks/dynamic-color-modification.md +++ /dev/null @@ -1,25 +0,0 @@ -# Dynamic Color Modification in JavaScript - -**Objective** - -To dynamically change the color of a Text widget based on a JavaScript variable. The goal is to customize the color property of the Text widget's style. - -To achieve this, consider the following steps: - -1. Access Text Widget: - Obtain a reference to the Text widget that you want to modify. In the provided example, it can be accessed using the identifier (id). - ```yaml - - Text: - text: Hi there! - styles: - textStyle: - fontSize: 24 - color: blue - id: helloUser - ``` - -2. Modify Color Property: - Directly modify the color property of the Text widget's style using the assigned identifier. - ```javascript - helloUser.color = 'red'; - ``` diff --git a/tips-and-tricks/emulator-and-device-preview-difference.md b/tips-and-tricks/emulator-and-device-preview-difference.md deleted file mode 100644 index 06dd259..0000000 --- a/tips-and-tricks/emulator-and-device-preview-difference.md +++ /dev/null @@ -1 +0,0 @@ -### Emulator and Device Preview Issues diff --git a/tips-and-tricks/general_primary_color-theme.md b/tips-and-tricks/general_primary_color-theme.md deleted file mode 100644 index 8f982f1..0000000 --- a/tips-and-tricks/general_primary_color-theme.md +++ /dev/null @@ -1,33 +0,0 @@ -# General Color for All Buttons across an App - -Defining a theme for your app so as to save time for writing repeated code for text colors, backgroundColors etc is a better way for being efficient and avoiding DRY principle. EnsembleUI enables us to define our own App theme. You can find more about themes [here](). For now lets focus on achieving a general color our Button text. - -**Example** -Lets us consider an App where we want to use `0xFF308775` color for our all Buttons text. To achieve this we will use Theme option in ensemble studio. - -**Steps** - -1. Go to your App and click on **Theme** in left side panel. Here is hw it looks like. - -![Alt text](image-4.png). - -2. Then use the code below to define [primary]() color for button color, focus color etc. - -**Code** - -
- - -```yaml -# define your app theme here -Colors: - primary: 0xFF308775 -``` - -
- -**Output** - -![Alt text](image-5.png) - -Note: `Just like all other Web and Mobile technologies like Html, Css and Flutter etc if there is style done on a button it will be of higher priority then theme so to let theme work no need to style button color at all.` diff --git a/tips-and-tricks/how-to-modify-bottom-navbar.md b/tips-and-tricks/how-to-modify-bottom-navbar.md deleted file mode 100644 index 3e5e6eb..0000000 --- a/tips-and-tricks/how-to-modify-bottom-navbar.md +++ /dev/null @@ -1,116 +0,0 @@ -# How to modify the BottomNavBar with custom styling and widgets - -#### Steps - -1. Make a custom widget one for selected state and one for inactive state ( Not selected ). - -
- - -```yaml -Widget: - inputs: - - name - - icon - - color - - library - body: - Column: - styles: - mainAxis: spaceBetween - crossAxis: center - height: 50 - children: - - Icon: - icon: ${icon} - library: ${library} - styles: - color: ${color} - - Text: - text: ${name} - styles: - fontSize: 12 - color: ${color} -``` - -
- -2. similarly for active navigation item . Use these widgets under widget for each item of the BottomNavBar as given. - -
- - -```yaml -menu: - BottomNavBar: - styles: - backgroundColor: white - items: - - page: Grocery - customItem: - widget: - CustomNavbarItem: - inputs: - name: Home - icon: home - color: 0xFF999999 - library: fontAwesome - selectedWidget: - CustomActiveNavbarItem: - inputs: - name: Home - icon: home - color: 0xFF4CA771 - library: fontAwesome - - page: Grocery - customItem: - widget: - CustomNavbarItem: - inputs: - name: Order - icon: shoppingBag - color: 0xFF999999 - library: fontAwesome - selectedWidget: - CustomActiveNavbarItem: - inputs: - name: Order - icon: shoppingBag - color: 0xFF4CA771 - library: fontAwesome - - page: Grocery - customItem: - widget: - CustomNavbarItem: - inputs: - name: Favourite - icon: heart - color: 0xFF999999 - library: fontAwesome - selectedWidget: - CustomActiveNavbarItem: - inputs: - name: Favourite - icon: solidHeart - color: 0xFF4CA771 - library: fontAwesome - selected: true - - page: Grocery - customItem: - widget: - CustomNavbarItem: - inputs: - name: Cart - icon: shoppingCart - color: 0xFF999999 - library: fontAwesome - selectedWidget: - CustomActiveNavbarItem: - inputs: - name: Cart - icon: shoppingCart - color: 0xFF4CA771 - library: fontAwesome -``` - -
diff --git a/tips-and-tricks/html-widget.md b/tips-and-tricks/html-widget.md deleted file mode 100644 index 2e4ba3f..0000000 --- a/tips-and-tricks/html-widget.md +++ /dev/null @@ -1,31 +0,0 @@ -# HTML Widget with maxLines Support and Enhanced Styling - -The HTML widget allows you to apply CSS-like styles to specific elements within the HTML content. Customize text color, font size, and font weight effortlessly using both CSS tags and the box wrapper, providing increased styling flexibility. - -The
with an id of "hello" and the

with an id of "tag2" are styled with various properties such as border, borderRadius, padding, color, fontWeight, backgroundColor, maxLines, and textOverflow. - -- Html: - id: myHtml - cssStyles: - - selector: "#hello" - properties: - border: 10px solid red - borderRadius: 10px - padding: 20px - - selector: "#tag2" - properties: - color: white - fontWeight: "900" - backgroundColor: red - maxLines: 2 - textOverflow: ellipsis - text: | -

-

Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”

- - As Cicero would put it, “Um, not so fast.” - - The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin. - - Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero. -
\ No newline at end of file diff --git a/tips-and-tricks/icon-with-label.md b/tips-and-tricks/icon-with-label.md deleted file mode 100644 index 076fbad..0000000 --- a/tips-and-tricks/icon-with-label.md +++ /dev/null @@ -1,158 +0,0 @@ -## Icon Without Label - -Since these kind of icons require us to utilize [custom widgets]() thus we will be using **customItem** widget for getting through it. It has two properties namely **widget** and **selectedWidget**. - -| Property | Type | Description | -| :------------- | :----- | :--------------------------------------------------------------------- | -| widget | widget | Used for inactive item. | -| selectedWidget | widget | Used for active item. | -| page | screen | Used for naming the screen to which we navigate once clicked upon item | - -We will utilize these two to achieve two different states for an icon active and inactive. Let us see the code example - -**Example** - -
- - -```yaml -ViewGroup: - BottomNavBar: - styles: - backgroundColor: white - color: 0xFF9DAEC1 - selectedColor: black - floatingBackgroundColor: 0xFF8A1C9D - floatingIconColor: white - notchColor: 0xFF0F0E1C - items: - - customItem: - widget: - IconWidget: - inputs: - icon: home - selectedWidget: - ActiveIconWidget: - inputs: - icon: home - page: Home - - - customItem: - widget: IconOnlyWidget - selectedWidget: ActiveIconOnlyWidget - page: Chat - - - customItem: - widget: - IconWidget: - inputs: - icon: account_balance_wallet - selectedWidget: - ActiveIconWidget: - inputs: - icon: account_balance_wallet - page: Home -``` - -
- -**Output** -![Alt text](image.png) -![Alt text](image-1.png) - -**Note:**`BottomNavBar is used to navigate across whole application so it always has a separate screen where it comes under [View Group]() with all the items corresponding to each screen of your application.` - -**Explanation** - -Each item has two properties for active and inactive widget. [IconWidget](#iconwidget) and [IconOnlyWidget](#icononlywidget) represents the in-active state / screen while [ActiveIconWidget](#activeiconwidget) and [ActiveIconOnlyWidget](#activeicononlywidget) for active state / screen. Both of these are [custom widgets](). Its important to notice that [IconWidget](#iconwidget) and [ActiveIconWidget](#activeiconwidget) accept input as well which is the **name** of the **icon** we want to use. - -##### IconWidget - -
- - -```yaml -IconWidget: - inputs: - - icon - body: - Column: - styles: { mainAxis: center, crossAxis: center } - children: - - Icon: - icon: ${icon} - styles: - color: 0x70000000 - size: 28 -``` - -
- -##### ActiveIconWidget - -
- - -```yaml -ActiveIconWidget: - inputs: - - icon - body: - Column: - styles: { mainAxis: center, crossAxis: center } - children: - - Icon: - icon: ${icon} - styles: - color: black - size: 28 -``` - -
- -##### IconOnlyWidget - -
- - -```yaml -IconOnlyWidget: - body: - Column: - styles: { mainAxis: center, crossAxis: center } - children: - - Icon: - icon: star - styles: - backgroundColor: transparent - borderColor: black - color: yellow - borderRadius: 26 - padding: 10 - size: 18 -``` - -
- -##### ActiveIconOnlyWidget - -
- - -```yaml -ActiveIconOnlyWidget: - body: - Column: - styles: { mainAxis: center, crossAxis: center } - children: - - Icon: - icon: star - styles: - backgroundColor: 0xFF004548 - color: yellow - borderRadius: 26 - padding: 12 - size: 26 -``` - -
diff --git a/tips-and-tricks/icons-in-bottomNavBar.md b/tips-and-tricks/icons-in-bottomNavBar.md deleted file mode 100644 index 1ad5825..0000000 --- a/tips-and-tricks/icons-in-bottomNavBar.md +++ /dev/null @@ -1,34 +0,0 @@ -# Configuring BottomNavBar Icons - -**Objective** -To add a heart icon to a BottomNavBar item, ensuring correct rendering. If using a default icon, no additional library specification is needed; however, for non-default icons like Font Awesome, it's crucial to specify the library. - -To achieve this, consider the following steps: - -1. Default Icons: - If using default icons (e.g., "home," "search," "shopping_cart"), no library specification is required. Simply provide the icon name. - ```yaml - BottomNavBar: - styles: - backgroundColor: 0xFF1F2128 - items: - - label: Home - icon: search - screen: Home - ``` - -2. fontAwesome Icons: - For non-default icons, particularly those from Font Awesome, ensure to specify the library using the iconLibrary attribute. - ```yaml - BottomNavBar: - styles: - backgroundColor: 0xFF1F2128 - items: - - label: Favourite - icon: heart - screen: Home - iconLibrary: fontAwesome - ``` - -3. Active Icons: - If an active state icon is needed (e.g., a different icon when the item is selected), use the activeIcon attribute. \ No newline at end of file diff --git a/tips-and-tricks/image-1.png b/tips-and-tricks/image-1.png deleted file mode 100644 index 4f67974..0000000 Binary files a/tips-and-tricks/image-1.png and /dev/null differ diff --git a/tips-and-tricks/image-10.png b/tips-and-tricks/image-10.png deleted file mode 100644 index 961eeb1..0000000 Binary files a/tips-and-tricks/image-10.png and /dev/null differ diff --git a/tips-and-tricks/image-2.png b/tips-and-tricks/image-2.png deleted file mode 100644 index 27c34b5..0000000 Binary files a/tips-and-tricks/image-2.png and /dev/null differ diff --git a/tips-and-tricks/image-3.png b/tips-and-tricks/image-3.png deleted file mode 100644 index b862a0f..0000000 Binary files a/tips-and-tricks/image-3.png and /dev/null differ diff --git a/tips-and-tricks/image-4.png b/tips-and-tricks/image-4.png deleted file mode 100644 index 51f569f..0000000 Binary files a/tips-and-tricks/image-4.png and /dev/null differ diff --git a/tips-and-tricks/image-5.png b/tips-and-tricks/image-5.png deleted file mode 100644 index 4aff9fb..0000000 Binary files a/tips-and-tricks/image-5.png and /dev/null differ diff --git a/tips-and-tricks/image-6.png b/tips-and-tricks/image-6.png deleted file mode 100644 index 2449899..0000000 Binary files a/tips-and-tricks/image-6.png and /dev/null differ diff --git a/tips-and-tricks/image-7.png b/tips-and-tricks/image-7.png deleted file mode 100644 index 6d35269..0000000 Binary files a/tips-and-tricks/image-7.png and /dev/null differ diff --git a/tips-and-tricks/image-8.png b/tips-and-tricks/image-8.png deleted file mode 100644 index b0c34fa..0000000 Binary files a/tips-and-tricks/image-8.png and /dev/null differ diff --git a/tips-and-tricks/image-9.png b/tips-and-tricks/image-9.png deleted file mode 100644 index 9299730..0000000 Binary files a/tips-and-tricks/image-9.png and /dev/null differ diff --git a/tips-and-tricks/image.png b/tips-and-tricks/image.png deleted file mode 100644 index 53508a8..0000000 Binary files a/tips-and-tricks/image.png and /dev/null differ diff --git a/tips-and-tricks/infinite-scroll.md b/tips-and-tricks/infinite-scroll.md deleted file mode 100644 index 033364d..0000000 --- a/tips-and-tricks/infinite-scroll.md +++ /dev/null @@ -1,37 +0,0 @@ -# Infinite Scroll - -Gone are the days where users will click the next and previous page or load more button to see more data. -Every modern app requires some form of infinite scroll. In ensemble we enables app devs to build infinite scroll view with ListView and GridView with the help of attribute called `onScrollEnd`. - -`onScrollEnd` takes any supported actions. Let's see how to implement infinite scroll with ListView and the technic is similar if your screen requires the use of GridView. - -```yaml -ListView: - id: listView - showLoading: true - onScrollEnd: - invokeAPI: - name: getPeople - onResponse: | - //@code - var results = getPeople.body.results; - var oldResults = ensemble.storage.users; - var total = oldResults.concat(results); - ensemble.storage.users = total; - - item-template: - data: ${ensemble.storage.users} - name: user - - template: - MyRow: - inputs: - p: ${user} -``` - -Here `onScrollEnd` we call `invokeAPI` action. As the name suggest `onScrollEnd` will get called whenever the ListView or the GridView has built the last element. -Now in above snippet, onResponse of invokeAPI we are concating the old list with the new data from the reponse and storing it in the storage. On updating the storage it automatically builds the listView with more data. - -Their is another attribute with ListView called `showLoading`, the function of this attribute is to showLoading when the item-template data reaches to the end of list and waiting for more data. - -This goes without saying that `onScrollEnd` is a general purpose callback of action. diff --git a/tips-and-tricks/inputs-chartjs.md b/tips-and-tricks/inputs-chartjs.md deleted file mode 100644 index 3f5a6ba..0000000 --- a/tips-and-tricks/inputs-chartjs.md +++ /dev/null @@ -1,105 +0,0 @@ -# Inputs to ChartJs - -The ChartJs widget in ensemble may sometime not accept variables in plain ChartJS widget so a better way to go about this is to use Code section in ensemble to define configuration for the ChartJs and there we can easily use the variables ( inputs ). In our example we will look how we use labels passed as inputs to the ChartJs custom widget and use them according to our need. - -**Example** - -#### Custom Widget - -
- - -```yaml -Widget: - inputs: - - spending - - categories - - onLoad: | - - //@code - chart.config = { - type: 'doughnut', - data: { - labels: categories, - datasets: [{ - data: [608, 590, 200, 79, 163,231,637,63], - backgroundColor: ['#FCA06B','#C66CFC','#8145FF', '#29CB90', '#4DA9CC','#FCA034',"#8145FA","#814500"], - hoverOffset: 2, - borderWidth: 0 - }] - }, - options: { - aspectRatio: 1, - cutout: 80 , - plugins: { - legend: { - display: false - }, - tooltip: { - enabled: true, - position: "nearest" - } - }, - layout: { - padding: 0 - } - } - }; - - body: - Column: - styles: - gap: 12 - children: - - Row: - styles: { crossAxis: center, mainAxis: center, padding: 20 0 } - children: - - Stack: - styles: { alignChildren: center } - children: - - ChartJs: - id: chart - styles: { width: 200, height: 200 } - - - Column: - styles: { crossAxis: center, gap: 0, mainAxis: center } - children: - - Text: - text: Last 30 days - styles: - textStyle: - color: 0xFF667483 - fontSize: 10 - - Text: - text: "$${spending}" - styles: - textStyle: - color: 0xFF063940 - fontSize: 28 - textAlign: end -``` - -#### Screen Code - -
- - -```yaml -Spendings: - inputs: - spending: ${ensemble.storage.spendingLastDays.toFixed(2)} - categories: ${ensemble.storage.categories} -``` - -
- -**Output** - -![Alt text](image-8.png) - -
- -#### Explanation - -The _categories_ and _spending_ are our inputs passed to this Custom Widget from one of our screens. Categories is an array consisting of string values. This input array is used as a value for **labels** property in the CharJs configuration if you paid close attention to the code for [Custom Widget](#custom-widget). This is how we can pass inputs to ChartJs and make it dynamic. diff --git a/tips-and-tricks/invoke-haptic.md b/tips-and-tricks/invoke-haptic.md deleted file mode 100644 index 1d90cbd..0000000 --- a/tips-and-tricks/invoke-haptic.md +++ /dev/null @@ -1,37 +0,0 @@ -# Invoke Haptics - -We can use the invokeHaptic action to provide haptic feedback in your app. This feature enhances the user experience by providing tactile responses for different interactions. - -The invokeHaptic action is utilized to trigger haptic feedback, and it supports various types such as heavyImpact, mediumImpact, lightImpact, and vibrate. -Buttons are used to demonstrate different haptic types, and the last button showcases using JavaScript code to invoke the lightImpact haptic. - -Please note that haptics will only work on native apps. - -invokeHaptic action is utilized to trigger haptic feedback, and it supports various types. -- Button: - label: Heavy Impact - onTap: - invokeHaptic: - type: heavyImpact - -Additionally "Vibrate" button demonstrates chaining actions by using the onComplete property to execute additional JavaScript code after the haptic feedback is played. -- Button: - label: Vibrate (Using onComplete action to chain) - onTap: - invokeHaptic: - type: vibrate - onComplete: - executeCode: - body: | - //@code - console.log("Vibrate Haptic played") - -Furthermore, the onTapHaptic property is used for the "Selection Click" button, demonstrating an alternative way to trigger haptic feedback. -- Button: - label: Selection Click (Using onTapHaptic property) - onTapHaptic: selectionClick - onTap: - executeCode: - body: | - //@code - console.log("Button Pressed") diff --git a/tips-and-tricks/list-gridview-stretch-to-available-height.md b/tips-and-tricks/list-gridview-stretch-to-available-height.md deleted file mode 100644 index 90323ef..0000000 --- a/tips-and-tricks/list-gridview-stretch-to-available-height.md +++ /dev/null @@ -1,22 +0,0 @@ - -# How to get ListView or GridView to take all Available height - -## Don't do this -``` -ListView|GridView: - height: ${device.height - 20} -``` - -This will not render properly on all devices. Instead you want the ListView to stretch to fill all available vertical space -if your ListView/GridView is inside a Column. - -## Do this instead -``` -ListView: - styles: - expanded: true -``` - -### the thing to watch out for is: -expanded only works for widgets inside Row/Column -when a widget has expanded set, its ancestors need to have set height, either explicitly or through expanded again. Essentially you are saying i want my widget to use all the spaces available that my parent alllows me. It keeps going up the chain but will break if an ancestor doesn't have a height diff --git a/tips-and-tricks/lottie-animations.md b/tips-and-tricks/lottie-animations.md deleted file mode 100644 index e274e23..0000000 --- a/tips-and-tricks/lottie-animations.md +++ /dev/null @@ -1,39 +0,0 @@ -# Custom Lottie Animations with Events and Controls - -With features like onStart, onPause, onComplete, and control buttons, you can create interactive animations tailored to your application. - -The Lottie animations have events such as onForward, onReverse, onPause, and onComplete. Control buttons are provided to trigger these events dynamically. -- Lottie: - id: MyLottie - autoPlay: false - repeat: false - onForward: | - //@code - console.log("Forward"); - onReverse: | - //@code - console.log("Reverse"); - onPause: | - //@code - console.log("Pause"); - onComplete: | - //@code - console.log("Completed"); - source: https://assets6.lottiefiles.com/private_files/lf30_rnpgzd17.json - styles: - width: 400 - height: 200 - -- Button: - styles: - outline: true - borderColor: 0xffed5742 - borderRadius: 20 - backgroundColor: 0xffaad6de - labelStyle: - color: 0xffed5742 - label: Forward - onTap: | - //@code - console.log("Forward"); - MyLottie.forward(); \ No newline at end of file diff --git a/tips-and-tricks/navigateScreen-with-bottomNavBar.md b/tips-and-tricks/navigateScreen-with-bottomNavBar.md deleted file mode 100644 index 9460b05..0000000 --- a/tips-and-tricks/navigateScreen-with-bottomNavBar.md +++ /dev/null @@ -1,101 +0,0 @@ -# Using navigate Screen with BottomNavBar - -We can use [navigateScreen](/build/make-it-interactive/actions-and-events/8-navigateScreen) for combining functionality of [BottomNavBar](/build/user-interface/1-page-structure) together with it for daily tasks like beside using BottomNavBar items to navigate across different screens, we can also make use of [navigateScreen](/build/make-it-interactive/actions-and-events/8-navigateScreen) here to navigate across screen keeping the bottomNavBAr in place as well. Let us look at an example to make better sense of it. - -**Example** - -In this scenario we want to navigate to Profile screen using `Account` item in the bottomNavBar menu and also an icon in our `dashboard` screen. Given is code for different screen widgets `CustomHeader` for our screen header with an Profile Picture and [ViewGroup](/build/user-interface/1-page-structure) with bottomNavBar. - -**Explanation** - -- For each item in the menu we have used an expression which evaluates `selectedIndex` every time our screen re-renders ( it renders whenever user navigates from one screen to other screen using menu items ). -- Account item have `selectedIndex` of 4 as we are sending it as input from `navigateScreen` action in the `dashboard` screen's `CustomHeader` widget. -- So when we click on Profile Picture in the header for dashboard screen the bottomNavbar re-renders updating selectedIndex value which evaluates true for only `Account` item and thus we move to profile screen using both `Account` Item and the `Profile Picture` - -**Code** - -```yaml -CustomHeader: - body: - Row: - styles: - mainAxis: spaceBetween - crossAxis: center - backgroundColor: 0xff04010d - children: - - Markdown: - styles: - textStyle: - fontSize: 16 - color: white - text: Your Goals - - Image: - styles: - width: 40 - height: 40 - borderRadius: 40 - placeholderColor: transparent - source: ${auth.user.photo} - onTap: - navigateScreen: - name: App - inputs: - selectedIndex: 4 -``` - -ViewGroup with BottomNavBar - -```yaml -ViewGroup: - BottomNavBar: - styles: - backgroundColor: 0xEE000000 - floatingBackgroundColor: black - floatingIconColor: yellow - notchColor: black - selectedColor: 0xFF34CAF7 - color: 0xFF999999 - - items: - - label: Home - icon: - name: bar_chart_2_line - library: remix - page: Home - - - label: Learn - icon: - name: movie_line - library: remix - page: Insights - - - label: Advisors - icon: - name: customer_service_2_line - library: remix - page: Advisors - - - label: Account - icon: - name: account_circle_line - library: remix - page: Account - selected: "${selectedIndex == 4 ? true : false}" - - - icon: - name: flashlight_fill - library: remix - floating: true - floatingAlignment: center - floatingMargin: 0 - onTap: - navigateScreen: - name: ChatPage - inputs: - threadId: 0 - userId: "${ensemble.storage.userAccount != null ? ensemble.storage.userAccount.id : ''}" -``` - -![Alt text](image-9.png) - -![Alt text](image-10.png) diff --git a/tips-and-tricks/profile-picture-item.md b/tips-and-tricks/profile-picture-item.md deleted file mode 100644 index 0cc2ae0..0000000 --- a/tips-and-tricks/profile-picture-item.md +++ /dev/null @@ -1,68 +0,0 @@ -## Profile Picture - -Its possible that you might need to have your profile picture as item to navigate to settings page or profile page etc, anyway whichever is your case here is how can do it with EnsembleUI. - -**Example** - -```yaml -ViewGroup: - BottomNavBar: - - customItem: - widget: CustomNavBarItemWithImage - selectedWidget: ActiveCustomNavBarItemWithImage - page: WeeklyScheduler -``` - -**Output** - -![Alt text](image-2.png) -![Alt text](image-3.png) -**Note:** `Its only specific item code, so as to stay relevant to our topic. You can see complete example` [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/aa634599-cd5d-411c-a4b6-1163f3b5c558?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) - -##### CustomNavBarItemWithImage - -
- - -```yaml -CustomNavBarItemWithImage: - body: - Column: - styles: - padding: 2 8 - children: - - Image: - source: https://robohash.org/hicveldicta.png - styles: - width: 40 - height: 40 - borderRadius: 40 - borderWidth: 2 - borderColor: 0xFFDEDEDE -``` - -
- -##### ActiveCustomNavBarItemWithImage - -
- - -```yaml -ActiveCustomNavBarItemWithImage: - body: - Column: - styles: - padding: 2 8 - children: - - Image: - source: https://robohash.org/hicveldicta.png - styles: - width: 40 - height: 40 - borderRadius: 40 - borderWidth: 2 - borderColor: black -``` - -
diff --git a/tips-and-tricks/progress-bars.md b/tips-and-tricks/progress-bars.md deleted file mode 100644 index c0f7a61..0000000 --- a/tips-and-tricks/progress-bars.md +++ /dev/null @@ -1,82 +0,0 @@ -# Making Progress Bars - -Progress bars are integral part of UI/UX in Web and mobile applications. It allows representing a quantity in attractive and efficient manner which grabs user attention and much more. Let us look how can we make a progress bar in EnsembleUI. - -**Example** -Progress bars can be made in two ways. - -#### 1. Using Text Widget - -Using [text](/widget-reference/text.md) widget we can make progress bars only that now they are empty and we just style them to achieve our results. - -**Code** - -
- - -```yaml -Stack: - children: - - Text: - styles: - backgroundColor: gray - borderRadius: 10 - height: 15 - text: " " #100 - - Text: - styles: - backgroundColor: green - borderRadius: 10 - height: 15 - text: " " #10 -``` - -
- -- Here we can either use empty space in the _text_ property to increase its width or use _width_ property to var its width. -- Height contribute to its size horizontally. - -**Note**: `It might be great but sometimes causes issue when we are testing apps on Ensemble emulator ( ensemble go / ensemble preview app ). For that part method 2 is suggested.` - -#### 2 Using Row Widget - -Using [Row](/widget-reference/row) widget we can make progress bars. They are also lesser magnetic to errors and compatibility issues. - -**Code** - -
- - -```yaml -Stack: - children: - - Row: - styles: - backgroundColor: 0x20FFFFFF - borderRadius: 4 - height: 4 - width: ${device.width} - children: - - Spacer: - styles: - size: 4 - - Row: - styles: - backgroundColor: ${barColor} - borderRadius: 4 - height: 4 - width: ${Math.floor(barPercentage/100 * device.width)} - children: - - Spacer: - styles: - size: 4 -``` - -
- -- Styled these according to our requirements. -- Spacer is used to add space at bottom of the progress bars. - -**Output** - -![Alt text](image-6.png) diff --git a/tips-and-tricks/specifying-icons.md b/tips-and-tricks/specifying-icons.md deleted file mode 100644 index 8318d08..0000000 --- a/tips-and-tricks/specifying-icons.md +++ /dev/null @@ -1,22 +0,0 @@ -# Specify library icons for start and end - -**Objective** -To specify library icons for startingIcon and endingIcon on a Button - -To achieve this, consider the following steps: - -1. To specify library icons in shorthand notation for startingIcon and endingIcon on a Button, you can use the following syntax: - ```yaml - Button: - startingIcon: wifi - endingIcon: addressBook fontAwesome - ``` -2. Icons can be represented with a more verbose syntax on a Button using the following structure: - ```yaml - Button: - endingIcon: - name: addressBook - library: fontAwesome - size: 50 - color: red - ``` \ No newline at end of file diff --git a/tips-and-tricks/user-profile-picture.md b/tips-and-tricks/user-profile-picture.md deleted file mode 100644 index 176e443..0000000 --- a/tips-and-tricks/user-profile-picture.md +++ /dev/null @@ -1,204 +0,0 @@ -# Use device's camera for updating profile picture - -This guide shows the typical interaction for updating a user's profile picture in a native app, where user can take a photo or pick an existing image from device's gallery. To see the full example in Ensemble Studio, [click here](https://studio.ensembleui.com/app/nWsD5baeykm3W772kkSw/screen/P2v4AOS8w3DXfUauqi0Q). - -Here's the experience we'll work toward: - -
- -## 1. Display user image with an icon - -First, call the API that return's user image and pass the value to the Avatar widget. Using styles properties, we can display the avatar as a circle with a border. - -```yaml -View: - onLoad: - invokeAPI: - name: getUser - - body: - Column: - styles: - mainAxis: center - children: - - Avatar: - source: ${getUser.body.results[0].picture.large} - styles: - height: 100 - width: 100 - borderRadius: 100 - borderColor: blue - borderWidth: 2 - margin: 2 - -API: - getUser: - uri: https://randomuser.me/api/?nat=us&randomapi - method: GET -``` - - -To display an icon on top of the avatar, we use a the Stack widget and pass these children, in this order: - -1. Avatar -2. Icon - -The Stack widget renders each child on top of the previous one. By setting `styles.alignChildren` to `bottomRight`, we can achive the following: - - - - -```yaml - - Stack: - styles: - alignChildren: bottomRight - children: - - Avatar: - source: ${getUser.body.results[0].picture.large} - styles: - height: 100 - width: 100 - borderRadius: 100 - borderColor: blue - borderWidth: 2 - margin: 2 - - Icon: - name: camera_line - library: remix - styles: - size: 20 - backgroundColor: white - color: blue - padding: 4 - borderColor: blue - borderRadius: 200 - borderWidth: 2 -``` - - -## 2. onTap, display a bottom sheet - -When user taps the profile image, we want to display a bottom sheet with two buttons: - -
- -To achieve the above, first wrap the Stack widget inside a Column widget so we can add an onTop to the Column. onTap, we use `showBottomModal` action to open a bottom sheet: - -```yaml -View: - onLoad: - invokeAPI: - name: getUser - body: - Column: - styles: - mainAxis: center - crossAxis: stretch - children: - - Column: - styles: - crossAxis: center - onTap: - showBottomModal: - widget: ProfilePhotoOptions - options: - enableDrag: false - children: - - Stack: - # ... -``` - -Note that we're passing a widget named `ProfilePhotoOptions` to be rendered inside the bottom sheet. - -## 3. Add buttons to the bottom sheet - -Let's define the ProfilePhotoOptions widget, which includes two buttons: - -```yaml -ProfilePhotoOptions: - body: - Column: - styles: - crossAxis: stretch - mainAxisSize: min - gap: 24 - padding: 24 24 ${device.safeAreaBottom} 24 - children: - - Button: - label: Take photo - - Button: - label: Pick from gallery - -``` - -Note a few styling configurations: - -1. Buttons are placed inside a Column with `crossAxis: stretch`. This ensures the buttons width will stretch across the screen. -2. This Column also includes `mainAxisSize: min` to ensure the column just takes the space required by the children. -3. For padding, we use 24 on top, right, and left. For bottom padding, we use `${device.safeAreaBottom}` so that depending on the device, enough space is added to the bottom of the column. - - -## 4. Add action to Take Photo buttom - -Here, we use the `openCamera` action with following configurations: - -```yaml - - Button: - label: Take photo - onTap: - openCamera: - id: profilePhoto - options: - default: true - allowGalleryPicker: true - allowCameraRotate: true - allowFlashControl: true - enableMicrophone: false - preview: false - maxCount: 1 - mode: photo - onComplete: - # Either upload the photo, or navigate to a screen where user can crop the photo - # for both options, use the id of the action to access the file: ${profilePhoto.files[0].path} - # navigateScreen: - # name: ProfileImageCropper - # inputs: - # newProfileImage: ${profilePhoto.files[0].path} -``` - -This configuration uses the device's native camera functionality, and limits it to one image. - - -## 5. Add action to Pick from Gallery buttom - -Here, we use the `pickFiles` action with following configurations: - -```yaml - - Button: - label: Pick from gallery - styles: - height: 50 - onTap: - pickFiles: - source: gallery - id: filepicker - allowMultiple: false - allowedExtensions: - - png - - jpeg - - jpg - onComplete: - # TODO - you can either use the selected photo, or navigate to a screen where user can crop the photo - # navigateScreen: - # name: ProfileImageCropper - # inputs: - # newProfileImage: ${filepicker.files[0].path} - -``` - -This configuration uses the device's native gallery, and limits it to one image. - ----- - - -To see the full example in Ensemble Studio, [click here](https://studio.ensembleui.com/app/nWsD5baeykm3W772kkSw/screen/P2v4AOS8w3DXfUauqi0Q). \ No newline at end of file diff --git a/widget-reference/Icon.md b/widget-reference/Icon.md deleted file mode 100644 index b19df46..0000000 --- a/widget-reference/Icon.md +++ /dev/null @@ -1,76 +0,0 @@ -# Icon widget - -The Icon Widget enables easy integration of icons from popular libraries like FontAwesome, allowing for seamless customization and visually appealing designs within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e7c686f5-b8a2-4670-9e6e-8fdb0fea768e) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| icon | string | Icon name from Material Icons or Font Awesome | -| library | [string](/widget-reference/icon2.md) | Which icon library to use, if there is no value for library then its considered to be default. `fontAwesome` `remix` ( for now only few remix icons are supported but we will support most them soon) You can check list of supported icons [here](/widget-reference/icon2.md) | -| onTap | action | Call Ensemble's built-in functions or execute code | -| onTapHaptic | enum | The type of haptic to perform when icon is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| color | integer or string | The color of the icon, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| splashColor | integer or string | If onTap is defined, this color will show up as a splash effect upon tapping the icon. Note that the effect only happens if backgroundColor is not set. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight`. | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer or string | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | -| visibilityTransitionDuration | integer | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/Image.md b/widget-reference/Image.md deleted file mode 100644 index ff8d693..0000000 --- a/widget-reference/Image.md +++ /dev/null @@ -1,77 +0,0 @@ -# Image widget - -The Image Render Widget provides a simple and intuitive way to display images within your application, allowing for rich visual content and enhancing the user experience. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/7c7a3ffe-68ef-4e99-b9d1-4b5cee166233) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | URL to or asset name of the image. If the URL is used, it is highly recommended that the dimensions is set (either with width/height or other means) to prevent the UI jerkiness while loading. | -| onTap | action | Call Ensemble's built-in functions or execute code | -| onTapHaptic | enum | The type of haptic to perform when image is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight`. | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) `fill`, `contain`, `cover`, `fitHeight`, `fitWidth`, `none`, `scaleDown` | -| resizedWidth | integer | Images will be automatically resized (default to 800 width with no height set) before rendering. If you know the rough image width, set this number to be the same or a slightly larger width to optimize the loading time. To maintain the original aspect ratio, set either resizedWidth or resizedHeight, but not both. This setting is not supported on Web. | -| resizedHeight | integer | Images will be automatically resized (default to 800 width with no height set) before rendering. If you know the rough image height, set this number to be the same or a slightly larger height to optimize the loading time. To maintain the original aspect ratio, set either resizedWidth or resizedHeight, but not both. This setting is not supported on Web. | -| visibilityTransitionDuration | integer | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| placeholderColor | integer or string | The placeholder color while the image is loading `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| --------- | --------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/Map.md b/widget-reference/Map.md deleted file mode 100644 index 5bc18be..0000000 --- a/widget-reference/Map.md +++ /dev/null @@ -1,104 +0,0 @@ -# Map widget - -The Map widget enables the display of _location markers_ and _overlays_, providing a dynamic visual representation of geographic data. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/36e52d1a-39c5-4a6b-b064-2be6cfe3cf7b) - -## Properties - -| Property | Type | Description | -| :----------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| styles | object | [See properties](#styles) | -| onCameraMove | action | Execute an Action when the map's bound has changed. The bound data is available using `event.data.bounds..`. | -| onMapCreated | action | Execute an Action when the map's initial state has been rendered. Note that this may not mean the location and markers (if any) are available yet. | -| markers | object | [See properties](#markers) | - -### styles - -| Property | Type | Description | -| :------------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| markerWidth | integer | The width of each marker. (default 60) | -| markerHeight | integer | The height of each marker. (default 30) | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight`. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| visibilityTransitionDuration | integer | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| autoZoom | boolean | Automatically zoom the maps to show all the markers (and optionally the current location). Default True. | -| autoZoomPadding | integer | Adjusts the padding around map elements automatically, ensuring a visually balanced and optimized display within the Maps widget. | -| locationEnabled | boolean | Enables the use of location services, allowing the Maps widget to access and display the user's current location on the map. | -| includeCurrentLocationInAutoZoom | boolean | Adjusts the automatic zoom level of the map to include the user's current location within the visible area of the Maps widget. | -| showToolbar | boolean | Show the Map toolbar that contains some convenience controls. You can also turn each individual controls on or off. | -| showMapTypesButton | boolean | Toggle between the different map types. (default true) | -| showLocationButton | boolean | Show the button that animates to the user's location. (default true) | -| showZoomButtons | boolean | Applicable on Web only. Show the zoom in/out controls on the map. (default true on Web) | -| rotateEnabled | boolean | Enables the ability to rotate the map view within the Maps widget, allowing users to change the orientation for a customized viewing experience. | -| scrollEnabled | boolean | Allows users to scroll and pan the map within the Maps widget, providing interactive navigation and exploration of the map content. | -| tiltEnabled | boolean | Enables users to adjust the tilt or perspective of the map view for a dynamic and immersive experience. | -| zoomEnabled | boolean | Enables users to zoom in and out on the map within the Maps widget for closer or wider views. | -| toolbarMargin | integer/ string | The margin around the toolbar. (default 10 on all sides) | -| toolbarAlignment | string | How to align the toolbar within the map. (default bottom right). If both positioning (top/bottom/left/right) and alignment are used, positions will be applied first, then alignment within the available constraint. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight`. | -| toolbarTop | integer | Offset the toolbar from the top edge of the map | -| toolbarBottom | integer | Offset the toolbar from the bottom edge of the map | -| toolbarLeft | integer | Offset the toolbar from the left edge of the map | -| toolbarRight | integer | Offset the toolbar from the right edge of the map | -| mapType | String | Allows users to select different map types `normal`, `satellite`, `terrain`, `hybrid` | -| initialCameraPosition | Object | Represents the initial camera position on the map. [see properties](#stylesinitialcameraposition) | -| markerOverlayMaxWidth | Integer | Specifies the maximum width of the marker overlay | -| markerOverlayMaxHeight | Integer | Sets the maximum height of the marker overlay | -| scrollableMarkerOverlay | Boolean | Determines if swiping left/right within the overlay will navigate to next/previous marker | -| dismissibleMarkerOverlay | Boolean | Enables swiping down to close the overlay | -| autoSelect | Boolean | Automatically selects a marker when the markers are updated | - -### markers - -| Property | Type | Description | -| :--------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | -| data | String | Binds the marker list to the data | -| name | String | Gives a name to the marker | -| location | object | Specifies the geographic coordinates (latitude and longitude) for the Maps widget to display a specific location. [see properties](#markerslocation) | -| lat | Number | Latitude coordinate of the marker | -| lng | Number | Longitude coordinate of the marker | -| marker | object | [see properties](#markersmarker) | -| source | string | The marker's image asset (URL or local asset) | -| selectedMarker | object | [see properties](#selectedMarker) | -| source | string | The marker's image asset when selected (URL or local asset) | -| overlayWidget | Widget | The widget to render as an overlay over the maps. Use this to convey more detail info for each marker. | -| onMarkerTap | action | Action to execute when tapping on the marker | -| onMarkersUpdated | action | Action to execute when the markers have been updated and rendered | - -##### markers.location - -| Property | Type | Description | -| -------- | ------ | --------------------------- | -| lat | Number | The latitude of the marker | -| lng | Number | The longitude of the marker | - -##### markers.marker - -| Property | Type | Description | -| :------- | :----- | :-------------------------------------------------------------------- | -| source | string | The marker's image asset. This can come from URL or from local asset. | - -##### markers.selectedMarker - -| Property | Type | Description | -| :------- | :----- | :---------------------------------------------------------------------------------- | -| source | string | The marker's image asset when selected. This can come from URL or from local asset. | - -##### styles.initialCameraPosition - -| Property | Type | Description | -| -------- | ------- | -------------------- | -| lat | Number | Latitude coordinate | -| lng | Number | Longitude coordinate | -| zoom | Integer | Zoom level | diff --git a/widget-reference/_snippets/base-styles.md b/widget-reference/_snippets/base-styles.md deleted file mode 100644 index 77b7579..0000000 --- a/widget-reference/_snippets/base-styles.md +++ /dev/null @@ -1,15 +0,0 @@ - -| Property | Type | Description | -|------------------------------|------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g., stretch horizontally for parent of type Row).
`WARNING:` use this inside Column/Row/Flex only | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. (Minimum: 0, Maximum: 24) | -| elevationShadowColor | [Color](/widget-reference/types#Color) | The shadow color for the elevation. | -| elevationBorderRadius | integer / string | If the widget has a borderRadius, this should be changed to have the same value. Use with CSS-like notation (1 to 4 integers). | -| alignment | [Alignment](/widget-reference/types#Alignment) | Align this widget relative to its parent. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g., Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | \ No newline at end of file diff --git a/widget-reference/_snippets/box-styles.md b/widget-reference/_snippets/box-styles.md deleted file mode 100644 index 1bb1578..0000000 --- a/widget-reference/_snippets/box-styles.md +++ /dev/null @@ -1,19 +0,0 @@ -| Property | Type | Description | -|:-------------------|:-----------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------| -| margin | integer/string | Margin with CSS-style notation (1 to 4 integers) e.g. margin: 5 20 5 | -| padding | integer/string | Padding with CSS-style notation (1 to 4 integers) e.g. padding: 5 20 5 | -| backgroundColor | [Color](/widget-reference/types#Color) | The background color of this widget. | -| backgroundImage | [BackgroundImage](/widget-reference/types#BackgroundImage) | The background image of this widget. | -| backgroundGradient | [Gradient](/widget-reference/types#Gradient) | The background gradient of this widget. | -| border | [Border](/widget-reference/types#Border) | The border of this widget. | -| shadow | [Shadow](/widget-reference/types#Shadow) | The shadow of this widget | -| clipContent | boolean | Some widgets (such as Image) may bleed through the container when borderRadius is set. Use this to apply a clipping to ensure this does not happen. | -| width | integer | The width of this widget. | -| height | integer | The height of this widget. | -| borderRadius | string or integer | The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange. | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange. | -| shadowOffset | array | The values in the array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow: normal, solid, outer, inner. | \ No newline at end of file diff --git a/widget-reference/avatar.md b/widget-reference/avatar.md deleted file mode 100644 index 80b21f7..0000000 --- a/widget-reference/avatar.md +++ /dev/null @@ -1,31 +0,0 @@ -# Avatar Widget - -The Avatar Widget provides a visual representation of a user or entity, typically used in user interfaces to personalize user experience. - -## Properties - -| Property | Type | Description | -|:--------------|:-----------------------------------------------|:--------------------------------------------------------------------------------------------------------| -| source | string | URL to or asset name of the image. Recommended to set dimensions to prevent UI jerkiness while loading. | -| variant | enum | Specify the Avatar's shape: `circle` (default), `square`, or `rounded`. | -| name | string | Displayed initials if the image source is not specified or fails to load. | -| nameTextStyle | [TextStyle](/widget-reference/types#TextStyle) | Adjust the text styling for the name. | -| onTap | [Action](actions/directory#Actions) | Call Ensemble's built-in functions or execute code on tap. | -| onTapHaptic | [TapHaptic](/widget-reference/types#TapHaptic) | The type of haptic feedback on tap | - -### Styles - -| Property | Type | Description | -|:-----------------|:---------------------------------------|:--------------------------------------------------| -| placeholderColor | [Color](/widget-reference/types#Color) | The placeholder color while the image is loading. | -| fit | [Fit](/widget-reference/types#Fit) | How to fit the image within the dimensions | - -### Box Styles (Inherited) -This widget also inherits these styles - -[box](_snippets/box-styles.md ':include') - -### Base Styles (Inherited) -This widget also inherits these styles - -[base](_snippets/base-styles.md ':include') \ No newline at end of file diff --git a/widget-reference/button.md b/widget-reference/button.md deleted file mode 100644 index d43b6e5..0000000 --- a/widget-reference/button.md +++ /dev/null @@ -1,58 +0,0 @@ -# Button widget - -A control that can execute an action on tap or click. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/09c1087b-f9ee-4a8c-9286-e0e881184c07) - -## Properties - -| Property | Type | Description | -| :----------- | :------ | :------------------------------------------------------------------------------------------------------------------ | -| label | string | The button label | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| submitForm | boolean | If the button is inside a Form and upon on tap, it will execute the form's onSubmit action if this property is TRUE | -| onTap | [action](/actions/directory.md) | Call Ensemble's built-in functions or execute code | -| onTapHaptic | enum | The type of haptic to perform when button is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | | -| endingIcon | object | Icon placed behind the label, according to device text alignment | -| startingIcon | object | Icon placed in front of the label, according to device text alignment | -| gap | integer | The gap between the starting icon and ending icon | - -### Styles - -| Property | Type | Description | -| :-------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| outline | boolean | Whether the button should have an outline border instead of filled background | -| color | [integer or string](/widget-reference/types#Color) | Set the color for the button label starting with '0xFF' for full opacity. `transparent`, `black`, `blue`, `white`, `red`, `grey`, `teal`, `amber`, `pink`, `purple`, `yellow`, `green`, `brown`, `cyan`, `indigo`, `lime`, `orange` | - -| labelStyle | object | An opaque object that determines the size, color, and decoration of text. | -| nameTextStyle | [TextStyle](/widget-reference/types#TextStyle) | Adjust the text styling for the name. - -### Box Styles (Inherited) -This widget also inherits these styles - -[box](_snippets/box-styles.md ':include') - -### Base Styles (Inherited) -This widget also inherits these styles - -[base](_snippets/base-styles.md ':include') - -[Icon](/widget-reference/Icon.md) - -##### startingIcon - -| Property | Type | Description | -| :------- | :------ | :------------------------------------------------- | -| name | | The name of the icon | -| library | string | Which icon library to use. `default` `fontAwesome` | -| color | | | -| size | integer | | - -##### endingIcon - -| Property | Type | Description | -| :------- | :------ | :------------------------------------------------- | -| name | | The name of the icon | -| library | string | Which icon library to use. `default` `fontAwesome` | -| color | | | -| size | integer | | \ No newline at end of file diff --git a/widget-reference/calendar.md b/widget-reference/calendar.md deleted file mode 100644 index 7fdca31..0000000 --- a/widget-reference/calendar.md +++ /dev/null @@ -1,41 +0,0 @@ -# Creating and Interacting with Calendar - -### [Kitchen Sink Example](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4aAgiwyVyucOAilPNy0s) - -| Attribute | Description | -|--------------------|-----------------------------------------------------------------------------------------------| -| rowHeight | Sets the height of each row in the calendar to a specified value (120 in this case). | -| tooltip | Displays a tooltip with information about the focused date, providing guidance on interaction.| -| headerTextStyle | Defines the text style for the calendar header, controlling its font size. | -| firstDay | Sets the first day of the calendar based on the current date. | -| range | Manages the selection of date ranges, allowing actions to be performed when a range is completed.| -| cell | Configures the style and alignment of individual calendar cells. | -| selectCell | Specifies the appearance of the selected cell in the calendar. | -| markCell | Determines the style of marked cells in the calendar. | -| todayCell | Customizes the appearance of cells representing the current date. | -| disableCell | Defines the style of disabled cells in the calendar, typically with a line-through decoration.| -| rowSpans | Configures the display of events spanning across multiple days, providing a clickable button. | - - -#### Exploring the [Kitchen Sink example](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4aAgiwyVyucOAilPNy0s), let's delve into the process that repeats as users interact with the app, triggering events and updating the UI based on the defined logic and configurations. - -Upon the View's loading, we initiate the following code block: -```yaml -executeCode: - body: |- - ensemble.storage.events = generateEvents(); -``` -This loads in all hardcoded objects within the `generateEvents()` function, as outlined in the `Global: |-` block. - -A notable quirk is encountered when dealing with bindings – setting storage to something (even itself) triggers them. The Calendar example illustrates this perfectly: -```yaml -executeCode: - body: |- - var newEvent = {'start_date': calendar.rangeStart, 'end_date': calendar.rangeEnd, 'title': nameInput.value, 'detail': descInput.value}; - ensemble.storage.events.push(newEvent); - ensemble.storage.events = ensemble.storage.events; - console.log(ensemble.storage.events); - onComplete: - navigateBack: -``` -Here, we start by appending/pushing our new event into our `ensemble.storage.events` array. However, to activate the binding for the updated array, we set it equal to itself, completing the cycle. \ No newline at end of file diff --git a/widget-reference/carousel.md b/widget-reference/carousel.md deleted file mode 100644 index cb76827..0000000 --- a/widget-reference/carousel.md +++ /dev/null @@ -1,51 +0,0 @@ -# Carousel - -The Carousel Widget allows you to create and render carousels, enabling the presentation of multiple items in a visually engaging and interactive slideshow format within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/2e1d88b1-f281-4c2c-9bb1-bd18016d2b8c) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children | array | List of widgets | -| onItemChange | [action](/actions/directory.md) | Dispatch when an carousel item is in focus. For SingleView, this happens when the item is scroll into view. For scrolling MultiView, the event dispatches only when you tap on the item. The index of the item can be retrieved using 'selectedIndex'. | | -| item-template | object | [See properties](#item-template) | - -### Styles - -| Property | Type | Description | -| :--------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| layout | string | Show a SingleView (on screen one at a time), MultiView (scrolling items), or automatically switch between the views with autoLayoutBreakpoint | -| autoLayoutBreakpoint | integer | Show multiple views on the carousel if the breakpoint is equal or larger than this threshold, otherwise show single view. (default 768) | -| autoplay | boolean | If true, Enables autoplay, sliding one page at a time. Default (false) | -| autoplayInterval | integer | Sets the duration in seconds for the autoplay. Default (4 second) | -| height | integer | The height of each view | -| gap | integer | The gap between each views, but also act as a left-right margin in a single view | -| leadingGap | integer | The space before the first item. Note that the left edge of the scroll area is still controlled by padding or margin. | -| trailingGap | integer | The space after the last item. Note that the right edge of the scroll area is still controlled by padding or margin. | -| singleItemWidthRatio | number | The screen width ratio for each carousel item (in single item mode). Value ranges from 0.0 to 1.0 for the full width. (default 1.0) | -| multipleItemWidthRatio | number | The screen width ratio for each carousel item (in multiple item mode). Value ranges from 0.0 to 1.0 for the full width (default 0.6) | -| indicatorType | string | How the view indicator should be displayed | -| indicatorPosition | string | Where to display the indicator if specified | -| indicatorWidth | integer | Sets the width of the carousel indicators within the Carousel | -| indicatorHeight | integer | Adjusts the height of the carousel indicators within the Carousel | -| indicatorMargin | string or integer | The margin around each indicator | - -### Box Styles (Inherited) -This widget also inherits these styles - -[box](_snippets/box-styles.md ':include') - -### Base Styles (Inherited) -This widget also inherits these styles - -[base](_snippets/base-styles.md ':include') - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | widget | The widget to render for each item | diff --git a/widget-reference/checkbox.md b/widget-reference/checkbox.md deleted file mode 100644 index cadef35..0000000 --- a/widget-reference/checkbox.md +++ /dev/null @@ -1,78 +0,0 @@ -# Checkbox widget - -The Checkbox widget allows the rendering of checkbox input elements, enabling users to select or deselect options within your application for convenient and interactive data manipulation. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/21f43d9b-db21-40fe-9c2f-806267e6c412) - -## Properties - -| Property | Type | Description | -| :----------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700). while min vlaue can be `0` and maximum can be `5000` | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| hintText | string | Hint text explaining your widget | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| onChange | [action](/actions/directory.md) | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| value | boolean | true if checkbox is checked else otherwise | -| autoComplete | boolean | Enable the Input search suggestion option | -| items | array | List of values, or Objects with value/label pairs | - -| leadingText | string | Sets the text displayed before the checkbox | -| trailingText | string | Sets the text displayed after the checkbox | - -### Styles - -#### Common Properties - -| Property | Type | Description | -| :------------------------ | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | - -#### Stack Position Properties - -| Property | Type | Description | -| :------------------------ | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | - -#### Border Properties - -| Property | Type | Description | -| :------------------------ | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange | - -#### Padding Properties - -| Property | Type | Description | -| :------------------------ | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| contentPadding | integer or string | Padding around your input content with CSS-style notation, e.g., margin: 5 20 5. | - - -### Box Styles (Inherited) -This widget also inherits these styles - -[box](_snippets/box-styles.md ':include') - -### Base Styles (Inherited) -This widget also inherits these styles - -[base](_snippets/base-styles.md ':include') - -### [Icon](/widget-reference/Icon.md) - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | diff --git a/widget-reference/column.md b/widget-reference/column.md deleted file mode 100644 index 2926263..0000000 --- a/widget-reference/column.md +++ /dev/null @@ -1,89 +0,0 @@ -# Column - -The Column Widget facilitates easy vertical layout of children elements, allowing for organized and visually appealing column-based designs within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/90a8e4df-5eab-4473-ba10-2ecffc9596b0) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :------------------------------- | -| item-template | object | [See properties](#item-template) | -| children | array | List of widgets | -| styles | object | [See properties](#styles) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | widget | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| mainAxis | string | Control our children's layout vertically. `start` `center` `end` `spaceBetween` `spaceAround` `spaceEvenly` | -| mainAxisSize | integer | If 'max', stretch the Column to fill its parent's height. Otherwise (min) the column's height will be its children's combined. `min` `max` | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | -| crossAxis | string | Control the horizontal alignment of the children. `start` `center` `end` `stretch` `baseline` | -| scrollable | boolean | Set to true so content can scroll vertically as needed | -| autoFit | boolean | Explicitly make the column's width as wide as the largest child, but only if our column's parent does not already assign a width. This attribute is useful for sizing children who don't have a width (e.g Divider) | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/conditional.md b/widget-reference/conditional.md deleted file mode 100644 index 4338748..0000000 --- a/widget-reference/conditional.md +++ /dev/null @@ -1,84 +0,0 @@ -# Conditional - -Conditional widget allows developers to conditionally render UI elements based on specified conditions, enhancing dynamic content display and personalized user experiences within the app. - -### Properties - -| Property | Type | Description | -| ---------- | ----- | -------------------------------------------------------------------------------------------- | -| conditions | array | Allow users to conditionally render their widgets using `if`, `elseif` and `else` statements | - -**Example** -Conditional widget is very useful specially when making a custom widget where users might want to have a default value and an optional value. Let us take an example for its use case - -Consider that you are trying to make a custom widget or Button for dealing with social logins, since there are more than on platforms like Meta, Google, Apple etc so choosing an image based on `provider` variable is a viable choice. But how can we check if `provider` is apple or google etc ? - -#### Steps - -- First of all declare the base custom widget yaml code. Then use `Conditional` to render `Image` widget accordingly. - -**Code** - -```yaml -Widget: - inputs: - - provider - - label - onLoad: | - //@code - - console.log(provider); - console.log(label); - - function capitalizeString(str) { - return str.charAt(0).toUpperCase() + str.substring(1) ; - } - - if (label.length > 0 ) - providerText.text = label; - else - providerText.text = "Sign In With " + capitalizeString(provider); - - body: - Stack: - styles: - alignChildren: centerLeft - children: - - Conditional: - conditions: - - if: ${provider === 'apple' || provider === 'Apple' } - Image: - source: https://firebasestorage.googleapis.com/v0/b/ensemble-web-studio.appspot.com/o/custom_widgets_assets%2Fsocial_login%2Fapple.png?alt=media&token=893491f0-5300-4b29-8fce-30fe98eaec76 - styles: - height: 24 - width: 24 - padding: 0 24 - - elseif: ${provider === 'google' || provider === 'Google' } - Image: - source: https://firebasestorage.googleapis.com/v0/b/ensemble-web-studio.appspot.com/o/custom_widgets_assets%2Fsocial_login%2Fgoogle.png?alt=media&token=c91b1a27-a0bd-40c2-b82d-0f250762bc0b - styles: - height: 24 - width: 24 - padding: 0 24 - - - Row: - id: rowId - styles: - borderColor: 0xFFDEDED4 - crossAxis: center - mainAxis: center - borderRadius: 8 - height: 50 - children: - - Text: - id: providerText - styles: - textStyle: - fontSize: 12 -``` - -**Output** - -This is how it looks as you complete it. - -![Alt text](image.png) diff --git a/widget-reference/confirmation-input.md b/widget-reference/confirmation-input.md deleted file mode 100644 index e1ef636..0000000 --- a/widget-reference/confirmation-input.md +++ /dev/null @@ -1,25 +0,0 @@ -# Confirmation Input - -The ConfirmationInput Widget enables the seamless rendering of a verification view. The usecases are entering OTP, Confirmation Code, PIN Number, Reset Password, Coupon and more. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/iCOvav6CcioH46LR6wYF) - -## Properties - -| Property | Type | Description | -| :--------------- | :------ | :---------------------------------------------------------------------------------------------- | -| length | integer | The number of the text fields item. | -| enableCursor | boolean | If the button is inside a Form and upon on tap, it will execute the form's onSubmit action if this property is TRUE. | -| autoComplete | boolean | If it is True, then it will trigger onComplete when the user specified length and has typed the full length, False will trigger onComplete when the user hit Enter. Defaults (True). | -| fieldType | string | How the input field should be displayed. | -| inputType | string | Pick a predefined input type. | -| defaultFieldBorderColor | string | Set the border color for inactive/unfocused state of text field. | -| activeFieldBorderColor | string | Set the border color for active/focused state of text field. | -| filledFieldBorderColor | string | Set the border color for filled state of text field. | -| defaultFieldBackgroundColor | string | Set the background Color for inactive/unfocused state of text field. | -| activeFieldBackgroundColor | string | Set the ackground Color for active/focused state of text field. | -| filledFieldBackgroundColor | string | Set the ackground Color for filled field state of text field. | -| cursorColor | string | Set the color for the cursor. | -| styles | object | [See properties](#styles) | -| onChange | action | Execute an action when a change is detected to the text field | -| onComplete | action | Execute an action when the text field fully entered or when keyboard submitted button tapped | \ No newline at end of file diff --git a/widget-reference/datagrid.md b/widget-reference/datagrid.md deleted file mode 100644 index 0d63820..0000000 --- a/widget-reference/datagrid.md +++ /dev/null @@ -1,107 +0,0 @@ -# DataGrid - -The DataGrid Widget enables the seamless rendering of data grids, facilitating the organized display and manipulation of tabular data within your application for effective data representation and interaction. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c5940e18-f2c1-4318-8e68-a678a6ae7247) - -## Properties - -| Property | Type | Description | -| :--------------- | :------ | :----------------------------------------------------------------------------------- | -| item-template | object | [See properties](#item-template) | -| children | array | List of Data Row widgets. | -| styles | object | [See properties](#styles) | -| horizontalMargin | integer | The leading and trailing gap for the DataGrid view. | -| dataRowHeight | integer | Set the height of the data row item. | -| headingRowHeight | integer | Set the height of the heading row item. | -| columnSpacing | number | Set the padding for the column. | -| dividerThickness | integer | Determines the thickness or width of dividers in the DataGrid widget. | -| DataColumns | array | List of data columns | -| sorting | object | Sort the data columns in ascending or descending order. [See properties](#styles) | - -### sorting - -| Property | Type | Description | -| :--------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | -| columnIndex | String | The index of the data column to be sorted | -| order | String | Set the data column sorting either in `ascending` or `descending` order - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | array | The data row widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| headingText | object | Set the text style for the heading text.[see properties](#headingtext) | -| dataText | object | Set the text style for the data item text. [see properties](#headingtext) | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | - -#### styles.headingText - -| Property | Type | Description | -| :--------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| fontSize | integer | Sets the size of the text. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| decoration | string | A linear decoration to draw near the text. `none` `lineThrough` `underline` `overline` | -| font | string | Default built-in style for this text. `heading` `title` `subtitle` | -| fontWeight | string | The thickness of the glyphs used to draw the text. `light` `normal` `bold` `w100` `w200` `w300` `w400` `w500` `w600` `w700` ` w800``w900 ` | -| lineHeight | string or integer | The line height of the text, which determines the vertical spacing between lines. It can be specified as, a number, or a string chosen from a set of predefined values: `default` `1.0` `1.15` `1.25` `1.5` `2.0` `2.5` | -| textStyle | string | A linear decoration to draw near the text or whether to slant the glyphs in font. `normal` `italic` `underline` `strikethrough` `italic_underline` `italic_strikethrough` | | \ No newline at end of file diff --git a/widget-reference/date.md b/widget-reference/date.md deleted file mode 100644 index 4703bd5..0000000 --- a/widget-reference/date.md +++ /dev/null @@ -1,68 +0,0 @@ -# Date widget - -The Date Widget facilitates the rendering of date input fields, providing a user-friendly interface for selecting and displaying dates within your application for date-related functionality. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e7zOy8oX5dxQU7kD5IO4) - -## Properties - -| Property | Type | Description | -| :--------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700) | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| hintText | string | Hint text explaining your widget | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| onChange | action | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| styles | object | [See properties](#styles) | -| initialValue | string | The highlighted initial date in the calendar picker (default is Today). Use format YYYY-MM-DD. | -| firstDate | string | The first selectable date in the calendar. Use format YYYY-MM-DD | -| lastDate | string | The last selectable date in the calendar. Use format YYYY-MM-DD | -| showCalendarIcon | boolean | Whether we should show (default) or hide the calendar icon. Selecting the text will still open the calendar picker | - -### icon - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| contentPadding | integer or string | Padding around your input content with CSS-style notation e.g. margin: 5 20 5 | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderRadius | integer | The border radius for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| borderWidth | integer | The border width for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | - -#### options for styles.variant - -| Option | Description | -| :-------- | :------------------------------------------------------------------------------------------------------------------- | -| box | draw a Box border around this input widget. This property can be defined in the theme to apply to all Input widgets. | -| underline | draw an Underline below this input widget. This property can be defined in the theme to apply to all Input widgets. | diff --git a/widget-reference/directory.md b/widget-reference/directory.md deleted file mode 100644 index e1accd5..0000000 --- a/widget-reference/directory.md +++ /dev/null @@ -1,71 +0,0 @@ -# Widgets Directory - -Ensemble widgets enable you to build both simple and complex applications. - -### Data display - -| Widget | Documentation | Kitchen sink example | -|------------------|------------------------------------| -------------------------------------------------------------------------------------------------------------------------- | -| Text | [Link](/widget-reference/text) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c87f8b09-58e2-4c2f-99a1-cbbe9e25e9a5) | -| Image | [Link](/widget-reference/Image) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/7c7a3ffe-68ef-4e99-b9d1-4b5cee166233) | -| Icon | [Link](/widget-reference/Icon) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e7c686f5-b8a2-4670-9e6e-8fdb0fea768e) | -| Avatar | [Link](/widget-reference/avatar) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/kJ9eqI5BPL30IwjnEDdJ) | -| Map | [Link](/widget-reference/Map) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/36e52d1a-39c5-4a6b-b064-2be6cfe3cf7b) | -| QRCode | [Link](/widget-reference/qrcode) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/f4921ba2-9f3d-4c33-8848-4df29a5e7a4d) | -| Video | [Link](/widget-reference/video) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fce92bbb-af8e-403d-bf2d-c10926cc89a0) | -| Lottie animation | [Link](/widget-reference/lottie) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/576f3004-83e6-429d-b256-628d85e05f7f) | -| Markdown | [Link](/widget-reference/markdown) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/6b6d9c3d-359b-4768-99a5-3f087a64387c) | -| HTML | [Link](/widget-reference/html) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/ZhTBody9YozadVvTlhW0) | -| Webview | [Link](/widget-reference/webview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/22c8d57d-a906-4d11-873d-161fd6c56c0a) | - -### Layout - -| Widget | Documentation | Kitchen sink example | -| ------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | -| Column | [Link](/widget-reference/column) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/90a8e4df-5eab-4473-ba10-2ecffc9596b0) | -| FittedColumn | [Link](/widget-reference/fitted-column) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/hRFxxoaBePQaLfmoBiIb) | -| Row | [Link](/widget-reference/row) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4bd0d453-c243-429d-a562-93cbc9db38e3) | -| FittedRow | [Link](/widget-reference/fitted-row) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fvSONumk7npuTDmIWwis) | -| Flex | [Link](/widget-reference/flex) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/R3KgxV3UPWb4TjoiPI0U) | -| Flow | [Link](/widget-reference/flow) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3e901fb8-a0e8-4f52-979b-7f5f2547e650) | -| ListView | [Link](/widget-reference/listview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/w0Wmu9ZMP4csk7IELSx3) | -| GridView | [Link](/widget-reference/gridview) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/DX5j2WVQFabmxD9FCD5h) | -| StaggeredGrid | [Link](/widget-reference/staggeredgrid.md) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/a9iIs4wvgqDOhU4rN6GR) | -| Stack | [Link](/widget-reference/stack) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/572ecf3b-b9f2-46f4-960f-ff438e5fa1dc) | -| DataGrid | [Link](/widget-reference/datagrid) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c5940e18-f2c1-4318-8e68-a678a6ae7247) | -| TabBar | [Link](/widget-reference/tabbar) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/cebd491d-7d90-43f4-9f17-b8575de441ca) | -| Carousel | [Link](/widget-reference/carousel) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/2e1d88b1-f281-4c2c-9bb1-bd18016d2b8c) | -| Divider | [Link](/widget-reference/divider) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4a893a2e-5bde-400c-b974-b25b497d31a5) | -| Spacer | [Link](/widget-reference/spacer) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/1d7e42a9-5bbc-4b4b-9a02-8c102234ee05) | -| Shape | [Link](/widget-reference/shape) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/Lg2nljyD46n2hiAUlBMP) | - -### Forms and inputs - -| Widget | Documentation | Kitchen sink example | -| --------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| Form | [Link](/widget-reference/form) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3107baf6-dfc3-42cd-b617-61c37b31f31e) | -| TextInput | [Link](/widget-reference/textinput) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/abc081b1-bcb4-4db6-ae55-7987cb6c418e) | -| Button | [Link](/widget-reference/button) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/09c1087b-f9ee-4a8c-9286-e0e881184c07) | -| Dropdown | [Link](/widget-reference/dropdown) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fb8d28a2-834e-40a9-8419-155272fb0191) | -| AutoComplete | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3tBTU9CUTu0IegpytNYa) | -| Checkbox | [Link](/widget-reference/checkbox) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/21f43d9b-db21-40fe-9c2f-806267e6c412) | -| Switch | [Link](/widget-reference/switch) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3f4ba37a-0e6a-46a1-9b78-e4e04c84937d) | -| Date | [Link](/widget-reference/date) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/e7zOy8oX5dxQU7kD5IO4) | -| DateRange | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/b45c5576-ec22-4b04-832f-6dd7571dd20f) | -| Time | [Link](/widget-reference/time) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/yNHLPObY1wWgCpg0sgoW) | -| PasswordInput | [Link](/widget-reference/passwordinput) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/218fa244-f0cd-4d17-91e6-7c099bbedede) | -| Signature | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/70eb8a13-e7df-4778-b7e6-57df17b032a0) | -| WeeklyScheduler | Coming soon | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/244ce957-98ed-4db8-a5a7-ee587d6dfe0b) | - -### Conditional - -| Widget | Documentation | Kitchen sink example | -| ----------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Conditional | [link](/widget-reference/conditional) | [link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/XljPegGrdieyKjy16URC?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) | - -### Feedback - -| Widget | Documentation | Kitchen sink example | -| ------------------ | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| Progress indicator | [Link](/widget-reference/progressindicator) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c2c248f2-a289-40d3-acd5-65a1a7f3c5a2) | -| Toast message | [Link](/build/make-it-interactive/actions-and-events/6-showToast) | [Link](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/9a576805-019a-4bd3-953f-3c623fbfb905) | diff --git a/widget-reference/divider.md b/widget-reference/divider.md deleted file mode 100644 index 6da3473..0000000 --- a/widget-reference/divider.md +++ /dev/null @@ -1,35 +0,0 @@ -# Divider - -The Divider Widget facilitates the rendering of dividers, enabling visual separation and organization of content within your application for enhanced clarity and aesthetics. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4a893a2e-5bde-400c-b974-b25b497d31a5) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------ | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| margin | string or integer | Margin with CSS-style notation e.g. margin: 5 20 5 | -| direction | string | Whether to display a horizontal divider (default) or vertical divider. | -| thickness | integer | Determines the thickness or width of the divider line within the Divider. | -| color | integer or string | The color specification for divider, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| indent | integer | The leading gap before the line starts | -| endIndent | integer | The ending gap after the line ends | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | diff --git a/widget-reference/dropdown.md b/widget-reference/dropdown.md deleted file mode 100644 index 08748c3..0000000 --- a/widget-reference/dropdown.md +++ /dev/null @@ -1,69 +0,0 @@ -# DropDown widget - -The DropDown Widget enables the rendering of dropdown menus, providing users with a selectable list of options within your application for intuitive and efficient data selection. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fb8d28a2-834e-40a9-8419-155272fb0191) - -## Properties - -| Property | Type | Description | -|:-------------|:-----------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700). while min vlaue can be `0` and maximum can be `5000` | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| labelStyle | [TextStyle](/widget-reference/types#TextStyle) | Styling for the label | -| hintText | string | Hint text explaining your widget | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| onChange | action | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| value | string | Specifying the value of your Text Input | -| autoComplete | boolean | Enable the Input search suggestion option | -| items | array | List of values, or Objects with value/label pairs | -| itemTemplate | [ItemTemplate](#ItemTemplate) | Use this to iterate through a data array and render each dropdown item, as well as specify the selected item's value | - -### ItemTemplate -| Property | Type | Description | -|:---------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------| -| data | array | Specify an array of data (or an expression that resolves to an array).
The system will iterate through each item in this array | -| name | string | As the system iterate through the data, you can reference each item's data using this name | -| template | Widget | The widget to be rendered for each dropdown item in the data array. The widget can reference the data using the name specified above. | -| value | string | Specify the expression to evaluate as each item's value. This will be the value when a dropdown item is selected. | - -## Styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| contentPadding | integer or string | Padding around your input content with CSS-style notation e.g. margin: 5 20 5 | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | - -### icon - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | diff --git a/widget-reference/fitted-column.md b/widget-reference/fitted-column.md deleted file mode 100644 index 6a7e8db..0000000 --- a/widget-reference/fitted-column.md +++ /dev/null @@ -1,79 +0,0 @@ -# FittedColumn - -Stretch to fit the parent (the parent is required to have a predetermined height), then distribute the vertical spaces evenly among its children. You can override the space distribution via 'childrenFits' attribute. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/hRFxxoaBePQaLfmoBiIb) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------------------------------- | -| children | array | List of widgets | -| onTap | action | Call Ensemble's built-in functions or execute code | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| childrenFits | array | Specify array of numbers to set how space is distributed among the children. Use `auto` instead of a number in order to have the child widget determin its own width. | -| mainAxis | string | Control our children's layout vertically. `start` `center` `end` `spaceBetween` `spaceAround` `spaceEvenly` | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | -| crossAxis | string | Control the horizontal alignment of the children. `start` `center` `end` `stretch` `baseline` | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| childrenFits | array | Specify an array of non-zero integers or `auto`, each corresponding to a child. Setting `auto` will let the child determines its own size, while setting a non-zero integer will determine the child's size multiple. The `auto` children will be laid out first and get as much space as they need, then the left-over space will be distributed to the other children based on their size multiples. Otherwise default is 1, After laying out the `auto` children, the left-over space will be divided up based on this multiple. | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/fitted-row.md b/widget-reference/fitted-row.md deleted file mode 100644 index deb48cf..0000000 --- a/widget-reference/fitted-row.md +++ /dev/null @@ -1,79 +0,0 @@ -# FittedRow - -Stretch to fit the parent (the parent is required to have a predetermined width), then distribute the horizontal spaces evenly among its children. You can override the space distribution via 'childrenFits' attribute. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fvSONumk7npuTDmIWwis) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------------------------------- | -| children | array | List of widgets | -| onTap | action | Call Ensemble's built-in functions or execute code | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| childrenFits | array | Specify array of numbers to set how space is distributed among the children. Use `auto` instead of a number in order to have the child widget determin its own width. | -| mainAxis | string | Control our children's layout vertically. `start` `center` `end` `spaceBetween` `spaceAround` `spaceEvenly` | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | -| crossAxis | string | Control the horizontal alignment of the children. `start` `center` `end` `stretch` `baseline` | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| childrenFits | array | Specify an array of non-zero integers or `auto`, each corresponding to a child. Setting `auto` will let the child determines its own size, while setting a non-zero integer will determine the child's size multiple. The `auto` children will be laid out first and get as much space as they need, then the left-over space will be distributed to the other children based on their size multiples. Otherwise default is 1, After laying out the `auto` children, the left-over space will be divided up based on this multiple. | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/flex.md b/widget-reference/flex.md deleted file mode 100644 index eb3c4c5..0000000 --- a/widget-reference/flex.md +++ /dev/null @@ -1,91 +0,0 @@ -# Flex - -The Flex Widget is a versatile layout option that dynamically switches between Row or Column based on the direction property, offering flexible and responsive designs that adapt to different screen sizes. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/R3KgxV3UPWb4TjoiPI0U) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :------------------------------- | -| children | array | List of widgets | -| styles | object | [See properties](#styles) | -| item-template | object | [See properties](#item-template) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| direction | string | Lay out the children vertically or horizontally | -| mainAxis | string | Control how to lay out the children, in the direction specified by the 'direction' attribute. `start` `center` `end` `spaceBetween` `spaceAround` `spaceEvenly` | -| mainAxisSize | integer | If 'max', stretch the Column to fill its parent's height. Otherwise (min) the column's height will be its children's combined. `min` `max` | -| crossAxis | string | Control the alignment of the children on the secondary axis (depending on the 'direction' attribute). `start` `center` `end` `stretch` `baseline` | -| mainAxisSize | string | If 'max', stretch the Flex to fill its parent's dimension (width or height based on the direction). Otherwise (min) the Flex's dimension will be its children's combined. | -| scrollable | boolean | Set to true so content can scroll vertically or horizontally as needed | -| autoFit | boolean | Explicitly match the width or height to the largest child's size, but only if the parent does not already assign a width or height. This attribute is useful for sizing children who don't have a width or height (e.g Divider) | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/flow.md b/widget-reference/flow.md deleted file mode 100644 index 636cf7c..0000000 --- a/widget-reference/flow.md +++ /dev/null @@ -1,44 +0,0 @@ -# Flow - -The Flow Widget is a container that wraps its children, with a default horizontal direction that can be customized to vertical, allowing for flexible and fluid layouts within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3e901fb8-a0e8-4f52-979b-7f5f2547e650) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :--------------------------------------------------------- | -| item-template | object | [See properties](#item-template) | -| children | array | List of widgets | -| direction | string | The main direction to lay out the children before wrapping | -| styles | object | [See properties](#styles) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| mainAxis | string | Control our children's layout vertically | -| gap | integer | The gap between the children in the main direction | -| lineGap | integer | The gap between the lines if the children start wrapping | -| maxWidth | integer | Sets the maximum width allowed for an element. | -| maxHeight | integer | Sets the maximum height allowed for an element. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | diff --git a/widget-reference/form.md b/widget-reference/form.md deleted file mode 100644 index 8648443..0000000 --- a/widget-reference/form.md +++ /dev/null @@ -1,136 +0,0 @@ -# Form widget - -Form is a wrapper widget for inputs such as TextInput, Dropdown, Checkbox, etc. Form enables you to perform validation and styling on inputs inside the Form. - -[Detailed Example of validating/submitting a Form from inside a form or outside](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fIZkgKM25hNHtI0q5wZF) - -### Validate and Submit - -#### Submit a Form from a Button inside a Form -To trigger validation of a Form's children inputs, add a Button widget with the property of `validateForm: true`. In this example, following validations will be performed when the submit button is pressed. If `validateForm: true`, Form will be submitted only if validation passes. - -```yaml -View: - body: - Form: - onSubmit: - invokeAPI: - name: addAccount - inputs: - name: ${name.value} - email: ${email.value} - onResponse: - # perform additional action here - onError: - # perform additional action here - children: - - TextInput: - id: name - label: First and last name - required: true - - TextInput: - id: email - label: Email - required: true - inputType: email - - Button: - label: Submit - validateForm: true - submitForm: true - -API: - addAccount: - inputs: - - name - - email - method: POST - uri: https://sample.api/user - body: - name: ${name} - email: ${email} -``` -#### Validate or Submit a Form from outside the Form -Detailed Example [here](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fIZkgKM25hNHtI0q5wZF) This examples shows how to validate/submit a form from a sticky button in the footer. This is a common pattern in mobile apps. - -By default, when `Form.submit()` is called, it first called `Form.validate()` and calls submit only if the validation succeeds (i.e. all form fields are in valid state. - -Following is a snippet from the example above - -```yaml - footer: - styles: - backgroundColor: white - children: - - Button: - styles: - backgroundColor: black - borderRadius: 40 - padding: 20 - label: Submit - onTap: |- - basicForm.validate(); - complexForm.submit(); -``` - -### Styling - -You can control the styling of inputs' label at the Form level, by setting `labelPosition`, `labelMaxWidth`, and `labelOverflow` properties under Form's style. - -Use `labelStyle` to control the detailed styling of all the labels. Note that an Input widget's own labelStyle will take precedence over the Form's labelStyle. - -```yaml -View: - body: - Form: - styles: - labelPosition: start - labelMaxWidth: 100 - labelOverflow: clip - # all labels will have a bolder weight - labelStyle: - fontWeight: w600 - children: - - TextInput: - label: Name - required: true - - TextInput: - label: email - required: true - inputType: email - styles: - # setting this will ignore the Form's labelStyle - labelStyle: - color: red - - Button: - label: Submit - validateForm: true -``` - -## Properties - -| Property | Type | Description | -| :------- | :------ | :------------------------------------------------------------------------ | -| enabled | boolean | Enables or disables the interactivity and input functionality of the Form | -| onSubmit | action | Action to execute when the form is submitted | -| children | array | List of widgets | -| styles | object | [see properties](#styles) | - -## Styles - -| Property | Type | Description | -|:--------------|:-----------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------| -| labelPosition | string | Where the position the FormField's label `top` `start` `none` | -| labelOverflow | string | Treatment of text longer than available space `wrap` `visible` `clip` `ellipsis` | -| labelMaxWidth | integer | Cap the label's width, useful on larger screen. This property only works on labelPosition=start. | -| labelStyle | [TextStyle](/widget-reference/types#TextStyle) | Styling for the label | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| gap | integer | Vertical gap to insert between the children (default is 10) | - -## Methods - -| Function | Return Type | Description | -|:-----------|:------------|:-------------------------------------------------------------------------------------------------------| -| validate() | boolean | validates each formfield inside the Form. Returns true if all the fields are valid and false otherwise | -| submit() | none | submits the form | - diff --git a/widget-reference/gridview.md b/widget-reference/gridview.md deleted file mode 100644 index 7d0e4b0..0000000 --- a/widget-reference/gridview.md +++ /dev/null @@ -1,90 +0,0 @@ -# GridView - -The GridView Widget empowers you to render grid-based layouts, enabling the display of content in a structured and organized manner with customizable grid configurations within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/DX5j2WVQFabmxD9FCD5h) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :-------------------------------------------------------------------------------------- | -| item-template | object | [See properties](#item-template) | -| onItemTap | action | Call Ensemble's built-in functions or execute code when tapping on an item in the list. The index of the item can be retrieved using 'selectedItemIndex'. You can access as this.selectedItemIndex. See example linked above | -| onItemTapHaptic | enum | The type of haptic to perform when item is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | -| styles | object | [See properties](#styles) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| horizontalTileCount | | The number of horizontal tiles (max 5) to show. If not specified, the number of tiles will automatically be determined by the screen size. You may also specify a single number (for all breakpoints), three numbers (for small, medium, large breakpoints), or five numbers (xSmall, small, medium, large, xLarge). | -| horizontalGap | integer | The gap between the horizontal tiles if there are more than one (default: 10). | -| verticalGap | integer | The gap between the vertical tiles if there are more than one (default: 10). | -| itemHeight | integer | Set a fixed height for each item in the tile. If each tile item comprises of many widgets vertically, setting this attribute may require you to stretch (expand) at least one inner widget. | -| itemAspectRatio | number | Instead of itemHeight, you can set the tile's dimension as a ratio of (item width / item height). For example, a tile with 3x width and 2x height is 3/2 = 1.5. This attribute will be ignored if itemHeight is set. | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/html.md b/widget-reference/html.md deleted file mode 100644 index 1239d34..0000000 --- a/widget-reference/html.md +++ /dev/null @@ -1,88 +0,0 @@ -# HTML widget - -The HTML Render Widget enables seamless rendering of HTML code within your application, providing a dynamic and interactive experience for users. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/ZhTBody9YozadVvTlhW0) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------ | -| text | string | Enter the HTML text | -| cssStyles | List of [cssStyle](#cssStyle) | Enter the CSS to interact with HTML | - -### cssStyle - -| Property | Type | Description | -| :------- | :----- | :------------------ | -| selector | String | Equivalent to the CSS selector. To select any given tag using either tag name, class name or id of that tag | -| properties | [properties](#properties) | The css properties to apply to a selected tag. | - -### properties - -| Property | Type | Description | -| :--------------------- | :------------ | :------------------------------------------------ | -| backgroundColor | string | Sets the background color of an element. Useful for emphasizing or styling page sections. | -| color | string | Defines the text color within an element, impacting readability and visual hierarchy. | -| counterIncrement | string | Specifies the increment value for counters, facilitating dynamic list numbering or tracking. | -| counterReset | string | Determines the reset value for counters, useful for restarting or initializing counting sequences. | -| direction | string | Sets the text direction, crucial for proper alignment in multilingual content. | -| display | string | Specifies the box model used for an element, influencing its layout and rendering behavior. | -| fontFamily | string | Defines the font family for text, allowing customization of the typeface for stylistic or thematic consistency. | -| fontFeatureSettings | string | Enables advanced typographic features in fonts, providing fine control over ligatures and stylistic elements. | -| fontSize | string | Sets the font size within an element, influencing the overall visual hierarchy and readability of content. | -| fontStyle | string | Specifies the style of the font, such as italic or normal, contributing to the visual emphasis of displayed text. | -| fontWeight | string | Sets the thickness of characters within a text element, allowing for varied emphasis and hierarchy in content. | -| height | string | Defines the height of an element, offering control over vertical dimensions and aspect ratios. | -| letterSpacing | string | Adjusts the spacing between characters in text, providing fine-tuned control over readability and aesthetics. | -| listStyleImage | string | Sets an image as the list-item marker, allowing customization of list styles with distinctive visual markers. | -| listStyleType | string | Defines the type of marker or style for list items, contributing to the overall appearance and theme of content lists. | -| listStylePosition | string | Sets the position of the list-item marker, influencing its placement in relation to list item content and surroundings. | -| margin | string | Sets the margin outside an element's border, controlling spacing between the element and its neighboring elements. | -| padding | string | Defines the padding inside an element's border, ensuring space between the element's content and its border. | -| textAlign | string | Aligns text within an element, controlling horizontal positioning such as left-aligned, center-aligned, or right-aligned.| -| textDecoration | string | Adds decoration to text, like underline or overline, enhancing visual appeal or conveying additional information. | -| textDecorationColor | string | Sets the color of the text decoration, allowing coordination with the document's color scheme. | -| textDecorationStyle | string | Defines the style of the text decoration, influencing its visual appearance with options like solid, dashed, or dotted lines.| -| textDecorationThickness| string | Specifies the thickness of the text decoration, providing control over its visual prominence. | -| textOverflow | string | Defines how text content that overflows its container should be handled, indicating options like ellipsis or clip. | -| textShadow | string | Adds a shadow to text for emphasis, enhancing legibility and visual impact of text elements within a design or layout. | -| textTransform | string | Controls the capitalization of text, allowing options like uppercase or lowercase to achieve stylistic preferences. | -| verticalAlign | string | Aligns the vertical positioning of inline elements, ensuring proper alignment in relation to surrounding content. | -| whiteSpace | string | Controls handling of white space inside an element, influencing text wrapping, line breaks, and spacing for optimal readability.| -| width | string | Defines the width of an element, offering control over horizontal dimensions and aspect ratios. | -| wordSpacing | string | Adjusts spacing between words in text, providing control over the visual appearance and readability of textual content. | -| lineHeight | string | Sets the height of a line of text, influencing overall vertical spacing and readability within an element. | -| maxLines | string | Limits the number of lines for multiline text, controlling display and preventing excessive expansion of text content. | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| headingText | object | Set the text style for the heading text.[see properties](#headingtext) | -| dataText | object | Set the text style for the data item text. [see properties](#headingtext) | diff --git a/widget-reference/icon2.md b/widget-reference/icon2.md deleted file mode 100644 index 4755460..0000000 --- a/widget-reference/icon2.md +++ /dev/null @@ -1,2585 +0,0 @@ -# Finding supported icons and their library - -Ensemble Supports 3 icon libraries -- [Default Flutter](https://github.com/EnsembleUI/ensemble/blob/476af9ea9862620205a4e85a3312e5433764f785/lib/framework/widget/icon.dart#L59) -- [Remix](https://remixicon.com) -- [fontAwesome](https://fontawesome.com/search) - -## **Remix Library** -[Find supported images here!](https://remixicon.com) -```yaml -- Text: - text: Example 4 using Remix -- Icon: - name: time_line - library: remix - styles: - size: 80 -``` - -| Icon Name | -| -------------------- | -| time_line | -| first_aid_kit_line | -| image_2_line | -| thermometer_line | -| shield_check_line | -| road_map_line | -| add_circle_line | -| user_line | -| questionnaire_line | -| stack_line | -| focus_3_line | - - -## **Default Library** - -```yaml -- Text: - text: Example 3 using Default -- Icon: - name: alarm - styles: - size: 60 -``` - -| Icon Name | -|---------------------------| -| ac_unit | -| access_alarm | -| access_alarms | -| access_time | -| accessibility | -| accessibility_new | -| accessible | -| accessible_forward | -| account_balance | -| account_balance_wallet | -| account_box | -| account_circle | -| adb | -| add | -| add_a_photo | -| add_alarm | -| add_alert | -| add_box | -| add_call | -| add_circle | -| add_circle_outline | -| add_comment | -| add_location | -| add_photo_alternate | -| add_shopping_cart | -| add_to_home_screen | -| add_to_photos | -| add_to_queue | -| adjust | -| airline_seat_flat | -| airline_seat_flat_angled | -| airline_seat_individual_suite | -| airline_seat_legroom_extra | -| airline_seat_legroom_normal | -| airline_seat_legroom_reduced | -| airline_seat_recline_extra | -| airline_seat_recline_normal | -| airplanemode_active | -| airplanemode_inactive | -| airplay | -| airport_shuttle | -| alarm | -| alarm_add | -| alarm_off | -| alarm_on | -| album | -| all_inclusive | -| all_out | -| alternate_email | -| android | -| announcement | -| apps | -| archive | -| arrow_back | -| arrow_back_ios | -| arrow_downward | -| arrow_drop_down | -| arrow_drop_down_circle | -| arrow_drop_up | -| arrow_forward | -| arrow_forward_ios | -| arrow_left | -| arrow_right | -| arrow_upward | -| art_track | -| aspect_ratio | -| assessment | -| assignment | -| assignment_ind | -| assignment_late | -| assignment_return | -| assignment_returned | -| assignment_turned_in | -| assistant | -| assistant_photo | -| atm | -| attach_file | -| attach_money | -| attachment | -| audiotrack | -| autorenew | -| av_timer | -| backspace | -| backup | -| battery_alert | -| battery_charging_full | -| battery_full | -| battery_std | -| battery_unknown | -| beach_access | -| beenhere | -| block | -| bluetooth | -| bluetooth_audio | -| bluetooth_connected | -| bluetooth_disabled | -| bluetooth_searching | -| blur_circular | -| blur_linear | -| blur_off | -| blur_on | -| book | -| bookmark | -| bookmark_border | -| border_all | -| border_bottom | -| border_clear | -| border_color | -| border_horizontal | -| border_inner | -| border_left | -| border_outer | -| border_right | -| border_style | -| border_top | -| border_vertical | -| branding_watermark | -| brightness_1 | -| brightness_2 | -| brightness_3 | -| brightness_4 | -| brightness_5 | -| brightness_6 | -| brightness_7 | -| brightness_auto | -| brightness_high | -| brightness_low | -| brightness_medium | -| broken_image | -| brush | -| bubble_chart | -| bug_report | -| build | -| burst_mode | -| business | -| business_center | -| cached | -| cake | -| calendar | -| calendar_today | -| calendar_view_day | -| call | -| call_end | -| call_made | -| call_merge | -| call_missed | -| call_missed_outgoing | -| call_received | -| call_split | -| call_to_action | -| camera | -| camera_alt | -| camera_enhance | -| camera_front | -| camera_rear | -| camera_roll | -| cancel | -| cancel_presentation | -| card_giftcard | -| card_membership | -| card_travel | -| casino | -| cast | -| cast_connected | -| cast_for_education | -| category | -| cell_wifi | -| center_focus_strong | -| center_focus_weak | -| change_history | -| chat | -| chat_bubble | -| chat_bubble_outline | -| check | -| check_box | -| check_box_outline_blank | -| check_circle | -| check_circle_outline | -| chevron_left | -| chevron_right | -| child_care | -| child_friendly | -| chrome_reader_mode | -| class | -| clear | -| clear_all | -| close | -| closed_caption | -| cloud | -| cloud_circle | -| cloud_done | -| cloud_download | -| cloud_off | -| cloud_queue | -| cloud_upload | -| code | -| collections | -| collections_bookmark | -| color_lens | -| colorize | -| comment | -| commute | -| compare | -| compare_arrows | -| compass_calibration | -| computer | -| confirmation_number | -| contact_mail | -| contact_phone | -| contact_support | -| contacts | -| control_camera | -| control_point | -| control_point_duplicate | -| copy | -| copyright | -| create | -| create_new_folder | -| credit_card | -| crop | -| crop_16_9 | -| crop_3_2 | -| crop_5_4 | -| crop_7_5 | -| crop_din | -| crop_free | -| crop_landscape | -| crop_original | -| crop_portrait | -| crop_rotate | -| crop_square | -| dashboard | -| data_usage | -| date_range | -| dehaze | -| delete | -| delete_forever | -| delete_outline | -| delete_sweep | -| departure_board | -| description | -| desktop_access_disabled | -| desktop_mac | -| desktop_windows | -| details | -| developer_board | -| developer_mode | -| device_hub | -| device_unknown | -| devices | -| devices_other | -| dialer_sip | -| dialpad | -| directions | -| directions_bike | -| directions_boat | -| directions_bus | -| directions_car | -| directions_railway | -| directions_run | -| directions_subway | -| directions_transit | -| directions_walk | -| disc_full | -| dns | -| do_not_disturb | -| do_not_disturb_alt | -| do_not_disturb_off | -| do_not_disturb_on | -| dock | -| domain | -| done | -| done_all | -| done_outline | -| donut_large | -| donut_small | -| drafts | -| drag_handle | -| drag_indicator | -| drive_eta | -| dvr | -| edit | -| edit_attributes | -| edit_location | -| eject | -| email | -| enhanced_encryption | -| equalizer | -| error | -| error_outline | -| euro_symbol | -| ev_station | -| event | -| event_available | -| event_busy | -| event_note | -| event_seat | -| exit_to_app | -| expand_less | -| expand_more | -| explicit | -| explore | -| exposure | -| exposure_neg_1 | -| exposure_neg_2 | -| exposure_plus_1 | -| exposure_plus_2 | -| exposure_zero | -| extension | -| face | -| fast_forward | -| fast_rewind | -| fastfood | -| favorite | -| favorite_border | -| featured_play_list | -| featured_video | -| feedback | -| fiber_dvr | -| fiber_manual_record | -| fiber_new | -| fiber_pin | -| fiber_smart_record | -| file_download | -| file_upload | -| filter | -| filter_1 | -| filter_2 | -| filter_3 | -| filter_4 | -| filter_5 | -| filter_6 | -| filter_7 | -| filter_8 | -| filter_9 | -| filter_9_plus | -| filter_b_and_w | -| filter_center_focus | -| filter_drama | -| filter_frames | -| filter_hdr | -| filter_list | -| filter_none | -| filter_tilt_shift | -| filter_vintage | -| find_in_page | -| find_replace | -| fingerprint | -| first_page | -| fitness_center | -| flag | -| flare | -| flash_auto | -| flash_off | -| flash_on | -| flight | -| flight_land | -| flight_takeoff | -| flip | -| flip_to_back | -| flip_to_front | -| folder | -| folder_open | -| folder_shared | -| folder_special | -| font_download | -| format_align_center | -| format_align_justify | -| format_align_left | -| format_align_right | -| format_bold | -| format_clear | -| format_color_fill | -| format_color_reset | -| format_color_text | -| format_indent_decrease | -| format_indent_increase | -| format_italic | -| format_line_spacing | -| format_list_bulleted | -| format_list_numbered | -| format_list_numbered_rtl | -| format_paint | -| format_quote | -| format_shapes | -| format_size | -| format_strikethrough | -| format_textdirection_l_to_r | -| format_textdirection_r_to_l | -| format_underlined | -| forum | -| forward | -| forward_5 | -| forward_10 | -| forward_30 | -| four_k | -| free_breakfast | -| fullscreen | -| fullscreen_exit | -| functions | -| g_translate | -| gamepad | -| games | -| gavel | -| gesture | -| get_app | -| gif | -| golf_course | -| gps_fixed | -| gps_not_fixed | -| gps_off | -| grade | -| gradient | -| grain | -| graphic_eq | -| grid_off | -| grid_on | -| group | -| group_add | -| group_work | -| hd | -| hdr_off | -| hdr_on | -| hdr_strong | -| hdr_weak | -| headset | -| headset_mic | -| headset_off | -| healing | -| hearing | -| help | -| help_outline | -| high_quality | -| highlight | -| highlight_off | -| history | -| home | -| hot_tub | -| hotel | -| hourglass_empty | -| hourglass_full | -| http | -| https | -| image | -| image_aspect_ratio | -| import_contacts | -| import_export | -| important_devices | -| inbox | -| indeterminate_check_box | -| info | -| info_outline | -| input | -| insert_chart | -| insert_comment | -| insert_drive_file | -| insert_emoticon | -| insert_invitation | -| insert_link | -| insert_photo | -| invert_colors | -| invert_colors_off | -| iso | -| keyboard | -| keyboard_arrow_down | -| keyboard_arrow_left | -| keyboard_arrow_right | -| keyboard_arrow_up | -| keyboard_backspace | -| keyboard_capslock | -| keyboard_hide | -| keyboard_return | -| keyboard_tab | -| keyboard_voice | -| kitchen | -| label_important | -| label_outline | -| landscape | -| language | -| laptop | -| laptop_chromebook | -| laptop_mac | -| laptop_windows | -| last_page | -| launch | -| layers | -| layers_clear | -| leak_add | -| leak_remove | -| lens | -| library_add | -| library_books | -| library_music | -| lightbulb_outline | -| line_style | -| line_weight | -| linear_scale | -| link | -| link_off | -| linked_camera | -| list | -| live_help | -| live_tv | -| local_activity | -| local_airport | -| local_atm | -| local_bar | -| local_cafe | -| local_car_wash | -| local_convenience_store | -| local_dining | -| local_drink | -| local_florist | -| local_gas_station | -| local_grocery_store | -| local_hospital | -| local_hotel | -| local_laundry_service | -| local_library | -| local_mall | -| local_movies | -| local_offer | -| local_parking | -| local_pharmacy | -| local_phone | -| local_pizza | -| local_play | -| local_post_office | -| local_printshop | -| local_see | -| local_shipping | -| local_taxi | -| location_city | -| location_disabled | -| location_off | -| location_on | -| location_searching | -| lock | -| lock_open | -| lock_outline | -| looks | -| looks_3 | -| looks_4 | -| looks_5 | -| looks_6 | -| looks_one | -| looks_two | -| loop | -| loupe | -| low_priority | -| loyalty | -| mail | -| mail_outline | -| map | -| markunread | -| markunread_mailbox | -| maximize | -| memory | -| menu | -| merge_type | -| message | -| mic | -| mic_none | -| mic_off | -| minimize | -| missed_video_call | -| mms | -| mobile_screen_share | -| mode_comment | -| mode_edit | -| monetization_on | -| money_off | -| monochrome_photos | -| mood | -| mood_bad | -| more | -| more_horiz | -| more_vert | -| motorcycle | -| mouse | -| move_to_inbox | -| movie | -| movie_creation | -| movie_filter | -| multiline_chart | -| music_note | -| music_video | -| my_location | -| nature | -| nature_people | -| navigate_before | -| navigate_next | -| navigation | -| near_me | -| network_cell | -| network_check | -| network_locked | -| network_wifi | -| new_releases | -| next_week | -| nfc | -| no_encryption | -| no_sim | -| not_interested | -| not_listed_location | -| note | -| note_add | -| notification_important | -| notifications | -| notifications_active | -| notifications_none | -| notifications_off | -| notifications_paused | -| offline_bolt | -| offline_pin | -| ondemand_video | -| opacity | -| open_in_browser | -| open_in_new | -| open_with | -| outlined_flag | -| pages | -| pageview | -| palette | -| pan_tool | -| panorama | -| panorama_fish_eye | -| panorama_horizontal | -| panorama_vertical | -| panorama_wide_angle | -| party_mode | -| pause | -| pause_circle_filled | -| pause_circle_outline | -| payment | -| people | -| people_outline | -| perm_camera_mic | -| perm_contact_calendar | -| perm_data_setting | -| perm_device_information | -| perm_identity | -| perm_media | -| perm_phone_msg | -| perm_scan_wifi | -| person | -| person_add | -| person_outline | -| person_pin | -| person_pin_circle | -| personal_video | -| pets | -| phone | -| phone_android | -| phone_bluetooth_speaker | -| phone_forwarded | -| phone_in_talk | -| phone_iphone | -| phone_locked | -| phone_missed | -| phone_paused | -| phonelink | -| phonelink_erase | -| phonelink_lock | -| phonelink_off | -| phonelink_ring | -| phonelink_setup | -| photo | -| photo_album | -| photo_camera | -| photo_filter | -| photo_library | -| photo_size_select_actual | -| photo_size_select_large | -| photo_size_select_small | -| picture_as_pdf | -| picture_in_picture | -| picture_in_picture_alt | -| pie_chart | -| pie_chart_outlined | -| pin_drop | -| place | -| play_arrow | -| play_circle_filled | -| play_circle_outline | -| play_for_work | -| playlist_add | -| playlist_add_check | -| playlist_play | -| plus_one | -| poll | -| polymer | -| pool | -| portable_wifi_off | -| portrait | -| power | -| power_input | -| power_settings_new | -| pregnant_woman | -| present_to_all | -| print | -| priority_high | -| public | -| publish | -| query_builder | -| question_answer | -| queue | -| queue_music | -| queue_play_next | -| radio | -| radio_button_checked | -| radio_button_unchecked | -| rate_review | -| receipt | -| recent_actors | -| record_voice_over | -| redeem | -| redo | -| refresh | -| remove | -| remove_circle | -| remove_circle_outline | -| remove_from_queue | -| remove_red_eye | -| remove_shopping_cart | -| reorder | -| repeat | -| repeat_one | -| replay | -| replay_5 | -| replay_10 | -| replay_30 | -| reply | -| reply_all | -| report | -| report_off | -| report_problem | -| restaurant | -| restaurant_menu | -| restore | -| restore_from_trash | -| restore_page | -| ring_volume | -| room | -| room_service | -| rotate_90_degrees_ccw | -| rotate_left | -| rotate_right | -| rounded_corner | -| router | -| rowing | -| rss_feed | -| rv_hookup | -| satellite | -| save | -| save_alt | -| scanner | -| scatter_plot | -| schedule | -| school | -| score | -| screen_lock_landscape | -| screen_lock_portrait | -| screen_lock_rotation | -| screen_rotation | -| screen_share | -| sd_card | -| sd_storage | -| search | -| security | -| select_all | -| send | -| sentiment_dissatisfied | -| sentiment_neutral | -| sentiment_satisfied | -| sentiment_very_dissatisfied | -| sentiment_very_satisfied | -| settings | -| settings_applications | -| settings_backup_restore | -| settings_bluetooth | -| settings_brightness | -| settings_cell | -| settings_ethernet | -| settings_input_antenna | -| settings_input_component | -| settings_input_composite | -| settings_input_hdmi | -| settings_input_svideo | -| settings_overscan | -| settings_phone | -| settings_power | -| settings_remote | -| settings_system_daydream | -| settings_voice | -| share | -| shop | -| shop_two | -| shopping_basket | -| shopping_cart | -| short_text | -| show_chart | -| shuffle | -| shutter_speed | -| signal_cellular_4_bar | -| signal_cellular_connected_no_internet_4_bar | -| signal_cellular_no_sim | -| signal_cellular_null | -| signal_cellular_off | -| signal_wifi_4_bar | -| signal_wifi_4_bar_lock | -| signal_wifi_off | -| sim_card | -| sim_card_alert | -| skip_next | -| skip_previous | -| slideshow | -| slow_motion_video | -| smartphone | -| smoke_free | -| smoking_rooms | -| sms | -| sms_failed | -| snooze | -| sort | -| sort_by_alpha | -| spa | -| space_bar | -| speaker | -| speaker_group | -| speaker_notes | -| speaker_notes_off | -| speaker_phone | -| spellcheck | -| star | -| star_border | -| star_half | -| stars | -| stay_current_landscape | -| stay_current_portrait | -| stay_primary_landscape | -| stay_primary_portrait | -| stop | -| stop_screen_share | -| storage | -| store | -| store_mall_directory | -| straighten | -| streetview | -| strikethrough_s | -| style | -| subdirectory_arrow_left | -| subdirectory_arrow_right | -| subject | -| subscriptions | -| subtitles | -| subway | -| supervised_user_circle | -| supervisor_account | -| surround_sound | -| swap_calls | -| swap_horiz | -| swap_horizontal_circle | -| swap_vert | -| swap_vertical_circle | -| switch_camera | -| switch_video | -| sync | -| sync_disabled | -| sync_problem | -| system_update | -| system_update_alt | -| tab | -| tab_unselected | -| table_chart | -| tablet | -| tablet_android | -| tablet_mac | -| tag_faces | -| tap_and_play | -| terrain | -| text_fields | -| text_format | -| text_rotate_up | -| text_rotate_vertical | -| text_rotation_angledown | -| text_rotation_angleup | -| text_rotation_down | -| text_rotation_none | -| textsms | -| texture | -| theaters | -| threed_rotation | -| threesixty | -| thumb_down | -| thumb_up | -| thumbs_up_down | -| time_to_leave | -| timelapse | -| timeline | -| timer | -| timer_3 | -| timer_10 | -| timer_off | -| title | -| toc | -| today | -| toll | -| tonality | -| touch_app | -| toys | -| track_changes | -| traffic | -| train | -| tram | -| transfer_within_a_station | -| transform | -| transit_enterexit | -| translate | -| trending_down | -| trending_flat | -| trending_up | -| trip_origin | -| tune | -| turned_in | -| turned_in_not | -| tv | -| unarchive | -| undo | -| unfold_less | -| unfold_more | -| update | -| usb | -| verified_user | -| vertical_align_bottom | -| vertical_align_center | -| vertical_align_top | -| vibration | -| video_call | -| video_label | -| video_library | -| videocam | -| videocam_off | -| videogame_asset | -| view_agenda | -| view_array | -| view_carousel | -| view_column | -| view_comfy | -| view_compact | -| view_day | -| view_headline | -| view_list | -| view_module | -| view_quilt | -| view_stream | -| view_week | -| vignette | -| visibility | -| visibility_off | -| voice_chat | -| voicemail | -| volume_down | -| volume_mute | -| volume_off | -| volume_up | -| vpn_key | -| vpn_lock | -| wallpaper | -| warning | -| watch | -| watch_later | -| wb_auto | -| wb_cloudy | -| wb_incandescent | -| wb_iridescent | -| wb_sunny | -| wc | -| web | -| web_asset | -| weekend | -| whatshot | -| widgets | -| wifi | -| wifi_lock | -| wifi_tethering | -| work | -| wrap_text | -| youtube_searched_for | -| zoom_in | -| zoom_out | -| zoom_out_map | - -## **Font Awesome library** -[Find supported images here!](https://fontawesome.com/search) -```yaml -- Text: - text: Example 2 using FontAwesome -- Icon: - name: coffee - library: fontAwesome - styles: - color: red -``` - -| Icon Name | -|----------------------------------------| -| fiveHundredPx | -| accessibleIcon | -| accusoft | -| acquisitionsIncorporated | -| ad | -| addressBook | -| solidAddressBook | -| addressCard | -| solidAddressCard | -| adjust | -| adn | -| adversal | -| affiliatetheme | -| airFreshener | -| airbnb | -| algolia | -| alignCenter | -| alignJustify | -| alignLeft | -| alignRight | -| alipay | -| allergies | -| amazon | -| amazonPay | -| ambulance | -| americanSignLanguageInterpreting | -| amilia | -| anchor | -| android | -| angellist | -| angleDoubleDown | -| angleDoubleLeft | -| angleDoubleRight | -| angleDoubleUp | -| angleDown | -| angleLeft | -| angleRight | -| angleUp | -| angry | -| solidAngry | -| angrycreative | -| angular | -| ankh | -| appStore | -| appStoreIos | -| apper | -| apple | -| appleAlt | -| applePay | -| archive | -| archway | -| arrowAltCircleDown | -| solidArrowAltCircleDown | -| arrowAltCircleLeft | -| solidArrowAltCircleLeft | -| arrowAltCircleRight | -| solidArrowAltCircleRight | -| arrowAltCircleUp | -| solidArrowAltCircleUp | -| arrowCircleDown | -| arrowCircleLeft | -| arrowCircleRight | -| arrowCircleUp | -| arrowDown | -| arrowLeft | -| arrowRight | -| arrowUp | -| arrowsAlt | -| arrowsAltH | -| arrowsAltV | -| artstation | -| assistiveListeningSystems | -| asterisk | -| asymmetrik | -| at | -| atlas | -| atlassian | -| atom | -| audible | -| audioDescription | -| autoprefixer | -| avianex | -| aviato | -| award | -| aws | -| baby | -| babyCarriage | -| backspace | -| backward | -| bacon | -| balanceScale | -| balanceScaleLeft | -| balanceScaleRight | -| ban | -| bandAid | -| bandcamp | -| barcode | -| bars | -| baseballBall | -| basketballBall | -| bath | -| batteryEmpty | -| batteryFull | -| batteryHalf | -| batteryQuarter | -| batteryThreeQuarters | -| battleNet | -| bed | -| beer | -| behance | -| behanceSquare | -| bell | -| solidBell | -| bellSlash | -| solidBellSlash | -| bezierCurve | -| bible | -| bicycle | -| biking | -| bimobject | -| binoculars | -| biohazard | -| birthdayCake | -| bitbucket | -| bitcoin | -| bity | -| blackTie | -| blackberry | -| blender | -| blenderPhone | -| blind | -| blog | -| blogger | -| bloggerB | -| bluetooth | -| bluetoothB | -| bold | -| bolt | -| bomb | -| bone | -| bong | -| book | -| bookDead | -| bookMedical | -| bookOpen | -| bookReader | -| bookmark | -| solidBookmark | -| bootstrap | -| borderAll | -| borderNone | -| borderStyle | -| bowlingBall | -| box | -| boxOpen | -| boxes | -| braille | -| brain | -| breadSlice | -| briefcase | -| briefcaseMedical | -| broadcastTower | -| broom | -| brush | -| btc | -| buffer | -| bug | -| building | -| solidBuilding | -| bullhorn | -| bullseye | -| burn | -| buromobelexperte | -| bus | -| busAlt | -| businessTime | -| buysellads | -| calculator | -| calendar | -| solidCalendar | -| calendarAlt | -| solidCalendarAlt | -| calendarCheck | -| solidCalendarCheck | -| calendarDay | -| calendarMinus | -| solidCalendarMinus | -| calendarPlus | -| solidCalendarPlus | -| calendarTimes | -| solidCalendarTimes | -| calendarWeek | -| camera | -| cameraRetro | -| campground | -| canadianMapleLeaf | -| candyCane | -| cannabis | -| capsules | -| car | -| carAlt | -| carBattery | -| carCrash | -| carSide | -| caretDown | -| caretLeft | -| caretRight | -| caretSquareDown | -| solidCaretSquareDown | -| caretSquareLeft | -| solidCaretSquareLeft | -| caretSquareRight | -| solidCaretSquareRight | -| caretSquareUp | -| solidCaretSquareUp | -| caretUp | -| carrot | -| cartArrowDown | -| cartPlus | -| cashRegister | -| cat | -| ccAmazonPay | -| ccAmex | -| ccApplePay | -| ccDinersClub | -| ccDiscover | -| ccJcb | -| ccMastercard | -| ccPaypal | -| ccStripe | -| ccVisa | -| centercode | -| centos | -| certificate | -| chair | -| chalkboard | -| chalkboardTeacher | -| chargingStation | -| chartArea | -| chartBar | -| solidChartBar | -| chartLine | -| chartPie | -| check | -| checkCircle | -| solidCheckCircle | -| checkDouble | -| checkSquare | -| solidCheckSquare | -| cheese | -| chess | -| chessBishop | -| chessBoard | -| chessKing | -| chessKnight | -| chessPawn | -| chessQueen | -| chessRook | -| chevronCircleDown | -| chevronCircleLeft | -| chevronCircleRight | -| chevronCircleUp | -| chevronDown | -| chevronLeft | -| chevronRight | -| chevronUp | -| child | -| chrome | -| chromecast | -| church | -| circle | -| solidCircle | -| circleNotch | -| city | -| clinicMedical | -| clipboard | -| solidClipboard | -| clipboardCheck | -| clipboardList | -| clock | -| solidClock | -| clone | -| solidClone | -| closedCaptioning | -| solidClosedCaptioning | -| cloud | -| cloudDownloadAlt | -| cloudMeatball | -| cloudMoon | -| cloudMoonRain | -| cloudRain | -| cloudShowersHeavy | -| cloudSun | -| cloudSunRain | -| cloudUploadAlt | -| cloudscale | -| cloudsmith | -| cloudversify | -| cocktail | -| code | -| codeBranch | -| codepen | -| codiepie | -| coffee | -| cog | -| cogs | -| coins | -| columns | -| comment | -| solidComment | -| commentAlt | -| solidCommentAlt | -| commentDollar | -| commentDots | -| solidCommentDots | -| commentMedical | -| commentSlash | -| comments | -| solidComments | -| commentsDollar | -| compactDisc | -| compass | -| solidCompass | -| compress | -| compressArrowsAlt | -| conciergeBell | -| confluence | -| connectdevelop | -| contao | -| cookie | -| cookieBite | -| copy | -| solidCopy | -| copyright | -| solidCopyright | -| couch | -| cpanel | -| creativeCommons | -| creativeCommonsBy | -| creativeCommonsNc | -| creativeCommonsNcEu | -| creativeCommonsNcJp | -| creativeCommonsNd | -| creativeCommonsPd | -| creativeCommonsPdAlt | -| creativeCommonsRemix | -| creativeCommonsSa | -| creativeCommonsSampling | -| creativeCommonsSamplingPlus | -| creativeCommonsShare | -| creativeCommonsZero | -| creditCard | -| solidCreditCard | -| criticalRole | -| crop | -| cropAlt | -| cross | -| crosshairs | -| crow | -| crown | -| crutch | -| css3 | -| css3Alt | -| cube | -| cubes | -| cut | -| cuttlefish | -| dAndD | -| dAndDBeyond | -| dashcube | -| database | -| deaf | -| delicious | -| democrat | -| deploydog | -| deskpro | -| desktop | -| dev | -| deviantart | -| dharmachakra | -| dhl | -| diagnoses | -| diaspora | -| dice | -| diceD20 | -| diceD6 | -| diceFive | -| diceFour | -| diceOne | -| diceSix | -| diceThree | -| diceTwo | -| digg | -| digitalOcean | -| digitalTachograph | -| directions | -| discord | -| discourse | -| divide | -| dizzy | -| solidDizzy | -| dna | -| dochub | -| docker | -| dog | -| dollarSign | -| dolly | -| dollyFlatbed | -| donate | -| doorClosed | -| doorOpen | -| dotCircle | -| solidDotCircle | -| dove | -| download | -| draft2digital | -| draftingCompass | -| dragon | -| drawPolygon | -| dribbble | -| dribbbleSquare | -| dropbox | -| drum | -| drumSteelpan | -| drumstickBite | -| drupal | -| dumbbell | -| dumpster | -| dumpsterFire | -| dungeon | -| dyalog | -| earlybirds | -| ebay | -| edge | -| edit | -| solidEdit | -| egg | -| eject | -| elementor | -| ellipsisH | -| ellipsisV | -| ello | -| ember | -| empire | -| envelope | -| solidEnvelope | -| envelopeOpen | -| solidEnvelopeOpen | -| envelopeOpenText | -| envelopeSquare | -| envira | -| equals | -| eraser | -| erlang | -| ethereum | -| ethernet | -| etsy | -| euroSign | -| evernote | -| exchangeAlt | -| exclamation | -| exclamationCircle | -| exclamationTriangle | -| expand | -| expandArrowsAlt | -| expeditedssl | -| externalLinkAlt | -| externalLinkSquareAlt | -| eye | -| solidEye | -| eyeDropper | -| eyeSlash | -| solidEyeSlash | -| facebook | -| facebookF | -| facebookMessenger | -| facebookSquare | -| fan | -| fantasyFlightGames | -| fastBackward | -| fastForward | -| fax | -| feather | -| featherAlt | -| fedex | -| fedora | -| female | -| fighterJet | -| figma | -| file | -| solidFile | -| fileAlt | -| solidFileAlt | -| fileArchive | -| solidFileArchive | -| fileAudio | -| solidFileAudio | -| fileCode | -| solidFileCode | -| fileContract | -| fileCsv | -| fileDownload | -| fileExcel | -| solidFileExcel | -| fileExport | -| fileImage | -| solidFileImage | -| fileImport | -| fileInvoice | -| fileInvoiceDollar | -| fileMedical | -| fileMedicalAlt | -| filePdf | -| solidFilePdf | -| filePowerpoint | -| solidFilePowerpoint | -| filePrescription | -| fileSignature | -| fileUpload | -| fileVideo | -| solidFileVideo | -| fileWord | -| solidFileWord | -| fill | -| fillDrip | -| film | -| filter | -| fingerprint | -| fire | -| fireAlt | -| fireExtinguisher | -| firefox | -| firstAid | -| firstOrder | -| firstOrderAlt | -| firstdraft | -| fish | -| fistRaised | -| flag | -| solidFlag | -| flagCheckered | -| flagUsa | -| flask | -| flickr | -| flipboard | -| flushed | -| solidFlushed | -| fly | -| folder | -| solidFolder | -| folderMinus | -| folderOpen | -| solidFolderOpen | -| folderPlus | -| font | -| fontAwesome | -| fontAwesomeAlt | -| fontAwesomeFlag | -| fonticons | -| fonticonsFi | -| footballBall | -| fortAwesome | -| fortAwesomeAlt | -| forumbee | -| forward | -| foursquare | -| freeCodeCamp | -| freebsd | -| frog | -| frown | -| solidFrown | -| frownOpen | -| solidFrownOpen | -| fulcrum | -| funnelDollar | -| futbol | -| solidFutbol | -| galacticRepublic | -| galacticSenate | -| gamepad | -| gasPump | -| gavel | -| gem | -| solidGem | -| genderless | -| getPocket | -| gg | -| ggCircle | -| ghost | -| gift | -| gifts | -| git | -| gitAlt | -| gitSquare | -| github | -| githubAlt | -| githubSquare | -| gitkraken | -| gitlab | -| gitter | -| glassCheers | -| glassMartini | -| glassMartiniAlt | -| glassWhiskey | -| glasses | -| glide | -| glideG | -| globe | -| globeAfrica | -| globeAmericas | -| globeAsia | -| globeEurope | -| gofore | -| golfBall | -| goodreads | -| goodreadsG | -| google | -| googleDrive | -| googlePlay | -| googlePlus | -| googlePlusG | -| googlePlusSquare | -| googleWallet | -| gopuram | -| graduationCap | -| gratipay | -| grav | -| greaterThan | -| greaterThanEqual | -| grimace | -| solidGrimace | -| grin | -| solidGrin | -| grinAlt | -| solidGrinAlt | -| grinBeam | -| solidGrinBeam | -| grinBeamSweat | -| solidGrinBeamSweat | -| grinHearts | -| solidGrinHearts | -| grinSquint | -| solidGrinSquint | -| grinSquintTears | -| solidGrinSquintTears | -| grinStars | -| solidGrinStars | -| grinTears | -| solidGrinTears | -| grinTongue | -| solidGrinTongue | -| grinTongueSquint | -| solidGrinTongueSquint | -| grinTongueWink | -| solidGrinTongueWink | -| grinWink | -| solidGrinWink | -| gripHorizontal | -| gripLines | -| gripLinesVertical | -| gripVertical | -| gripfire | -| grunt | -| guitar | -| gulp | -| hSquare | -| hackerNews | -| hackerNewsSquare | -| hackerrank | -| hamburger | -| hammer | -| hamsa | -| handHolding | -| handHoldingHeart | -| handHoldingUsd | -| handLizard | -| solidHandLizard | -| handMiddleFinger | -| handPaper | -| solidHandPaper | -| handPeace | -| solidHandPeace | -| handPointDown | -| solidHandPointDown | -| handPointLeft | -| solidHandPointLeft | -| handPointRight | -| solidHandPointRight | -| handPointUp | -| solidHandPointUp | -| handPointer | -| solidHandPointer | -| handRock | -| solidHandRock | -| handScissors | -| solidHandScissors | -| handSpock | -| solidHandSpock | -| hands | -| handsHelping | -| handshake | -| solidHandshake | -| hanukiah | -| hardHat | -| hashtag | -| hatWizard | -| hdd | -| solidHdd | -| heading | -| headphones | -| headphonesAlt | -| headset | -| heart | -| solidHeart | -| heartBroken | -| heartbeat | -| helicopter | -| highlighter | -| hiking | -| hippo | -| hips | -| hireAHelper | -| history | -| hockeyPuck | -| hollyBerry | -| home | -| hooli | -| hornbill | -| horse | -| horseHead | -| hospital | -| solidHospital | -| hospitalAlt | -| hospitalSymbol | -| hotTub | -| hotdog | -| hotel | -| hotjar | -| hourglass | -| solidHourglass | -| hourglassEnd | -| hourglassHalf | -| hourglassStart | -| houseDamage | -| houzz | -| hryvnia | -| html5 | -| hubspot | -| iCursor | -| iceCream | -| icicles | -| icons | -| idBadge | -| solidIdBadge | -| idCard | -| solidIdCard | -| idCardAlt | -| igloo | -| image | -| solidImage | -| images | -| solidImages | -| imdb | -| inbox | -| indent | -| industry | -| infinity | -| info | -| infoCircle | -| instagram | -| intercom | -| internetExplorer | -| invision | -| ioxhost | -| italic | -| itchIo | -| itunes | -| itunesNote | -| java | -| jedi | -| jediOrder | -| jenkins | -| jira | -| joget | -| joint | -| joomla | -| journalWhills | -| js | -| jsSquare | -| jsfiddle | -| kaaba | -| kaggle | -| key | -| keybase | -| keyboard | -| solidKeyboard | -| keycdn | -| khanda | -| kickstarter | -| kickstarterK | -| kiss | -| solidKiss | -| kissBeam | -| solidKissBeam | -| kissWinkHeart | -| solidKissWinkHeart | -| kiwiBird | -| korvue | -| landmark | -| language | -| laptop | -| laptopCode | -| laptopMedical | -| laravel | -| lastfm | -| lastfmSquare | -| laugh | -| solidLaugh | -| laughBeam | -| solidLaughBeam | -| laughSquint | -| solidLaughSquint | -| laughWink | -| solidLaughWink | -| layerGroup | -| leaf | -| leanpub | -| lemon | -| solidLemon | -| less | -| lessThan | -| lessThanEqual | -| levelDownAlt | -| levelUpAlt | -| lifeRing | -| solidLifeRing | -| lightbulb | -| solidLightbulb | -| line | -| link | -| linkedin | -| linkedinIn | -| linode | -| linux | -| liraSign | -| list | -| listAlt | -| solidListAlt | -| listOl | -| listUl | -| locationArrow | -| lock | -| lockOpen | -| longArrowAltDown | -| longArrowAltLeft | -| longArrowAltRight | -| longArrowAltUp | -| lowVision | -| luggageCart | -| lyft | -| magento | -| magic | -| magnet | -| mailBulk | -| mailchimp | -| male | -| mandalorian | -| map | -| solidMap | -| mapMarked | -| mapMarkedAlt | -| mapMarker | -| mapMarkerAlt | -| mapPin | -| mapSigns | -| markdown | -| marker | -| mars | -| marsDouble | -| marsStroke | -| marsStrokeH | -| marsStrokeV | -| mask | -| mastodon | -| maxcdn | -| medal | -| medapps | -| medium | -| mediumM | -| medkit | -| medrt | -| meetup | -| megaport | -| meh | -| solidMeh | -| mehBlank | -| solidMehBlank | -| mehRollingEyes | -| solidMehRollingEyes | -| memory | -| mendeley | -| menorah | -| mercury | -| meteor | -| microchip | -| microphone | -| microphoneAlt | -| microphoneAltSlash | -| microphoneSlash | -| microscope | -| microsoft | -| minus | -| minusCircle | -| minusSquare | -| solidMinusSquare | -| mitten | -| mix | -| mixcloud | -| mizuni | -| mobile | -| mobileAlt | -| modx | -| monero | -| moneyBill | -| moneyBillAlt | -| solidMoneyBillAlt | -| moneyBillWave | -| moneyBillWaveAlt | -| moneyCheck | -| moneyCheckAlt | -| monument | -| moon | -| solidMoon | -| mortarPestle | -| mosque | -| motorcycle | -| mountain | -| mousePointer | -| mugHot | -| music | -| napster | -| neos | -| networkWired | -| neuter | -| newspaper | -| solidNewspaper | -| nimblr | -| node | -| nodeJs | -| notEqual | -| notesMedical | -| npm | -| ns8 | -| nutritionix | -| objectGroup | -| solidObjectGroup | -| objectUngroup | -| solidObjectUngroup | -| odnoklassniki | -| odnoklassnikiSquare | -| oilCan | -| oldRepublic | -| om | -| opencart | -| openid | -| opera | -| optinMonster | -| osi | -| otter | -| outdent | -| page4 | -| pagelines | -| pager | -| paintBrush | -| paintRoller | -| palette | -| palfed | -| pallet | -| paperPlane | -| solidPaperPlane | -| paperclip | -| parachuteBox | -| paragraph | -| parking | -| passport | -| pastafarianism | -| paste | -| patreon | -| pause | -| pauseCircle | -| solidPauseCircle | -| paw | -| paypal | -| peace | -| pen | -| penAlt | -| penFancy | -| penNib | -| penSquare | -| pencilAlt | -| pencilRuler | -| pennyArcade | -| peopleCarry | -| pepperHot | -| percent | -| percentage | -| periscope | -| personBooth | -| phabricator | -| phoenixFramework | -| phoenixSquadron | -| phone | -| phoneAlt | -| phoneSlash | -| phoneSquare | -| phoneSquareAlt | -| phoneVolume | -| photoVideo | -| php | -| piedPiper | -| piedPiperAlt | -| piedPiperHat | -| piedPiperPp | -| piggyBank | -| pills | -| pinterest | -| pinterestP | -| pinterestSquare | -| pizzaSlice | -| placeOfWorship | -| plane | -| planeArrival | -| planeDeparture | -| play | -| playCircle | -| solidPlayCircle | -| playstation | -| plug | -| plus | -| plusCircle | -| plusSquare | -| solidPlusSquare | -| podcast | -| poll | -| pollH | -| poo | -| pooStorm | -| poop | -| portrait | -| poundSign | -| powerOff | -| pray | -| prayingHands | -| prescription | -| prescriptionBottle | -| prescriptionBottleAlt | -| print | -| procedures | -| productHunt | -| projectDiagram | -| pushed | -| puzzlePiece | -| python | -| qq | -| qrcode | -| question | -| questionCircle | -| solidQuestionCircle | -| quidditch | -| quinscape | -| quora | -| quoteLeft | -| quoteRight | -| quran | -| rProject | -| radiation | -| radiationAlt | -| rainbow | -| random | -| raspberryPi | -| ravelry | -| react | -| reacteurope | -| readme | -| rebel | -| receipt | -| recycle | -| redRiver | -| reddit | -| redditAlien | -| redditSquare | -| redhat | -| redo | -| redoAlt | -| registered | -| solidRegistered | -| removeFormat | -| renren | -| reply | -| replyAll | -| replyd | -| republican | -| researchgate | -| resolving | -| restroom | -| retweet | -| rev | -| ribbon | -| ring | -| road | -| robot | -| rocket | -| rocketchat | -| rockrms | -| route | -| rss | -| rssSquare | -| rubleSign | -| ruler | -| rulerCombined | -| rulerHorizontal | -| rulerVertical | -| running | -| rupeeSign | -| sadCry | -| solidSadCry | -| sadTear | -| solidSadTear | -| safari | -| salesforce | -| sass | -| satellite | -| satelliteDish | -| save | -| solidSave | -| schlix | -| school | -| screwdriver | -| scribd | -| scroll | -| sdCard | -| search | -| searchDollar | -| searchLocation | -| searchMinus | -| searchPlus | -| searchengin | -| seedling | -| sellcast | -| sellsy | -| server | -| servicestack | -| shapes | -| share | -| shareAlt | -| shareAltSquare | -| shareSquare | -| solidShareSquare | -| shekelSign | -| shieldAlt | -| ship | -| shippingFast | -| shirtsinbulk | -| shoePrints | -| shoppingBag | -| shoppingBasket | -| shoppingCart | -| shopware | -| shower | -| shuttleVan | -| sign | -| signInAlt | -| signLanguage | -| signOutAlt | -| signal | -| signature | -| simCard | -| simplybuilt | -| sistrix | -| sitemap | -| sith | -| skating | -| sketch | -| skiing | -| skiingNordic | -| skull | -| skullCrossbones | -| skyatlas | -| skype | -| slack | -| slackHash | -| slash | -| sleigh | -| slidersH | -| slideshare | -| smile | -| solidSmile | -| smileBeam | -| solidSmileBeam | -| smileWink | -| solidSmileWink | -| smog | -| smoking | -| smokingBan | -| sms | -| snapchat | -| snapchatGhost | -| snapchatSquare | -| snowboarding | -| snowflake | -| solidSnowflake | -| snowman | -| snowplow | -| socks | -| solarPanel | -| sort | -| sortAlphaDown | -| sortAlphaDownAlt | -| sortAlphaUp | -| sortAlphaUpAlt | -| sortAmountDown | -| sortAmountDownAlt | -| sortAmountUp | -| sortAmountUpAlt | -| sortDown | -| sortNumericDown | -| sortNumericDownAlt | -| sortNumericUp | -| sortNumericUpAlt | -| sortUp | -| soundcloud | -| sourcetree | -| spa | -| spaceShuttle | -| speakap | -| speakerDeck | -| spellCheck | -| spider | -| spinner | -| splotch | -| spotify | -| sprayCan | -| square | -| solidSquare | -| squareFull | -| squareRootAlt | -| squarespace | -| stackExchange | -| stackOverflow | -| stackpath | -| stamp | -| star | -| solidStar | -| starAndCrescent | -| starHalf | -| solidStarHalf | -| starHalfAlt | -| starOfDavid | -| starOfLife | -| staylinked | -| steam | -| steamSquare | -| steamSymbol | -| stepBackward | -| stepForward | -| stethoscope | -| stickerMule | -| stickyNote | -| solidStickyNote | -| stop | -| stopCircle | -| solidStopCircle | -| stopwatch | -| store | -| storeAlt | -| strava | -| stream | -| streetView | -| strikethrough | -| stripe | -| stripeS | -| stroopwafel | -| studiovinari | -| stumbleupon | -| stumbleuponCircle | -| subscript | -| subway | -| suitcase | -| suitcaseRolling | -| sun | -| solidSun | -| superpowers | -| superscript | -| supple | -| surprise | -| solidSurprise | -| suse | -| swatchbook | -| swimmer | -| swimmingPool | -| symfony | -| synagogue | -| sync | -| syncAlt | -| syringe | -| table | -| tableTennis | -| tablet | -| tabletAlt | -| tablets | -| tachometerAlt | -| tag | -| tags | -| tape | -| tasks | -| taxi | -| teamspeak | -| teeth | -| teethOpen | -| telegram | -| telegramPlane | -| temperatureHigh | -| temperatureLow | -| tencentWeibo | -| tenge | -| terminal | -| textHeight | -| textWidth | -| th | -| thLarge | -| thList | -| theRedYeti | -| theaterMasks | -| themeco | -| themeisle | -| thermometer | -| thermometerEmpty | -| thermometerFull | -| thermometerHalf | -| thermometerQuarter | -| thermometerThreeQuarters| -| thinkPeaks | -| thumbsDown | -| solidThumbsDown | -| thumbsUp | -| solidThumbsUp | -| thumbtack | -| ticketAlt | -| times | -| timesCircle | -| solidTimesCircle | -| tint | -| tintSlash | -| tired | -| solidTired | -| toggleOff | -| toggleOn | -| toilet | -| toiletPaper | -| toolbox | -| tools | -| tooth | -| torah | -| toriiGate | -| tractor | -| tradeFederation | -| trademark | -| trafficLight | -| train | -| tram | -| transgender | -| transgenderAlt | -| trash | -| trashAlt | -| solidTrashAlt | -| trashRestore | -| trashRestoreAlt | -| tree | -| trello | -| trophy | -| truck | -| truckLoading | -| truckMonster | -| truckMoving | -| truckPickup | -| tshirt | -| tty | -| tumblr | -| tumblrSquare | -| tv | -| twitch | -| twitter | -| twitterSquare | -| typo3 | -| uber | -| ubuntu | -| uikit | -| umbrella | -| umbrellaBeach | -| underline | -| undo | -| undoAlt | -| uniregistry | -| universalAccess | -| university | -| unlink | -| unlock | -| unlockAlt | -| untappd | -| upload | -| ups | -| usb | -| user | -| solidUser | -| userAlt | -| userAltSlash | -| userAstronaut | -| userCheck | -| userCircle | -| solidUserCircle | -| userClock | -| userCog | -| userEdit | -| userFriends | -| userGraduate | -| userInjured | -| userLock | -| userMd | -| userMinus | -| userNinja | -| userNurse | -| userPlus | -| userSecret | -| userShield | -| userSlash | -| userTag | -| userTie | -| userTimes | -| users | -| usersCog | -| usps | -| ussunnah | -| utensilSpoon | -| utensils | -| vaadin | -| vectorSquare | -| venus | -| venusDouble | -| venusMars | -| viacoin | -| viadeo | -| viadeoSquare | -| vial | -| vials | -| viber | -| video | -| videoSlash | -| vihara | -| vimeo | -| vimeoSquare | -| vimeoV | -| vine | -| vk | -| vnv | -| voicemail | -| volleyballBall | -| volumeDown | -| volumeMute | -| volumeOff | -| volumeUp | -| voteYea | -| vrCardboard | -| vuejs | -| walking | -| wallet | -| warehouse | -| water | -| waveSquare | -| waze | -| weebly | -| weibo | -| weight | -| weightHanging | -| weixin | -| whatsapp | -| whatsappSquare | -| wheelchair | -| whmcs | -| wifi | -| wikipediaW | -| wind | -| windowClose | -| solidWindowClose | -| windowMaximize | -| solidWindowMaximize | -| windowMinimize | -| solidWindowMinimize | -| windowRestore | -| solidWindowRestore | -| windows | -| wineBottle | -| wineGlass | -| wineGlassAlt | -| wix | -| wizardsOfTheCoast | -| wolfPackBattalion | -| wonSign | -| wordpress | -| wordpressSimple | -| wpbeginner | -| wpexplorer | -| wpforms | -| wpressr | -| wrench | -| xRay | -| xbox | -| xing | -| xingSquare | -| yCombinator | -| yahoo | -| yammer | -| yandex | -| yandexInternational | -| yarn | -| yelp | -| yenSign | -| yinYang | -| yoast | -| youtube | -| youtubeSquare | -| zhihu | diff --git a/widget-reference/image.png b/widget-reference/image.png deleted file mode 100644 index 092fbdf..0000000 Binary files a/widget-reference/image.png and /dev/null differ diff --git a/widget-reference/listview.md b/widget-reference/listview.md deleted file mode 100644 index 8f0f14d..0000000 --- a/widget-reference/listview.md +++ /dev/null @@ -1,64 +0,0 @@ -# ListView - -The ListView Widget enables the rendering of lists with dynamic and scrollable content, facilitating efficient display and navigation of large datasets within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/w0Wmu9ZMP4csk7IELSx3) - -## Properties - -| Property | Type | Description | -| :---------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| item-template | object | [See properties](#item-template) | -| children | array | List of widgets | -| onItemTap | action | Dispatch when an ListView item is selected/tapped.The event dispatches only when you tap on the item. The index of the item can be retrieved using 'selectedItemIndex'. You can access as this.selectedItemIndex. See example linked above| -| onItemTapHaptic | enum | The type of haptic to perform when item is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | -| selectedItemIndex | integer | Selecting a ListView item gives the index of selected item | -| onSwipeToRefresh | action | Enable swipe to refresh. This will trigger onRefresh action if enabled | -| styles | object | [See properties](#styles) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| showSeparator | boolean | Show a separator between the items (default is true). | -| separatorColor | integer or string | Set the color for the separator between items, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| separatorWidth | integer | The thickness of the separator between items | -| separatorPadding | string or integer | Padding with CSS-style value e.g. padding: 5 20 5 Default 0 0 0 | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | diff --git a/widget-reference/lottie.md b/widget-reference/lottie.md deleted file mode 100644 index 1eb3758..0000000 --- a/widget-reference/lottie.md +++ /dev/null @@ -1,83 +0,0 @@ -# Lottie Animation widget - -The Lottie Render Widget allows you to effortlessly render Lottie animation files, bringing life and motion to your application with smooth and captivating visual effects. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/576f3004-83e6-429d-b256-628d85e05f7f) - -### NOTE -__NOTE:__ *onTap* property works only for native apps (iOS and Android) and web apps. onTap will not work when the web app is compiled with the [HTML renderer](https://docs.flutter.dev/platform-integration/web/renderers) option (i.e. --web-renderer html). Ensemble Studio is compiled with HTML renderer option so the onTap will not work on the studio. However, it should work fine for Ensemble Go (iOS) and Ensemble Preview (Android). - -## Properties - -| Property | Type | Description | -| :------- | :----- | :---------------------------------------- | -| source | string | URL or asset name of the Lottie json file | -| styles | object | [See properties](#styles) | -| onForward | action | Callback which is fired when the animation starts playing in the forward direction | -| onReverse | action | Callback which is fired when the animation starts playing in the reverse direction | -| onComplete | action | Callback which is fired when the animation is completed | -| [onTap](#note) | action | Run a block of code or execute a given action when there is a tap event on lottie widget | -| onStop | action | Callback which is fired when the animation is stopped. This is fired only when animation is stopped or aborted in between. | -| autoPlay | boolean | Whether to automatically start the animation in the forward direction (default true) | -| repeat | boolean | Whether we should repeat the animation (default true) | -| onTapHaptic | enum | The type of haptic to perform when lottie is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| fit | string | How to fit the Lottie animation within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/markdown.md b/widget-reference/markdown.md deleted file mode 100644 index 68d8a64..0000000 --- a/widget-reference/markdown.md +++ /dev/null @@ -1,39 +0,0 @@ -# Markdown widget - -The Markdown Render Widget empowers you to effortlessly render Markdown text, transforming it into beautifully formatted and structured content for your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/6b6d9c3d-359b-4768-99a5-3f087a64387c) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :--------------------------- | -| text | string | Your text in markdown format | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| textStyle | string | An opaque object that determines the size, color, and decoration of text. Styling for regular text. Default to theme's bodyMedium styling. [See properties](#styleslinkstyle) | -| linkStyle | object | Styling for the url. [See properties](#styleslinkstyle) | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | - -#### styles.linkStyle - -| Property | Type | Description | -| :--------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| fontSize | integer | Sets the size of the text. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| decoration | string | A linear decoration to draw near the text`none`,`lineThrough`,`underlines`,`overline` | diff --git a/widget-reference/passwordinput.md b/widget-reference/passwordinput.md deleted file mode 100644 index 6bece42..0000000 --- a/widget-reference/passwordinput.md +++ /dev/null @@ -1,79 +0,0 @@ -# PasswordInput widget - -The PasswordInput Widget enables the rendering of secure password input fields, ensuring that user-entered passwords remain hidden and protected within your application for enhanced security and privacy. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/218fa244-f0cd-4d17-91e6-7c099bbedede) - -## Properties - -| Property | Type | Description | -| :-------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700) | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| hintText | string | Hint text explaining your widget | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| onChange | | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| onFocusReceived | action | Execute an Ensemble action when the field receives focus | -| onFocusLost | action | Execute an Ensemble action when the field loses focus | -| styles | object | [See properties](#styles) | -| validator | object | [See properties](#validator) | -| onKeyPress | action | On every keystroke, call Ensemble's built-in functions or execute code | -| keyboardAction | string | Specify the action key on native device's soft keyboard | -| obscureToggle | boolean | enable the toggling between plain and obscure text. | - -### icon - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| contentPadding | integer or string | Padding around your input content with CSS-style notation e.g. margin: 5 20 5 | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderRadius | integer | The border radius for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| borderWidth | integer | The border width for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| fontSize | integer | Sets the size of the text. | - -### validator - -| Property | Type | Description | -| :--------- | :------ | :------------------------------------------------------------------------------------- | -| minLength | integer | The minimum number of characters | -| maxLength | integer | The maximum number of characters | -| regex | string | The Regular Expression the input will need to match | -| regexError | string | The customized error message to show when the input does not match the provided regex. | - -#### options for styles.variant - -| Option | Description | -| :-------- | :------------------------------------------------------------------------------------------------------------------- | -| box | draw a Box border around this input widget. This property can be defined in the theme to apply to all Input widgets. | -| underline | draw an Underline below this input widget. This property can be defined in the theme to apply to all Input widgets. | diff --git a/widget-reference/profile-image.md b/widget-reference/profile-image.md deleted file mode 100644 index cd1786b..0000000 --- a/widget-reference/profile-image.md +++ /dev/null @@ -1,28 +0,0 @@ -# Profile Image Widget - -The `ProfileImageWithIndicator` widget in Ensemble offers a convenient way to showcase user profile images along with customizable indicator labels. - -**Input Parameters** -Required: -1. `image`: URL of profile image to be displayed - -Optional: -1. `label`: Content within floating label -2. `labelPosition`: Position of the label, default is topRight. Possible values are topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight -3. `imageSize`: Image size, default is 90 -4. `labelColor`: Color used for the label, default is white -5. `labelBackgroundColor`: Color used for the label background, default is blue - -By using these Input Parameters, you can effortlessly create various profile images tailored to your app's design. Below is an example of how to use the public widget `ensemble.ProfileImageWithIndicator`: -```yaml -- ensemble.ProfileImageWithIndicator: - inputs: - label: 4 - image: https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 - imageSize: 160 - labelSize: 40 - labelPosition: bottomRight - labelColor: blue - labelBackgroundColor: 0xFFDEDEDE -``` -Since this widget is globally available, you only need to specify the image input. The example above also showcases optional input parameters for further customization. Simply use `ensemble.ProfileImageWithIndicator` in your app to streamline the integration of profile images with indicator labels. \ No newline at end of file diff --git a/widget-reference/progressindicator.md b/widget-reference/progressindicator.md deleted file mode 100644 index 856deb2..0000000 --- a/widget-reference/progressindicator.md +++ /dev/null @@ -1,24 +0,0 @@ -# Progress Indicator - -The Progress Indicator Widget facilitates the rendering of visual progress indicators, providing users with visual feedback on the progress of tasks or operations within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c2c248f2-a289-40d3-acd5-65a1a7f3c5a2) - -## Properties - -| Property | Type | Description | -| :------------------ | :------ | :------------------------------------------------------------------------- | -| display | string | | -| countdown | integer | Show the progress percentage based on the number of seconds specified here | -| onCountdownComplete | | Execute this Action when the countdown comes to 0 | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :-------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| backgroundColor | | Background color, starting with '0xFF' for full opacity e.g 0xFFCCCCCC | -| size | integer | Specifies the width (progress bar) or the diameter (circular progress indicator) | -| thickness | integer | Specifies the thickness of the indicator (for progress bar this is the height) | -| color | | | diff --git a/widget-reference/qrcode.md b/widget-reference/qrcode.md deleted file mode 100644 index 1403528..0000000 --- a/widget-reference/qrcode.md +++ /dev/null @@ -1,75 +0,0 @@ -# QR-Code widget - -The QR-Code Render Widget empowers you to effortlessly generate and render QR codes within your application, enabling convenient scanning and information exchange for users. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/f4921ba2-9f3d-4c33-8848-4df29a5e7a4d) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------------- | -| value | string | The data to generate the QR code | -| dataModuleShape | enum | Used to define the shape of the data module of QR Code. It can be either square or circle. Defaults to square | -| eyeShape | enum | Used to define the shape of the eye of QR Code. It can be either square or circle. Defaults to square | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| size | integer | Specify the width/height of the QR Code. Default: 160 | -| color | integer or string | Set the color for the QR code drawing, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/rating-widget.md b/widget-reference/rating-widget.md deleted file mode 100644 index 5c44360..0000000 --- a/widget-reference/rating-widget.md +++ /dev/null @@ -1,23 +0,0 @@ -# Rating Stars widget - -The `RatingStars` widget in Ensemble provides an intuitive solution for displaying star ratings with customizable attributes. - -**Input Parameters** -Required: -1. `rating`: An integer or double between 1 and 5, indicating the number of stars to be filled - -Optional: -1. `starColor`: The color used to fill the stars -2. `starBackgroundColor`: The color used as the background of the box containing each star -3. `size`: An integer to set the size of each star, default is 16 - -By utilizing these Input Parameters, you can customize the appearance of the rating stars by adjusting these parameters tailored to your app's design. Below is an example of how to use the public widget `RatingStars`: -```yaml -- RatingStars: - inputs: - rating: 3 - size: 24 - starColor: white - starBackgroundColor: red -``` -Since this widget is globally available, you only need to specify the rating input. The example above also showcases optional input parameters for further customization. Incorporate the `RatingStars` widget in your app to enhance the visual representation of rating stars. \ No newline at end of file diff --git a/widget-reference/row.md b/widget-reference/row.md deleted file mode 100644 index c51ebdc..0000000 --- a/widget-reference/row.md +++ /dev/null @@ -1,89 +0,0 @@ -# Row - -The Row Widget enables effortless horizontal layout of children elements, facilitating clean and compact designs that seamlessly align content within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/4bd0d453-c243-429d-a562-93cbc9db38e3) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :------------------------------- | -| item-template | object | [See properties](#item-template) | -| children | array | List of widgets | -| styles | object | [See properties](#styles) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| mainAxis | string | Control our children's layout horizontally.`start` `center` `end` `spaceBetween` `spaceAround` `spaceEvenly` | -| fontSize | integer | Sets the size of the text. | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| gap | integer | The gap between the children in the main direction | -| crossAxis | string | Control the vertical alignment of the children.`start` `center` `end` `stretch` `baseline` | -| mainAxisSize | string | If 'max', stretch the Row to fill its parent's width. Otherwise (min) the Row's width will be its children's combined. | -| scrollable | boolean | Set to true so content can scroll horizontally as needed | -| autoFit | boolean | Explicitly make the row's height as tall as the largest child, but only if the row's parent does not already assign us a height. This attribute is useful for sizing children who don't have a width (e.g vertical Divider) | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/shape.md b/widget-reference/shape.md deleted file mode 100644 index 34e9655..0000000 --- a/widget-reference/shape.md +++ /dev/null @@ -1,18 +0,0 @@ -# Shape Widget - -ECreate and customize a variety of shapes to add flair to your UI. Use this widget in combination with [LoadingContainer](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3wNZSfVkdi56zmTtFeBT) to create compelling loading states. - -### Properties - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------- | -| type | string | Type of the shape, `circle` `rectangle` `oval` `square` | - -### Styles - -| Property | Type | Description | -| :-------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| borderRadius | string or integer | The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | diff --git a/widget-reference/social-login.md b/widget-reference/social-login.md deleted file mode 100644 index c650f55..0000000 --- a/widget-reference/social-login.md +++ /dev/null @@ -1,19 +0,0 @@ -# Social Login Button Widget - -The SocialLoginButton widget in Ensemble provides a seamless integration for adding social login functionality to your app with customizable options. - -**Input Parameters** -Required: -1. `provider`: Provider name which can be of: google, facebook, apple, microsoft - -Optional: -1. `label`: The text used inside the button - -By leveraging these input parameters, you can tailor the appearance of the social login button to seamlessly align with your app's design. Below is an example demonstrating the usage of the public widget `ensemble.SocialLoginButton`: -```yaml -- ensemble.SocialLoginButton: - inputs: - provider: microsoft - label: Sign in with Microsoft -``` -Since this widget is globally available, you only need to specify the provider input. The example above also showcases optional input parameters for further customization. Integrate the `ensemble.SocialLoginButton` widget into your app effortlessly for the social login functionality. \ No newline at end of file diff --git a/widget-reference/spacer.md b/widget-reference/spacer.md deleted file mode 100644 index 29ac368..0000000 --- a/widget-reference/spacer.md +++ /dev/null @@ -1,17 +0,0 @@ -# Spacer - -The Spacer Widget enables the creation of adjustable spacing between elements, offering precise control over the layout and alignment of content within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/1d7e42a9-5bbc-4b4b-9a02-8c102234ee05) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------ | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :------- | :------ | :----------------------------------------------------------------------------------------------------------- | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | diff --git a/widget-reference/stack.md b/widget-reference/stack.md deleted file mode 100644 index d77af76..0000000 --- a/widget-reference/stack.md +++ /dev/null @@ -1,18 +0,0 @@ -# Stack - -The Stack Widget allows you to visually stack items on top of each other, providing a flexible and layered approach to layout and design within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/572ecf3b-b9f2-46f4-960f-ff438e5fa1dc) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------ | -| children | array | List of widgets | -| styles | object | [See properties](#styles) | - -### styles - -| Property | Type | Description | -| :------------ | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| alignChildren | string | How to align the children within the stack such that their alignment points will be the same (default is topStart). Each child can override this with alignment property. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | diff --git a/widget-reference/staggeredgrid.md b/widget-reference/staggeredgrid.md deleted file mode 100644 index 8558a09..0000000 --- a/widget-reference/staggeredgrid.md +++ /dev/null @@ -1,43 +0,0 @@ -# Staggered Grid - -StaggeredGrid is a versatile widget that arranges its children in a staggered layout, allowing flexible and dynamic positioning for unique and visually appealing UI designs. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/a9iIs4wvgqDOhU4rN6GR?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) - -## Properties - -| Property | Type | Description | -| :------------ | :----- | :-------------------------------------------------------------------------------------- | -| onItemTap | action | Call Ensemble's built-in functions or execute code when tapping on an item in the list. | -| onItemTapHaptic | enum | The type of haptic to perform when a item is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | -| children | array | List of widgets | -| styles | object | [See properties](#styles) | -| item-template | object | [See properties](#item-template) | - -### item-template - -| Property | Type | Description | -| :------- | :----- | :----------------------------------------------------------------- | -| data | string | Bind to an array of data from an API response or a variable | -| name | string | Set the name to reference as you iterate through the array of data | -| template | widget | The widget to render for each item | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| crossAxisCount | integer | Creates a list of staggered grid tile in the cross axis | -| verticalGap | integer | Vertical gap between the staggered grid tiles | -| horizontalGap | integer | Horizontal gap between the staggered grid tiles | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | diff --git a/widget-reference/switch.md b/widget-reference/switch.md deleted file mode 100644 index 80507a0..0000000 --- a/widget-reference/switch.md +++ /dev/null @@ -1,63 +0,0 @@ -# Switch widget - -The Switch Widget enables the rendering of switch toggle elements, providing users with an intuitive and interactive way to toggle between two states within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/3f4ba37a-0e6a-46a1-9b78-e4e04c84937d) - -## Properties - -| Property | Type | Description | -| :----------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700). while min vlaue can be `0` and maximum can be `5000` | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| hintText | string | Hint text explaining your widget | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| onChange | action | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| onChangeHaptic | enum | The type of haptic to perform when switch state is changed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | -| value | string | Specifying the value of your Text Input | -| autoComplete | boolean | Enable the Input search suggestion option | -| items | array | List of values, or Objects with value/label pairs | -| styles | object | [see properties](#styles) | -| leadingText | string | Sets the text displayed before the checkbox | -| trailingText | string | Sets the text displayed after the checkbox | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| contentPadding | integer or string | Padding around your input content with CSS-style notation e.g. margin: 5 20 5 | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | - -### icon - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | diff --git a/widget-reference/tabbar.md b/widget-reference/tabbar.md deleted file mode 100644 index d64efe1..0000000 --- a/widget-reference/tabbar.md +++ /dev/null @@ -1,30 +0,0 @@ -# TabBar - -The TabBar Widget enables the creation of tab bars, providing a convenient and visually appealing way to navigate between different sections or views within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/cebd491d-7d90-43f4-9f17-b8575de441ca) - -## Properties - -| Property | Type | Description | -| :------------ | :------ | :--------------------------------------- | -| styles | object | [See properties](#styles) | -| selectedIndex | integer | Selecting a Tab based on its index order | -| items | array | Define each of your Tab here | -| onTabSelection | action | The action that will be performed when a tab is pressed. | -| onTabSelectionHaptic | enum | The type of haptic to perform when a tab is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate | - -### styles - -| Property | Type | Description | -| :----------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| tabPosition | string | How to lay out the Tab labels | -| tabPadding | string or integer | Padding for each tab labels with CSS-style value. Default: 0 30 0 0 (right padding only) | -| tabFontSize | integer | Font size for the tab text | -| tabFontWeight | string | Font weight for the tab text | -| tabBackgroundColor | integer or string | The background color of the tab's navigation bar, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| activeTabColor | integer or string | The color of the selected tab's text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| inactiveTabColor | integer or string | The color of the un-selected tabs' text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| indicatorColor | integer or string | The color of the selected tab's indicator, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| indicatorThickness | integer | The thickness of the selected tab's indicator | -| margin | string or integer | Margin with CSS-style notation e.g. margin: 5 20 5 | diff --git a/widget-reference/text.md b/widget-reference/text.md deleted file mode 100644 index cd0aa7c..0000000 --- a/widget-reference/text.md +++ /dev/null @@ -1,103 +0,0 @@ -# Text widget - -Display and style text within your application. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/c87f8b09-58e2-4c2f-99a1-cbbe9e25e9a5?propertyPanelEnabled=true&instantPreviewDisabled=false&editorV2Enabled=true) - -## Properties - -| Property | Type | Description | -| :------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------- | -| text | string | Your text content | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| styles | object | [See properties](#styles) | - -### Styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| textStyle | object | An opaque object that determines the size, color, and decoration of text. [see properties](#stylestextstyles) | -| textAlign | string | Whether and how to align text horizontally. `start` `end` `center` `justify` | -| font | string | Default built-in style for this text. `heading` `title` `subtitle` | -| lineHeight | string or integer | The line height of the text, which determines the vertical spacing between lines. It can be specified as, a number, or a string chosen from a set of predefined values: `default` `1.0` `1.15` `1.25` `1.5` `2.0` `2.5` | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. | -| shadowRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| shadowStyle | string | The blur style to apply on the shadow `normal`, `solid`, `outer`, `inner` | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| margin | string or integer | Margin with CSS-style notation | -| padding | string or integer | Padding with CSS-style value | -| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. | -| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. | -| backgroundImage | object | Background image of the box. [see properties](#stylesbackgroundImage) | -| backgroundGradient | object | Background gradient of the box [see properties ](#stylesbackgroundGradient) | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g. stretch horizontally for parent of type Row) | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| maxLines | integer | The maximum number of lines a text will have. | - -### styles.textStyles - -| Property | Type | Description | -| :----------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| fontFamily | string | Set the font family applicable for all widgets inside this container, see the list of all available font families [here](https://github.com/material-foundation/flutter-packages/blob/main/packages/google_fonts/generator/families_supported). | -| fontSize | integer | Sets the size of the text. | -| fontWeight | string | The thickness of the glyphs used to draw the text. `light` `normal` `bold` `w100` `w200` `w300` `w400` `w500` `w600` `w700` ` w800``w900 ` | -| color | integer or string | The color specification for the text, icons, divider etc, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| overflow | string | Set treatment of text longer than available space `wrap` `visible` `clip` `ellipsis` | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| fontfamily | string | Allows users to chose a specific font-family other than the default one. | -| decoration | string | A linear decoration to draw near the text or whether to slant the glyphs in font. `none` `lineThrough` `underline` `overline` | -| decorationStyle | string | The style in which to paint the text decorations (e.g., dashed). `solid` `double` `dotted` `dashed` `wavy` | -| isItalic | boolean | Whether the text should be italic or not | -| lineHeightMultiple | integer | A multiple of the fontSize to determine the line height. (e.g. 2.0 means the line height is double the height the font size occupies). Default null. (note that 1.0 is not the default depending on the font) | -| letterSpacing | integer | The amount of space (in logical pixels) to add between each letter. A negative value can be used to bring the letters closer. | -| wordSpacing | integer | The amount of space (in logical pixels) to add at each sequence of white-space (i.e. between each word). A negative value can be used to bring the words closer. | -| gradient | object | Using this property we can apply gradient to our text | - -### styles.gradient - -| Property | Type | Description | -| :------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| stops | array | The list of color stops, each is a number between 0.0 (where the gradient starts) and 1.0 (where the gradient ends). The number of stops should match the number of colors. | -| start | string | The starting position of the gradient,`topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| end | string | The ending position of the gradient, `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | - -### styles.backgroundGradient - -| Property | Type | Description | -| :------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient. Colors can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. | -| start | string | The starting position of the gradient, | -| end | string | The ending position of the gradient | - -### styles.backgroundImage - -| Property | Type | Description | -| :-------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------- | -| source | string | The Image URL to fill the background | -| fit | string | How to fit the image within our width/height or our parent (if dimension is not specified) . [see options](#fit-options-for-stylesbackgroundimage) | -| alignment | string | Alignment of the background image | - -#### Fit options for styles.backgroundImage - -| Option | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | -| fill | Stretch our image to fill the dimension, and distorting the aspect ratio if needed | -| contain | Scale the image such that the entire image is contained within our dimension | -| cover | Scale the image to fill our dimension, clipping the image as needed | -| fitWidth | Scale the image to fit the width, and clipping the height if needed | -| fitHeight | Scale the image to fit the height, and clipping the width if needed | -| none | Center-Align the original image size, clipping the content if needed | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | diff --git a/widget-reference/textinput.md b/widget-reference/textinput.md deleted file mode 100644 index 594874a..0000000 --- a/widget-reference/textinput.md +++ /dev/null @@ -1,126 +0,0 @@ -# TextInput widget - -The TextInput Widget enables the rendering of interactive text input fields, allowing users to enter and edit text within your application for data input and interaction. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/abc081b1-bcb4-4db6-ae55-7987cb6c418e) - -## Properties - -| Property | Type | Description | -|:------------------------|:-----------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700). while min vlaue can be `0` and maximum can be `5000` | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| labelStyle | [TextStyle](/widget-reference/types#TextStyle) | Styling for the label | -| hintText | string | Hint text explaining your widget | -| hintStyle | object | Styling the hint text. Default to theme's bodyMedium styling. [see properties](#hintstyles) | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| styles | object | [See properties](#styles) | -| validator | object | [See properties](#validator) [Example](https://studio.ensembleui.com/app/a2qNNXgcmhBxfrTMBVGB/screen/AzD8jmw9Xk2zrGa1IVqd) | -| validateOnUserInteraction | boolean | Default: false. When set to true, validates the user's input on every keypress. [Example](https://studio.ensembleui.com/app/a2qNNXgcmhBxfrTMBVGB/screen/AzD8jmw9Xk2zrGa1IVqd) | -| value | string | Specifying the value of your Text Input | -| inputType | string | Pick a predefined input type ` default` `email` `phone ` `number` `text` `url` `datetime ` `ipAddress` | -| keyboardAction | string | Specify the action key on native device's soft keyboard | -| obscureText | boolean | whether we should obscure the typed-in text (e.g Social Security) | -| obscureToggle | boolean | enable the toggling between plain and obscure text. | -| toolbarDone | boolean | Display the toolbar with done button on top of the keyboard. (defaults to False) | -| textStyle | object | An opaque object that determines the size, color, and decoration of text. Similar properties as hintStyle [see properties](#hintstyles) | -| mask | string | It formats the input by a given mask. Ex: +# (###) ###-##-##. detailed examples can be seen in [Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/abc081b1-bcb4-4db6-ae55-7987cb6c418e) | -| delayedKeyPressDuration | integer | The delay in milliseconds to trigger onDelayedKeyPress ( min : 0) | -| multiline | boolean | Specifies if this TextInput can span multiple lines. (default False) | -| minLines | integer | Specifies the minimum number of lines to start out (applicable for multiline) | -| maxLines | integer | Specifies the maximum number of lines to visually expand to. This will also enable multi-line if this number is greater than 1 and the 'multiline' property is not set. | - -### Actions - -| Name | description | -| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| onKeyPress | On every keystroke, call Ensemble's built-in functions or execute code | -| onFocusReceived | Execute an Ensemble action when the field receives focus | -| onFocusLost | Execute an Ensemble action when the field loses focus | -| onChange | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| onDelayedKeyPress | Execute an Action after a brief delay specified by delayedKeyPressDuration (default: 300 ms). Consecutive calls within this delay will reset the timer, useful for minimizing server calls for type-ahead scenarios. | - -### icon - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| fontSize | integer | Sets the size of the text. | -| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderWidth | integer | Thickness of the border. Minimum value should be 0. | -| fontSize | integer | Sets the size of the text. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| contentPadding | integer or string | Padding around your input content with CSS-style notation e.g. margin: 5 20 5 | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | - -### hintStyles - -| Property | Type | Description | -| :----------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| fontSize | integer | Sets the size of the text. | -| fontWeight | string | The thickness of the glyphs used to draw the text. `light` `normal` `bold` `w100` `w200` `w300` `w400` `w500` `w600` `w700` ` w800``w900 ` | -| color | integer or string | The color specification for the text, icons, divider etc, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| overflow | string | Set treatment of text longer than available space `wrap` `visible` `clip` `ellipsis` | -| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| fontfamily | string | Allows users to chose a specific font-family other than the default one. | -| decoration | string | A linear decoration to draw near the text or whether to slant the glyphs in font. `none` `lineThrough` `underline` `overline` | -| decorationStyle | string | The style in which to paint the text decorations (e.g., dashed). `solid` `double` `dotted` `dashed` `wavy` | -| isItalic | boolean | Whether the text should be italic or not | -| lineHeightMultiple | integer | A multiple of the fontSize to determine the line height. (e.g. 2.0 means the line height is double the height the font size occupies). Default null. (note that 1.0 is not the default depending on the font) | -| letterSpacing | integer | The amount of space (in logical pixels) to add between each letter. A negative value can be used to bring the letters closer. | -| wordSpacing | integer | The amount of space (in logical pixels) to add at each sequence of white-space (i.e. between each word). A negative value can be used to bring the words closer. | -| gradient | object | Using this property we can apply gradient to our text | - -### hintStyles.gradient - -| Property | Type | Description | -| :------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| colors | array | The list of colors used for the gradient, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| stops | array | The list of color stops, each is a number between 0.0 (where the gradient starts) and 1.0 (where the gradient ends). The number of stops should match the number of colors. | -| start | string | The starting position of the gradient,`topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| end | string | The ending position of the gradient, `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | - -### validator - -| Property | Type | Description | -| :--------- | :------ | :------------------------------------------------------------------------------------- | -| minLength | integer | The minimum number of characters | -| maxLength | integer | The maximum number of characters | -| regex | string | The Regular Expression the input will need to match | -| regexError | string | The customized error message to show when the input does not match the provided regex. | - -#### options for styles.variant - -| Option | Description | -| :-------- | :------------------------------------------------------------------------------------------------------------------- | -| box | draw a Box border around this input widget. This property can be defined in the theme to apply to all Input widgets. | -| underline | draw an Underline below this input widget. This property can be defined in the theme to apply to all Input widgets. | diff --git a/widget-reference/time.md b/widget-reference/time.md deleted file mode 100644 index e8c2ee3..0000000 --- a/widget-reference/time.md +++ /dev/null @@ -1,58 +0,0 @@ -# Time widget - -The Time Widget enables the rendering of time input fields, allowing users to select and display time values within your application for time-related functionality and interactions. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/yNHLPObY1wWgCpg0sgoW) - -## Properties - -| Property | Type | Description | -| :----------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | ID to be referenced later | -| maxWidth | integer | The max width of this Input widget (default 700) | -| label | string | Label for your widget | -| labelHint | string | Hint text on your label | -| hintText | string | Hint text explaining your widget | -| required | boolean | Whether the field is required | -| enabled | boolean | Enables or disables the interactivity and input functionality of the widget | -| icon | object | [See properties](#icon) | -| onChange | | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) | -| styles | object | [See properties](#styles) | -| initialValue | string | The highlighted initial time in the time picker. Use format HH:MM | - -### icon - -| Property | Type | Description | -| :------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| name | string | The name of the icon | -| library | string | Which icon library to use. | -| color | integer or string | The color specification for the text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| size | integer | Defines the dimensions or magnitude of an element, allowing control over its overall size within the layout. | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| contentPadding | integer or string | Padding around your input content with CSS-style notation e.g. margin: 5 20 5 | -| fillColor | integer or string | The fill color for this input fields. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| borderRadius | integer | The border radius for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| borderWidth | integer | The border width for this Input widget. This property can be defined in the theme to apply to all Input widgets. | -| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| errorBorderColor | integer or string | The border color when there are errors on this input field. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedBorderColor | integer or string | The border color when this input field is receiving focus. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| focusedErrorBorderColor | integer or string | The border color of this input field when it is receiving focus in its error state. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| disabledBorderColor | integer or string | The border color when this input field is disabled. This property can be defined in the theme to apply to all Input widgets, starting with '0xFF' for full opacity. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| variant | string | Select a pre-defined look and feel for this Input widget. This property can be defined in the theme to apply to all Input widgets. [see properties](#options-for-stylesvariant) | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | diff --git a/widget-reference/types.md b/widget-reference/types.md deleted file mode 100644 index 39f0cc7..0000000 --- a/widget-reference/types.md +++ /dev/null @@ -1,134 +0,0 @@ -# Type References -These Types objects are used in multiple widgets. They are defined here for reference. - -## TextStyle -TextStyle allows customization of font, size, color, decoration, and more to enhance the UI's textual elements. - -| Property | Type | Description | -|:-------------------|:-----------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| fontFamily | string | The name of the font family. | -| fontSize | integer | The size of the font. Valid values range from 1 to 1000. | -| lineHeightMultiple | number | A multiplier applied to the font size to determine line height (e.g., 2.0 for double the height of the font size). By default this value varies on the font used. | -| fontWeight | [FontWeight](#FontWeight) | The weight of the font. | -| isItalic | boolean | If true, the text is italicized. | -| color | [Color](#Color) | The color of the text. | -| backgroundColor | [Color](#Color) | The background color of the text | -| gradient | [Gradient](#gradient) | A gradient effect applied to the text. | -| decoration | enum | The text decoration: `none`, `lineThrough`, `underline`, `overline`. | -| decorationStyle | enum | The style of the text decoration (if decoration is not `none`): `solid`, `double`, `dotted`, `dashed`, `wavy`. | -| overflow | enum | Treatment of text exceeding available space: `clip`, `fade`, `ellipsis`, `visible`. | -| letterSpacing | integer | Space between characters in the text. | -| wordSpacing | integer | Space between words in the text. | - -## Gradient - -| Property | Type | Description | -|:---------|:-----------------------------------------------|:-----------------------------------------------------------------------------------------------------------| -| colors | list of [Color](#Color) | An array of colors used for the gradient. | -| stops | list of numbers | An array of numbers indicating the position of each gradient color, ranging from 0.0 (start) to 1.0 (end). | -| start | [Alignment](/widget-reference/types#Alignment) | The starting position of the gradient. | -| end | [Alignment](/widget-reference/types#Alignment) | The ending position of the gradient. | - -## FontWeight -This property defines the weight (thickness) of the font used in text styling. It includes standard weights and numerical weights for finer control. - -| FontWeight | Description | -|------------|-------------------------------------------| -| light | Lighter font weight. | -| normal | Normal or regular font weight. | -| bold | Bold font weight. | -| w100-w900 | Font weight from 100-900 (light to bold). | - -## Color -This property defines the color based on a pre-defined names or a hex value (prefixed with 0xFF for full opacity e.g., #FF000000). - -| Name | Description | -|-------------|------------------| -| transparent | Transparent | -| black | Black color. | -| blue | Blue color. | -| white | White color. | -| red | Red color. | -| grey | Grey color. | -| teal | Teal color. | -| amber | Amber color. | -| pink | Pink color. | -| purple | Purple color. | -| yellow | Yellow color. | -| green | Green color. | -| brown | Brown color. | -| cyan | Cyan color. | -| indigo | Indigo color. | -| lime | Lime color. | -| orange | Orange color. | - -## Alignment -This property is used to specify the alignment of an element within its parent. - -| Alignment | Description | -|--------------|-------------------------------------------------------| -| topLeft | Aligns the element at the top-left corner. | -| topCenter | Aligns the element at the top-center. | -| topRight | Aligns the element at the top-right corner. | -| centerLeft | Aligns the element at the center-left side. | -| center | Centers the element both horizontally and vertically. | -| centerRight | Aligns the element at the center-right side. | -| bottomLeft | Aligns the element at the bottom-left corner. | -| bottomCenter | Aligns the element at the bottom-center. | -| bottomRight | Aligns the element at the bottom-right corner. | - -## TapHaptic -This property specifies the type of haptic feedback to be played upon tapping an element. The options are listed in decreasing order of intensity. - -| Haptic Feedback | Description | -|-----------------------|--------------------------------------------------------------------------------------------------| -| heavyImpact | Generates a haptic feedback of the highest intensity. | -| mediumImpact | Provides a haptic feedback of medium intensity. | -| lightImpactHaptic | Offers a lighter haptic impact as feedback. | -| selectionClickHaptic | Produces a mild, click-like haptic feedback, typically used for selection changes. | -| vibrateHaptic | Triggers a standard vibration as haptic feedback. | - -## BackgroundImage -This property configures a background image for a widget, including its source, fit, alignment, and a fallback option. - -| Property | Type | Description | -|:----------|:-----------------------------------------------|:--------------------------------------------------------------------------------------------------------------------| -| source | string | The Image URL to fill the background. | -| fallback | [Widget](/widget-reference/directory) | Return an inline widget or specify a custom widget to be rendered when the backgroundImage fails to load the image. | -| fit | [Fit](/widget-reference/types#Fit) | How to fit the image within the dimensions. | -| alignment | [Alignment](/widget-reference/types#Alignment) | Align this image relative to its parent or dimensions. | - - -## Fit - -This property determines how to fit the image within the dimension or the parent container. - -| Fit Mode | Description | -|------------|-----------------------------------------------------------------------------------------------------| -| fill | Stretch our image to fill the dimension, potentially distorting the aspect ratio if necessary. | -| contain | Scale the image such that the entire image is contained within our dimension. | -| cover | Scale the image to fill our dimension, clipping the image as needed. | -| fitWidth | Scale the image to fit the width, and clipping the height if needed. | -| fitHeight | Scale the image to fit the height, and clipping the width if needed. | -| none | Center-Align the original image size, clipping the content if needed. | -| scaleDown | Center-Align the image and only scale down to fit. Image will not be scaled up to bigger dimension. | - - -## Border - -| Property | Type | Description | -|:-------------|:---------------------------------------|:-------------------------------------------------------| -| borderRadius | integer / string | Border Radius with CSS-like notation (1 to 4 integers) | -| borderColor | [Color](/widget-reference/types#Color) | Border color, starting with '0xFF' for full opacity. | -| borderWidth | integer | The thickness of the border. Minimum value: 0. | - -## Shadow -This property defines the shadow properties for a widget, including color, offset, radius, blur radius, and style. - -| Property | Type | Description | -|:-----------------|:------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| shadowColor | string / number | Box shadow color starting with '0xFF' for full opacity. | -| shadowOffset | array of integers | Offset of the shadow in the format `[x, y]`. | -| shadowRadius | integer | The radius of the shadow. Minimum value: 0. | -| shadowBlurRadius | integer | The blur radius of the shadow. Minimum value: 0. | -| shadowStyle | enum | The blur style to apply on the shadow:
`normal` - Fuzzy inside and outside (default)
`solid` - Solid inside, fuzzy outside.
`outer` - Nothing inside, fuzzy outside.
`inner` - Fuzzy inside, nothing outside. | diff --git a/widget-reference/video.md b/widget-reference/video.md deleted file mode 100644 index 39fc86d..0000000 --- a/widget-reference/video.md +++ /dev/null @@ -1,11 +0,0 @@ -# Video widget - -The Video Widget enables seamless integration of video content within your application, providing an immersive and engaging multimedia experience for users. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/fce92bbb-af8e-403d-bf2d-c10926cc89a0) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :------------------------------- | -| source | string | The URL source to the media file | diff --git a/widget-reference/webview.md b/widget-reference/webview.md deleted file mode 100644 index 15e4ec0..0000000 --- a/widget-reference/webview.md +++ /dev/null @@ -1,41 +0,0 @@ -# WebView widget - -The WebView Widget enables seamless integration of web content within native apps and web apps, providing a versatile and consistent browsing experience across platforms. - -[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/22c8d57d-a906-4d11-873d-161fd6c56c0a) - -## Properties - -| Property | Type | Description | -| :------- | :----- | :-------------------------------------------------------------------- | -| url | string | Defines the web address (URL) to be loaded within the WebView widget. | -| styles | object | [See properties](#styles) | - -## Events - -| Event | Description | -| :------- | :-------------------------------------------------------------------- | -| onPageStart | Invoked when a page has started loading | -| onPageFinished | Invoked when a page has finished loading. | -| onProgress | Invoked when a page is loading to report the progress. | -| onNavigationRequest | Invoked when a decision for a navigation request is pending. When a navigation is initiated by the WebView (e.g when a user clicks a link) this delegate is called and has to decide how to proceed with the navigation. | -| onWebResourceError | Invoked when a resource loading error occurred. | - -### styles - -| Property | Type | Description | -| :--------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) | -| width | integer | By default the width will match its parent's available width, but you can set an explicit width here. | -| height | integer | If no height is specified, the web view will stretch its height to fit its content, in which case a scrollable parent is required to scroll the content. You may override this behavior by explicitly set the web view's height here, or uses 'expanded' to fill the available height. | -| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. | -| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. | -| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. | -| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. | -| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 | -| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` | -| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. | -| alignment | string | The alignment of the widget relative to its parent. `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight` | -| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. | -| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. | -| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. |