MDietermann
0379969458
Fuenf Formular-Komponenten nach dem Muster von CustomLink: eigene Props-Struct plus Komponentenfunktion, controlled - der Zustand bleibt beim Aufrufer, die Komponente meldet Aenderungen per Callback. Bewusst native HTML-Elemente statt eigener Popups und Listen: <select> fuers Dropdown, <input type=checkbox|radio> fuer Multi- und Single-Select. Damit kommen Tastaturbedienung, Screenreader-Support und die Auswahldialoge auf Mobilgeraeten ohne eigenen Code. CustomMultiSelect liefert dem Callback die vollstaendige neue Auswahl statt nur der angeklickten Option, sonst muesste jede Aufrufstelle die Umschaltlogik nachbauen. Diese Logik steckt in toggled() und ist getestet.
Development
Your new bare-bones project includes minimal organization with a single main.rs file and a few assets.
project/
├─ assets/ # Any assets that are used by the app should be placed here
├─ src/
│ ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
Automatic Tailwind (Dioxus 0.7+)
As of Dioxus 0.7, there no longer is a need to manually install tailwind. Simply dx serve and you're good to go!
Automatic tailwind is supported by checking for a file called tailwind.css in your app's manifest directory (next to Cargo.toml). To customize the file, use the dioxus.toml:
[application]
tailwind_input = "my.css"
tailwind_output = "assets/out.css" # also customize the location of the out file!
Tailwind Manual Install
To use tailwind plugins or manually customize tailwind, you can can install the Tailwind CLI and use it directly.
Tailwind
- Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation/tailwind-cli
- Run the following command in the root of the project to start the Tailwind CSS compiler:
npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css --watch
Serving Your App
Run the following command in the root of your project to start developing with the default platform:
dx serve
To run for a different platform, use the --platform platform flag. E.g.
dx serve --platform desktop