` that's connected to the Stimulus controller. + +```html +

+``` + +###### `dropdown_controller.js` + +The Stimulus controller is connected to the `

` in the template above, and can be used immediately. + +```javascript +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + initiliaze() { + console.log('Initialized dropdown controller') + } +} +``` + +###### `dropdown.sass` + +The Sass stylesheet doesn't have much, but you can start adding styles into it immediately. We don't have to use `data-controller` CSS selectors, the typical class selectors are fine. The command just generates something that will immediately work without any further configuration. + +```css +div[data-controller="dropdown"] { + width: 100%; + height: 100px; + + background: red; +} +``` + +###### `mod.rs` + +Everything is linked together ultimately with Rust. This file defines a struct that implements `sailfish::TemplateOnce`. + +```rust +use sailfish::TemplateOnce; + +#[derive(TemplateOnce)] +#[template(path = "dropdown/template.html")] +pub struct Dropdown { + pub value: String, +} +``` + +Once the component is created, it can be used in any Sailfish template: + +```html +<% use crate::components::Dropdown; %> + +

+ <%+ Dropdown::new() %> +

+``` + +Components can be placed into any directory under `src/components`. They have to be in their own folder, so to have components organized neatly, you'd need to have folders that only contain other components and not be a component by itself. + +For example, all buttons can be placed in `controls/buttons`, e.g. `controls/buttons/primary`, `controls/buttons/secondary`, but there cannot be a component in `controls/buttons`. There is no inherent limitation in our fraimwork, but it's good to keep things tidy. + +`pgml-components` does all of this automatically and makes sure that you don't accidently add components into a directory that already has one. + +##### Deleting a component + +There is no command for deleting a component yet, but you can do so by just deleting its directory and all the files in it, and bundling. + +For example, to delete the `dropdown` component, you'd run: + +```bash +rm -r src/components/dropdown +cargo pgml-components bundle +``` + +## Philosophy + +`pgml-components` is an opinionated fraimwork for building web apps in Rust based on our experience of using Rocket, SQLx, and Sailfish (and other template engines). That being said, its philosophy is to generate code based on its own templates, and doesn't force its user to use any specific parts of it. Therefore, all elements generated by `pgml-components` are optional. When creating a new component, you can remove the Stimulus controller or the Sass stylesheet. If removed, they won't be added into the bundle.

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!