{"id":13992163,"url":"https://github.com/GenieFramework/StippleUI.jl","last_synced_at":"2025-07-22T15:31:25.099Z","repository":{"id":37696506,"uuid":"262666601","full_name":"GenieFramework/StippleUI.jl","owner":"GenieFramework","description":"StippleUI is a library of reactive UI elements for Stipple.jl.","archived":false,"fork":false,"pushed_at":"2025-07-08T09:37:53.000Z","size":3922,"stargazers_count":86,"open_issues_count":26,"forks_count":15,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-07-08T10:22:21.661Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Julia","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GenieFramework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-05-09T22:01:14.000Z","updated_at":"2025-07-08T09:02:06.000Z","dependencies_parsed_at":"2023-02-11T04:00:57.176Z","dependency_job_id":"1432cb66-aa3a-4903-9814-2284c2856e97","html_url":"https://github.com/GenieFramework/StippleUI.jl","commit_stats":{"total_commits":277,"total_committers":18,"mean_commits":15.38888888888889,"dds":0.7617328519855595,"last_synced_commit":"853e98547988009bc8cbfd829f76a5c96fac0982"},"previous_names":[],"tags_count":83,"template":false,"template_full_name":null,"purl":"pkg:github/GenieFramework/StippleUI.jl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenieFramework%2FStippleUI.jl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenieFramework%2FStippleUI.jl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenieFramework%2FStippleUI.jl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenieFramework%2FStippleUI.jl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GenieFramework","download_url":"https://codeload.github.com/GenieFramework/StippleUI.jl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GenieFramework%2FStippleUI.jl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266520684,"owners_count":23942318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-09T14:01:50.877Z","updated_at":"2025-07-22T15:31:25.063Z","avatar_url":"https://github.com/GenieFramework.png","language":"Julia","funding_links":[],"categories":["Julia"],"sub_categories":[],"readme":"# StippleUI.jl [![Docs](https://img.shields.io/badge/stippleui-docs-greenyellow)](https://www.genieframework.com/docs/)\n\nStippleUI is a library of reactive UI elements for [Stipple.jl](https://github.com/GenieFramework/Stipple.jl).\n\ntogether with\n- [Stipple.jl](https://github.com/GenieFramework/Stipple.jl),\n- [StipplePlotly.jl](https://github.com/GenieFramework/StipplePlotly.jl) and\n- [Genie.jl](https://github.com/GenieFramework/Genie.jl)\n\nit is part of the [GenieFramework](https://github.com/GenieFramework/GenieFramework.jl), a powerful and complete solution for building\nbeautiful, responsive, reactive, high performance interactive data dashboards in pure Julia.\n\n`StippleUI` provides over 30 UI elements, including forms and form inputs (button, slider, checkbox, radio, toggle, range), lists, data tables,\nhigher level components (badges, banners, cards, dialogs, chips, icons), and layout elements (row, col, dashboard, heading, space) from the [Quasar Framework](https://quasar.dev).\n\n## News: Vue 3 / Quasar 2\n\nFrom version 0.24 on StippleUI has upgraded the front-end libraries to Vue3 / Quasar 2, as Vue-2 has reached its end-of-life.\n\nWe have put lots of effort in making migration as easy as possible. Nevertheless, there are some places where advanced user interfaces might need a little tweeking.\n\n## Main Changes for version \u003e= v0.24\n\n### Components\n- General: Syncing of additional fields is no longer done with the syntax `fieldname.sync` but rather with `v-model:fieldname`. This is already taken care of by the components' API, e.g. `paginationsync` in `table()`. If you have manually added such fields you need to adapt your code.\n- Quasars's Table component has changed the naming of the content attribute from `data` to `rows`.\n  Accordingly, all references in templates should be changed to `rows` in the long run, e.g.\n  `table(:mytable, @showif(\"mytable.data.length\"))` should be changed to `table(:mytable, @showif(\"mytable.data.length\"))`.\n  However, we have introduced a watcher that sets a second field named 'data' to the 'rows' field, which will keep old code running in most cases. The only disadvantage of that solution is that syncing the table content back to the server sends the double amount of data; so that helper might be deprecated in the future.\n\n### More Migration Support\n- Stipple's README https://github.com/GenieFramework/Stipple.jl/blob/master/README.md\n- Quasar upgrade guide: site: https://quasar.dev/start/upgrade-guide/\n- Vue migration guide: https://v3-migration.vuejs.org/\n\n## Installation\n\n```julia\npkg\u003e add StippleUI\n```\n## Usage\n\n### Quasar Components\n\nStippleUI defines functions for most of the quasar vue components. Most functions are named like their Quasar counterparts, e.g. `btn()` for `q-btn`, `tab()` for `q-tab`, etc. Some functions have received different names for clarity, e.g. `textfield()` for `q-input` with text type and `numberfield()` for `q-input` with number type.\nMost functions have named positional arguments that are used for definition of common attributes, e.g. `label` or `fieldname`.\nBesides that all functions have a general calling scheme for unnamed arguments and keyword arguments:\n\n- if a component supports content, the first non-named positional argument is passed as content to the components.\n- any following non-array argument is passed as parameter to the components\n- any non-named array argument is joined and passed as content\n- if a component does not support content, e.g. `btn()`, all non-named arguments except arrays are passed as parameter. (Passing arrays can be used to define templates for a component. More details can be found in Vue.js docs.)\n- keyword arguments are passed pretty much the same as the Julia expression, except that\n    - `__` is converted to `-`\n    - `!` in the middle of a keyword is converted to `.`\n    - `!` at the end of a keyword indicates that the argument should be treated as js expression\n    - a Symbol as value of a keyword argument indicates that the argument should be treated as js expression\n    - non-standard characters which are not allowed in Julia variable names can be used by employing the `var\"\"`notation, e.g. `span(var\"v-html\" = \"My Text with \u003cbr\u003enew lines\")`\n    - most variable names that contain a dash in Vue-syntax are automatically replaced, e.g. `\"leftlabel\" =\u003e \"left-label\"`. All standard mappings can be found in `StippleUI.API.ATTRIBUTES_MAPPINGS`\n\n\n#### Examples\n```julia\njulia\u003e btn(\"Just do it!\", @click(:mybutton), loading = :mybutton) |\u003e println\n\u003cq-btn :loading=\"mybutton\" label=\"Just do it!\" v-on:click=\"mybutton = true\"\u003e\u003c/q-btn\u003e\n\njulia\u003e textfield(\"Label\", :mytext) |\u003e println\n\u003cq-input label=\"Label\" v-model=\"mytext\"\u003e\u003c/q-input\u003e\n\n```\n#### What if a component is missing?\nIf a quasar component is not yet covered by StippleUI, you can still use the `quasar()` function to make it available in your UI:\n\n```julia\njulia\u003e quasar(:btn, label = \"Action!\") |\u003e println\n\u003cq-btn label=\"Action!\"\u003e\u003c/q-btn\u003e\n```\nIn a very similar way, you can also integrate vue components or any other html component:\n\n```julia\njulia\u003e vue(:calender, date = \"today\", \"This is still a dream!\")\n\"\u003cvue-calender date=\\\"today\\\"\u003eThis is still a dream!\u003c/vue-calender\u003e\"\n\njulia\u003e xelem(:br)\n\"\u003cbr\u003e\u003c/br\u003e\"\n```\n\n### Bindings\nThere are two ways of assigning component properties\n- assignment of a string value:\n `attribute = \"lorem ipsum\"`\n- assignment of a Javascript expression, by\n  - assigning a `Symbol`\n    `attribute = :input`\n  - or by appending a `!`-character to the attribute\n    `attribute! = \"input\"`\n  \n  In most cases this syntax is used to directly bind app variables, but you can also bind more complicated expressions, e.g. array elements (note that js has 0-based indexing):\n `attribute = Symbol(\"data[0]\")`\n `attribute = R\"data[0]\"`\n `attribute! = \"data[0]\"`\n The `R\"\"` string macro is a convenient way of defining Symbols.\n### Helper macros\n\nVue.js has defined several short cuts which typically start with a `@`-character. In Julia the `@`-character is reserved for macros. So we decided to use macros to achieve a similar syntax. But we also provide macros to add attributes with other 'forbidden' characters like `.` or `-`.\nHave a look at the docstrings of `@click`, `@on`,  `@iif`, `@els`, `@elsiif`, `@recur`, `@text`, `@bind`, `@data` and `@showif` to learn more. To try out whether rendering is correct enter the tentative expression at the REPL, e.g.\n```julia\njulia\u003e span(@showif(true))\n\"\u003cspan v-show=\\\"true\\\"\u003e\u003c/span\u003e\"\n\njulia\u003e span(@click(:mybutton))\n\"\u003cspan v-on:click=\\\"mybutton = true\\\"\u003e\u003c/span\u003e\"\n```\n\n### Quasar's Flexgrid\nQuasar implements a grid system called \"Flexgrid\" that allows for easy definition of UIs by classes.\n\nA grid can be either vertical (`class = \"column\"`) or horizontal (`class = \"row\"`). The child elements receive their size within that container by setting the class `\"col\"` for equally spaced children, or `\"col-6\"` for a fixed multiple of 1/12 of the container size (here `6` so 50%).\nMoreover, Quasar allows for varying child sizes depending on the size of the container, by adding a size-condition after the col class, e.g. `\"col-md-3\"`, or simply `\"col-md\"`.\nIn the StippleUI-API we define the attributes `col`, `xs`, `sm`, `md`, `lg`, `xl` to make this class definition more convenient, e.g.\n```julia\nrow(htmldiv(col = 2, md = 4)) |\u003e println\n# \u003cdiv class=\"row\"\u003e\u003cdiv class=\"col-2 col-md-4\"\u003e\u003c/div\u003e\u003c/div\u003e\n```\n\nFurthermore, spacings between child elements are added by setting the class=\"gutter-md\". In case of children in flex containers (`row` or `column`) the setting needs to be `class = \"gutter-col-md\"`. Again, we have defined an attribute that takes care of the difference and automatically choses the correct setting.\n```julia-repl\njulia\u003e row(gutter = \"md\", htmldiv(col = 2, md = 4), \"Hello World\") |\u003e println\n\u003cdiv class=\"row q-col-gutter-md\" Hello World\u003e\u003cdiv class=\"col-2 col-md-4\"\u003e\u003c/div\u003e\u003c/div\u003e\n```\n\nFurthermore, children might badly display if they have a background setting, which is due to the way, Quasar sets margins and padding. The way out is to wrap the children in an extra `div` element, which can conveniently done by using the `@gutter`macro.\n```julia-repl\njulia\u003e row(gutter = \"md\", @gutter htmldiv(col = 2, md = 4, \"Hello World\")) |\u003e println\n\u003cdiv class=\"row q-col-gutter-md\"\u003e\u003cdiv class=\"col-2 col-md-4\"\u003e\u003cdiv\u003eHello World\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n```\n\nMore details can be found in the docstrings.\n\n### Javascript code\n\nVue.js offers the possibility of embedding javascript functions that are called ither manually (`methods`) or automatically when certain events occur, e.g. `watch`, `mounted`, `created`, `computed`. Such code can easily be defined by the respective macros `@methods`, `@watch`, `@mounted`, `@created`, `@computed`, e.g.\n\n\n```julia\n@methods \"\"\"\nlogdemo: function(text) {\n    console.log(\"Text from Stipple: \" + text)\n    return text\n},\nsquaredemo: function(number) {\n    console.log(\"The square of \" + number + \" is \" + number**2)\n    return number**2\n}\n\"\"\"\n\n@created \"\"\"\"\n    console.log('This app has just been created!')\n\"\"\"\n```\nSee the [editable tree demo](https://github.com/GenieFramework/StippleDemos/blob/master/ReactiveTools%20API/EditableTree.jl) for more information.\nThese macros also work for explicit models, e.g.\n```julia\n@created MyApp \"\"\"\"\n    console.log('This app has just been created!')\n\"\"\"\n```\n### User-defined events\nThere is support for user-defined events by the macro `@event`.\n```julia\n@event :uploaded begin            \n    println(\"Files have been uploaded!\")\nend\n```\nThese lines define julia code that is executed when an event from the client is forwarded to the server.\nTypically, events at the client originate from certain vue components, e.g. `q-uploader`. They can be forwarded by calling the `@on` macro\nwith two Symbol arguments.\n\n```julia\njulia\u003e uploader(\"Upload files\", url = \"/upload\" , @on(:uploaded, :uploaded))\n\"\u003cq-uploader url=\\\"/upload\\\" v-on:uploaded=\\\"function(event) { handle_event(event, 'uploaded') }\\\"\u003eUpload files\u003c/q-uploader\u003e\"\n```\nEvents can also be triggered manually by calling `handle_event(event, 'uploaded')` on the client side.\n\nSee the [file upload demo](https://github.com/GenieFramework/StippleDemos/blob/master/ReactiveTools%20API/FileUpload.jl) for more information.\nAgain the `@event` macro also works for explicit models, e.g.\n```julia\n@event MyApp :uploaded begin            \n    println(\"Files have been uploaded to MyApp!\")\nend\n```\n## Example app\n\nThe following snippet illustrates how to build a reactive UI based on StippleUI. You find three different ways of triggering handlers.\n- Every input in the input field triggers a function that sets the inverted input string in the output field.\n- Hitting the `Enter` key in the input field inverts the output string.\n- Pressing of the action button inverts the output string.\nStippleUI \n```julia\nusing Stipple, StippleUI\n\n@vars Inverter begin\n  process = false\n  input = \"\"\n  output::String = \"\", READONLY\nend\n\nfunction handlers(model)\n  on(model.input) do input\n      model.output[] = input |\u003e reverse\n  end\n\n  onbutton(model.process) do\n      model.output[] = model.output[] |\u003e reverse\n  end\n\n  model\nend\n\nfunction ui()\n  row(cell(class = \"st-module\", [\n    textfield(class = \"q-my-md\", \"Input\", :input, hint = \"Please enter some words\", @on(\"keyup.enter\", \"process = true\"))\n\n    btn(class = \"q-my-md\", \"Action!\", @click(:process), color = \"primary\")\n    \n    card(class = \"q-my-md\", [\n      card_section(h2(\"Output\"))\n      card_section(\"Variant 1: {{ output }}\")\n      card_section([\"Variant 2: \", span(class = \"text-red\", @text(:output))])\n    ])\n  ]))\nend\n\nroute(\"/\") do\n  model = Inverter |\u003e init |\u003e handlers\n  page(model, ui()) |\u003e html\nend\n\nGenie.isrunning(:webserver) || up()\n```\n\u003cimg src=\"docs/content/img/Example.png\"\u003e\n\n## StippleUIParser\n### Tools\n- `parse_vue_html`\n- `test_vue_parsing`\n- `prettify`\n\nA very new tool is StippleUIParser. It converts html code to the respective Julian code and prettifies html code. This is meant as a helper tool to port demo code from the internet into Stipple/Genie apps.\n\n#### Parse vue html code to julia code\n```julia\njulia\u003e using StippleUI.StippleUIParser\njulia\u003e doc_string = \"\"\"\n\u003ctemplate\u003e\n    \u003cdiv class=\"q-pa-md\"\u003e\n    \u003cq-scroll-area style=\"height: 230px; max-width: 300px;\"\u003e\n        \u003cdiv class=\"row no-wrap\"\u003e\n            \u003cdiv v-for=\"n in 10\" :key=\"n\" style=\"width: 150px\" class=\"q-pa-sm\"\u003e\n                Lorem @ipsum \\$dolor sit amet consectetur adipisicing elit.\n            \u003c/div\u003e\n            \u003cq-btn color=\\\"primary\\\" label=\\\"`Animate to \\${position}px`\\\" @click=\\\"scroll = true\\\"\u003e\u003c/q-btn\u003e\n            \u003cq-input hint=\\\"Please enter some words\\\" v-on:keyup.enter=\\\"process = true\\\" label=\\\"Input\\\" v-model=\\\"input\\\"\u003e\u003c/q-input\u003e\n            \u003cq-input hint=\\\"Please enter a number\\\" label=\\\"Input\\\" v-model.number=\\\"numberinput\\\" class=\\\"q-my-md\\\"\u003e\u003c/q-input\u003e\n        \u003c/div\u003e\n    \u003c/q-scroll-area\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\"\"\";\n\njulia\u003e parse_vue_html(html_string, indent = 2) |\u003e println\ntemplate(\n  Stipple.Html.div(class = \"q-pa-md\",\n    scrollarea(style = \"height: 230px; max-width: 300px;\",\n      Stipple.Html.div(class = \"row no-wrap\", [\n        Stipple.Html.div(var\"v-for\" = \"n in 10\", key! = \"n\", style = \"width: 150px\", class = \"q-pa-sm\",\n          \"Lorem @ipsum dolor sit amet consectetur adipisicing elit.\"\n        )\n        btn(raw\"`Animate to ${position}px`\", color = \"primary\", var\"v-on:click\" = \"scroll = true\")\n        textfield(\"Input\", :input, hint = \"Please enter some words\", var\"v-on:keyup.enter\" = \"process = true\")\n        numberfield(\"Input\", :numberinput, hint = \"Please enter a number\", class = \"q-my-md\")\n      ])\n    )\n  )\n)\n```\n#### Test parsing result\n\nThere is also a testing tool `test_vue_parsing()` whether the parsing was successful:\n\n```\njulia\u003e test_vue_parsing(raw\"\"\"\u003ca :hello=\"I need $$$\"\u003easap\u003c/a\u003e\"\"\")\n\nOriginal HTML string:\n\u003ca :hello=\"I need $$$\"\u003easap\u003c/a\u003e\n\nJulia code:\na(hello! = raw\"I need $$$\",\n    \"asap\"\n)\n\nProduced HTML:\n\u003ca :hello=\"I need $$$\"\u003e\n    asap\n\u003c/a\u003e\n```\nwhich knows the details of binding syntax and which does respect the html preserve tag `\u003cpre\u003e`\n```\njulia\u003e test_vue_parsing(raw\"\"\"\u003cq-test :hello-world=\"I need $$$\"\u003e asap\\n    or\\ntoday \u003cpre\u003easap\\n    or\\ntoday \u003c/pre\u003e\u003c/q-test\u003e\"\"\"; indent = 2)\n\nOriginal HTML string:\n\u003cq-test :hello-world=\"I need $$$\"\u003e asap\\n    or\\ntoday \u003cpre\u003easap\\n    or\\ntoday \u003c/pre\u003e\u003c/q-test\u003e\n\nJulia code:\nquasar(:test, var\"hello-world\" = R\"I need $$$\", [\n  \"asap\\n    or\\ntoday\",\n  pre(\n      \"asap\\n    or\\ntoday \"\n  )\n])\n\nProduced HTML:\n\u003cq-test :hello-world=\"I need $$$\"\u003e\n  asap\n  or\n  today\n  \u003cpre\u003e\nasap\n    or\ntoday \u003c/pre\u003e\n\u003c/q-test\u003e\n```\n\n\n#### Prettify html code\n\nThe new prettifier is already used in `test_vue_parsing()` by default\n```julia\njulia\u003e prettify(\"\"\"\u003cdiv  class=\"first\"\u003esingle line\u003cdiv\u003e more\\nlines\u003c/div\u003e\u003c/div\u003e\"\"\"; indent = 5) |\u003e println\n\u003cdiv class=\"first\"\u003e\n     single line\n     \u003cdiv\u003e\n          more\n          lines\n     \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Demos\n### StippleDemos\nWe have dedicated a Github Page to Stipple Demos with many downloadable examples at:\n\u003chttps://github.com/GenieFramework/StippleDemos\u003e\n(Not all of them are updated to the latest changes of the API yet. But most of them should be functional.)\n### German Credits visualisation dashboard\n\n\u003cimg src=\"https://learn.genieframework.com/.netlify/images?url=%2Fassets%2Ftutorials%2Fgerman-credits%2Fui.gif\" width = 800\u003e\n\nThe full application is available at:\n\u003chttps://github.com/GenieFramework/Stipple-Demo-GermanCredits\u003e\n\n### Iris Flowers dataset k-Means clustering dashboard\n\n\u003cimg src=\"docs/content/img/IrisFLowerClassifier.png\" width=\"800\"\u003e\n\nThe full application is available at:\n\u003chttps://github.com/GenieFramework/Stipple-Demo-IrisClustering\u003e\n\n### More information\n\nWhile Stipple/StippleUI documentation is still evolving, you can find help and many small examples via docstrings of the functions.\n\n```julia\nhelp?\u003e btn\nsearch: btn Btn btngroup btndropdown q__btn q__btn__group q__btn__dropdown button Buttons onbutton SubString @onbutton bitstring\n\n  Stipple has a component called btn which is a button with a few extra useful features. For instance, it comes in two shapes:\n  rectangle (default) and round. It also has the material ripple effect baked in (which can be disabled).\n\n  The button component also comes with a spinner or loading effect. You would use this for times when app execution may cause a      \n  delay and you want to give the user some feedback about that delay. When used, the button will display a spinning animation as     \n  soon as the user clicks the button.\n\n  When not disabled or spinning, btn emits a @click event, as soon as it is clicked or tapped.\n\n  Examples\n  ≡≡≡≡≡≡≡≡≡≡\n\n  julia\u003e btn(\"Move Left\", color = \"primary\", icon = \"mail\", @click(\"press_btn = true\"))\n\n  julia\u003e btn(\"Go to Hello World\", color = \"red\", type = \"a\", href = \"hello\", icon = \"map\", iconright = \"send\")\n\n  julia\u003e btn(\"Connect to server!\", color=\"green\", textcolor=\"black\", @click(\"btnConnect=!btnConnect\"), [\n            tooltip(contentclass=\"bg-indigo\", contentstyle=\"font-size: 16px\",\n            style=\"offset: 10px 10px\",  \"Ports bounded to sockets!\")]\n         )\n\n  ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────  \n\n  Arguments\n  ≡≡≡≡≡≡≡≡≡≡≡\n\n  ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────  \n\n    1. Behavior\n       • loading::Bool - Put button into loading state (displays a spinner – can be overridden by using a 'loading'\n       slot)\n       • percentage::Union{Int, Float64} - Percentage (0.0 \u003c x \u003c 100.0); To be used along 'loading' prop; Display a\n       progress bar on the background ex. 23\n       • darkpercentage::Bool - Progress bar on the background should have dark color; To be used along with\n       'percentage' and 'loading' props\n\n    2. Content\n       • label::Union{String, Int} - The text that will be shown on the button ex. Button Label\n       • icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless\n       you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real\n       estate will still be used for it) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg\n       img:path/to/some_image.png\n       • iconright::String - Icon name following Quasar convention; Make sure you have the icon library installed\n       unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen\n       real estate will still be used for it) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg\n       img:path/to/some_image.png\n       • nocaps::Bool - Avoid turning label text into caps (which happens by default)\n       • nowrap::Bool - Avoid label text wrapping\n       • align::String - Label or content alignment default. center accepted values. left right center around between\n       evenly\n       • stack::Bool - Stack icon and label vertically instead of on same line (like it is by default)\n       • stretch::Bool - When used on flexbox parent, button will stretch to parent's height\n\n    3. General\n       • type::String - 1) Define the button native type attribute (submit, reset, button) or 2) render component with\n       \u003ca\u003e tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag\n       default. button ex. a submit reset button image/png href=\"https://some-site.net\" target=\"_blank\"\n       • tabindex::Union{Int, String} - Tabindex HTML attribute value\n\n    4. Navigation\n       • href::String - Native \u003ca\u003e link href attribute; Has priority over the 'to' and 'replace' props ex.\n       https://quasar.dev href=\"https://quasar.dev\" target=\"_blank\"\n       • target::String - Native \u003ca\u003e link target attribute; Use it only with 'to' or 'href' props ex. _blank _self\n       _parent _top\n\n    5. State\n       • loading::Bool - Put button into loading state (displays a spinner – can be overridden by using a 'loading'\n       slot)\n       • padding::String - Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or\n       standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set\n       • color::String - Color name for component from the Color Palette (https://quasar.dev/style/color-palette) eg.\n       primary teal-10\n       • textcolor::String - Overrides text color (if needed); Color name from the Color Palette\n       (https://quasar.dev/style/color-palette) eg. primary teal-10\n       • dense::Bool - Dense mode; occupies less space\n       • round::Bool - Makes a circle shaped button\n```\n\n## Acknowledgements\n\nStippleUI builds upon the excellent [Quasar Vue components](https://quasar.dev/vue-components) and the underlying [Vue.js](https://vuejs.org) Javascript framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGenieFramework%2FStippleUI.jl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGenieFramework%2FStippleUI.jl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGenieFramework%2FStippleUI.jl/lists"}