leptix_primitives 0.2.0

Accessible and unstyled components for Leptos
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

<p align="center" dir="auto">
    <img src="assets/logo.svg" alt="logo"/>
</p>

<h1 align="center" tabindex="-1" class="heading-element" dir="auto">Leptix Primitives</h1>

<p align="center">
  <a href="https://crates.io/crates/leptix_primitives" target="_blank"><img src="https://img.shields.io/crates/v/leptix_primitives"/></a>
  <a href="https://docs.rs/leptix_primitives" target="_blank"><img src="https://img.shields.io/docsrs/leptix_primitives/0.1.0"/></a>
</p>

<p align="center">
    Accessible and unstyled components for Leptos
</p>

<p align="center" dir="auto">
    <img src="assets/early_dev.svg" alt="This library is in early development."/>
</p>

<p align="center">
    <a href="https://upbolt.github.io/leptos_primitives">Live Demo</a>
</p>

<hr />

## Available Components


Note: Dialogs and components that require floating functionality are not yet implemented; tracking issues for them can be found [here](https://github.com/leptix/leptix/issues/4) and [here](https://github.com/leptix/leptix/issues/2) (respectively)

| Component Name |
| -------------- |
| Accordion      |
| AspectRatio    |
| Avatar         |
| Checkbox       |
| Collapsible    |
| Label          |
| Progress       |
| RadioGroup     |
| ScrollArea     |
| Separator      |
| Slider         |
| Switch         |
| Tabs           |
| Toggle         |
| ToggleGroup    |
| Toolbar        |

## Server-Side Rendering


Enable the `ssr` feature flag under your project's `features` section

```toml
[features]
csr = ...
hydrate = ...
ssr = [
  "leptix_primitives/ssr",

  # the rest of your leptos ssr dependencies ...
  "leptos/ssr",
  "dep:leptos_actix",
  ...
]
```

## Usage


These small snippets have been ported one-to-one from radix-ui's documentation site, so where you would have this in JavaScript:

```jsx
import React from "react";
import * as Checkbox from "@radix-ui/react-checkbox";
import { CheckIcon } from "@radix-ui/react-icons";

const CheckboxDemo = () => (
  <form>
    <div className="flex items-center">
      <Checkbox.Root

        className="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"

        defaultChecked

        id="c1"

      >
        <Checkbox.Indicator className="text-violet11">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label

        className="pl-[15px] text-[15px] leading-none text-white"

        htmlFor="c1"

      >
        Accept terms and conditions.
      </label>
    </div>
  </form>
);
```

You would have this in Rust using Leptos:

```rust
use leptos::*;
use leptix_primitives::checkbox::*;

#[component]

fn CheckboxDemo() -> impl IntoView {
  view! {
    <form>
      <div class="flex items-center">
        <CheckboxRoot
          default_checked=CheckedState::Checked(true)
          attr:class="shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]"
          attr:id="c1"
        >
          <CheckboxIndicator attr:class="text-violet11">
            <CheckIcon/>
          </CheckboxIndicator>
        </CheckboxRoot>

        <label class="pl-[15px] text-[15px] leading-none" for="c1">
          <span class="select-none">"Accept terms and conditions."</span>
        </label>
      </div>
    </form>
  }
}
```

## Examples


- [Trunk + TailwindCSS](https://github.com/leptix/leptix/tree/master/examples/csr-with-tailwind)

- [Actix + TailwindCSS](https://github.com/leptix/leptix/tree/master/examples/ssr-with-actix-tailwind)

- [Axum + TailwindCSS](https://github.com/leptix/leptix/tree/master/examples/ssr-with-axum-tailwind)

## Contributing


See [`CONTRIBUTING.md`](/CONTRIBUTING.md) for details on what you should know before you send in pull requests.