[ @sdxc/u/general ]

list-style

Applies list-style.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { listStyle } from "@sdxc/u/general";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.listStyle()`	`css({ listStyle: "none" })`
`u.listStyle("decimal")`	`css({ listStyle: "decimal" })`

Examples

Basic example

Use listStyle("disc") or listStyle("decimal") to draw bullets or numbers beside list items, and listStyle() to remove them:

listStyle()

Passport
Charger
Rain jacket

listStyle("disc")

Passport
Charger
Rain jacket

listStyle("decimal")

Passport
Charger
Rain jacket

<div mix={[grid(), gridTemplate({ columns: "repeat(3, auto)" }), gap(10)]}>
	<div>
		<p mix={[...]}>listStyle()</p>
		<ul mix={[listStyle()]}>
			<li>Passport</li>
			<li>Charger</li>
			<li>Rain jacket</li>
		</ul>
	</div>
	<div>
		<p mix={[...]}>listStyle("disc")</p>
		<ul mix={[listStyle("disc"), pis(5)]}>
			<li>Passport</li>
			<li>Charger</li>
			<li>Rain jacket</li>
		</ul>
	</div>
	<div>
		<p mix={[...]}>listStyle("decimal")</p>
		<ol mix={[listStyle("decimal"), pis(5)]}>
			<li>Passport</li>
			<li>Charger</li>
			<li>Rain jacket</li>
		</ol>
	</div>
</div>

Other markers

Pass any list-style value, like a counter style, a position or a quoted string to use as the marker:

listStyle("lower-roman")

Preface
Methods
Results

listStyle("square inside")

Preface
Methods
Results

listStyle('"✓ "')

Preface
Methods
Results

<div mix={[grid(), gridTemplate({ columns: "repeat(3, auto)" }), gap(10)]}>
	<div>
		<p mix={[...]}>listStyle("lower-roman")</p>
		<ol mix={[listStyle("lower-roman"), pis(6)]}>
			<li>Preface</li>
			<li>Methods</li>
			<li>Results</li>
		</ol>
	</div>
	<div>
		<p mix={[...]}>listStyle("square inside")</p>
		<ul mix={[listStyle("square inside"), ...]}>
			<li>Preface</li>
			<li>Methods</li>
			<li>Results</li>
		</ul>
	</div>
	<div>
		<p mix={[...]}>listStyle('"✓ "')</p>
		<ul mix={[listStyle('"✓ "'), pis(5)]}>
			<li>Preface</li>
			<li>Methods</li>
			<li>Results</li>
		</ul>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.listStyle())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.listStyle())

Signature

u.listStyle(value?: ListStyleValue)