https://github.com/leptix/leptix
Accessible components for Leptos
https://github.com/leptix/leptix
Last synced: about 2 months ago
JSON representation
Accessible components for Leptos
- Host: GitHub
- URL: https://github.com/leptix/leptix
- Owner: leptix
- Created: 2024-03-13T07:03:48.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-22T17:33:15.000Z (about 1 year ago)
- Last Synced: 2024-05-22T18:42:43.138Z (about 1 year ago)
- Language: Rust
- Homepage:
- Size: 242 KB
- Stars: 30
- Watchers: 4
- Forks: 3
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-leptos - leptix
README
Leptix
Accessible components for Leptos
## Installation
```
cargo add leptix_primitives
```
## 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",
...
]
```
## 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 |
## 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 = () => (
Accept terms and conditions.
);
```
You would have this in Rust using Leptos:
```rust
use leptos::*;
use leptix_primitives::checkbox::*;
#[component]
fn CheckboxDemo() -> impl IntoView {
view! {
"Accept terms and conditions."
}
}
```
## 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.