|
1 | | -# via-plugin-picocss |
2 | | -Enables styles from PicoCSS globally in a Via application. |
3 | | - |
| 1 | +# ✨ PicoCSS Plugin |
4 | 2 | The PicoCSS plugin integrates seamlessly with Via to provide elegant, responsive, and lightweight styling for your components without writing any CSS manually. |
5 | 3 |
|
6 | | -See PicoCSS [Documentation](https://picocss.com/docs), to learn more about PicoCSS. |
| 4 | +## Example |
| 5 | +```go |
| 6 | +package main |
| 7 | + |
| 8 | +import ( |
| 9 | + "github.com/go-via/via" |
| 10 | + "github.com/go-via/via-plugin-picocss/picocss" |
| 11 | + "github.com/go-via/via/h" |
| 12 | +) |
| 13 | + |
| 14 | +type Counter struct{ Count int } |
| 15 | + |
| 16 | +func main() { |
| 17 | + v := via.New() |
| 18 | + |
| 19 | + v.Config(via.Options{ |
| 20 | + DocumentTitle: "Via Counter", |
| 21 | + Plugins: []via.Plugin{picocss.Default}, |
| 22 | + }) |
| 23 | + |
| 24 | + v.Page("/", func(c *via.Context) { |
| 25 | + data := Counter{Count: 0} |
| 26 | + step := c.Signal(1) |
| 27 | + |
| 28 | + increment := c.Action(func() { |
| 29 | + data.Count += step.Int() |
| 30 | + c.Sync() |
| 31 | + }) |
| 32 | + |
| 33 | + c.View(func() h.H { |
| 34 | + return h.Main(h.Class("container"), h.Br(), |
| 35 | + h.H1(h.Text("⚡ Via Counter w/ PicoCSS Plugin")), |
| 36 | + h.Hr(), |
| 37 | + h.Div( |
| 38 | + h.H2(h.Strong(h.Text("Count - ")), h.Textf("%d", data.Count)), |
| 39 | + h.H5(h.Strong(h.Text("Step - ")), h.Span(step.Text())), |
| 40 | + h.Div(h.Role("group"), |
| 41 | + h.Input(h.Type("number"), step.Bind()), |
| 42 | + h.Button(h.Text("Increment"), increment.OnClick()), |
| 43 | + ), |
| 44 | + ), |
| 45 | + ) |
| 46 | + }) |
| 47 | + }) |
| 48 | + |
| 49 | + v.Start() |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +## Docs |
| 54 | +See PicoCSS [docs](https://picocss.com/docs) to learn how to use it. |
0 commit comments