leptix_primitives

Crates.ioleptix_primitives
lib.rsleptix_primitives
version0.1.0
sourcesrc
created_at2024-05-01 21:29:33.024043
updated_at2024-05-01 21:29:33.024043
descriptionAccessible and unstyled components for Leptos
homepagehttps://upbolt.github.io/leptos_primitives
repositoryhttps://github.com/leptix/leptix
max_upload_size
id1227200
size217,794
ARSON (Upbolt)

documentation

README

logo

Leptix Primitives

Accessible and unstyled components for Leptos

This library is in early development.

Live Demo


Available Components

Note: Dialogs and components that require floating functionality are not yet implemented; tracking issues for them can be found here and here (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

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

  # the rest of your leptos ssr dependencies ...
  "leptos/ssr",
  "dep:leptox_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:

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:

use leptos::*;
use leptix_primitives::components::checkbox::{CheckboxIndicator, CheckboxRoot, CheckedState};

#[component]
fn CheckboxDemo() -> impl IntoView {
  view! {
    <form>
      <div class="flex items-center">
        <CheckboxRoot
          default_checked=CheckedState::Checked(true).into()
          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

Contributing

See CONTRIBUTING.md for details on what you should know before you send in pull requests.

Commit count: 80

cargo fmt