steid

steid/src/components/label.rs

1.4 KBCode·Blame·Raw

af126c7feat: tailwind theme and the first components25d	1	use topcoat::{
	2	Result,
	3	view::{Attributes, View, class, component, view},
	4	};
	5
	6	/// The classes for the [`label`] element.
	7	///
	8	/// The label lays out its content in a centered row, so an inline icon or a
	9	/// wrapped control lines up with the text. It dims and stops receiving
	10	/// pointer events when its control is disabled: a wrapped control is matched
	11	/// with `has-[:disabled]`, a preceding sibling control marked `peer` with
	12	/// `peer-disabled`.
	13	const LABEL: &str = "flex items-center gap-2 text-sm leading-none font-medium select-none \
	14	peer-disabled:pointer-events-none peer-disabled:opacity-50 \
	15	has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
	16
	17	/// A caption for a form control, rendered as a `<label>`.
	18	///
	19	/// Associate it with a control either by wrapping the control or by pointing
	20	/// a `for` attribute at the control's `id`. The `attrs` (such as `class` or
	21	/// `for`) are forwarded to the underlying `<label>`; a `class` among them is
	22	/// appended to the computed classes. Child nodes become the label's content.
	23	///
	24	/// ```ignore
	25	/// view! {
	26	/// <div class="flex flex-col gap-2">
	27	/// label(attrs: attributes! { for="email" }, "Email")
	28	/// input(attrs: attributes! { id="email" type="email" })
	29	/// </div>
	30	/// }
	31	/// ```
	32	#[component]
	33	pub async fn label(#[default] mut attrs: Attributes, #[default] child: View) -> Result {
	34	view! { <label class=(class!(LABEL, attrs.remove("class"))) (attrs)>(child)</label> }
	35	}