mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Name classes instead of Astro props in preview card descriptions (#2995)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
6f64f3360b
commit
99b318ce16
13 files changed
+46
-41
No files matched your search
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Updated the preview card descriptions to name CSS classes and markup instead of Astro component props.
|
||||
@@ -25,7 +25,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Flush</CardTitle>
|
||||
<CardSubtitle>Add <code>flush</code> to remove the card border and rounded corners.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>accordion-flush</code> to remove the card border and rounded corners.</CardSubtitle>
|
||||
</CardBody>
|
||||
<Accordion type={['flush']} id="flush" />
|
||||
</Card>
|
||||
@@ -34,7 +34,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Tabs</CardTitle>
|
||||
<CardSubtitle>Add <code>tabs</code> for a tab-like header instead of the default style.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>accordion-tabs</code> for a tab-like header instead of the default style.</CardSubtitle>
|
||||
<Accordion type={['tabs']} id="tabs" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -43,7 +43,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Inverted</CardTitle>
|
||||
<CardSubtitle>Add <code>inverted</code> to flip the toggle icon to the start of the header.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>accordion-inverted</code> to flip the toggle icon to the start of the header.</CardSubtitle>
|
||||
<Accordion type={['inverted']} id="inverted" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Inverted with plus icon</CardTitle>
|
||||
<CardSubtitle>Combine <code>inverted</code> with a custom <code>toggleIcon</code>.</CardSubtitle>
|
||||
<CardSubtitle>Combine <code>accordion-inverted</code> with <code>accordion-button-toggle-plus</code> and a custom icon in the toggle.</CardSubtitle>
|
||||
<Accordion id="inverted-plus" type={['inverted']} toggleIcon="plus" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -61,7 +61,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With icons</CardTitle>
|
||||
<CardSubtitle>Add <code>showIcon</code> to show an icon next to each panel's title.</CardSubtitle>
|
||||
<CardSubtitle>Add an <code>accordion-button-icon</code> next to each panel's title.</CardSubtitle>
|
||||
<Accordion id="icons" showIcon />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -28,7 +28,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With action</CardTitle>
|
||||
<CardSubtitle>Add a link with the <code>action</code> prop to give users something to do next.</CardSubtitle>
|
||||
<CardSubtitle>Add an <code>alert-action</code> link to give users something to do next.</CardSubtitle>
|
||||
<Alert showClose action="Link" color="danger" title="An error occurred!" />
|
||||
<Alert showClose action="Link" color="warning" title="Some information is missing!" />
|
||||
<Alert showClose action="Link" color="success" title="Completed successfully!" />
|
||||
@@ -40,7 +40,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Dismissible</CardTitle>
|
||||
<CardSubtitle>Add <code>showClose</code> to let users close the alert.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>alert-dismissible</code> and a <code>btn-close</code> button to let users close the alert.</CardSubtitle>
|
||||
<Alert showClose color="danger" title="An error occurred!" />
|
||||
<Alert showClose color="warning" title="Some information is missing!" />
|
||||
<Alert showClose color="success" title="Completed successfully!" />
|
||||
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With a description</CardTitle>
|
||||
<CardSubtitle>Add a <code>description</code> or a <code>list</code> when the title alone isn't enough context.</CardSubtitle>
|
||||
<CardSubtitle>Add an <code>alert-description</code> or an <code>alert-list</code> when the title alone isn't enough context.</CardSubtitle>
|
||||
<Alert showClose color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
|
||||
<Alert showClose color="warning" title="Some information is missing!" description="This is a custom alert box with a description." />
|
||||
<Alert showClose color="success" title="Completed successfully!" description="This is a custom alert box with a description." />
|
||||
@@ -64,7 +64,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Important</CardTitle>
|
||||
<CardSubtitle>Add <code>important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>alert-important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
|
||||
<Alert showClose variant="important" color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
|
||||
<Alert showClose variant="important" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
|
||||
<Alert showClose variant="important" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
|
||||
@@ -78,7 +78,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Minor</CardTitle>
|
||||
<CardSubtitle>Add <code>minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>alert-minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
|
||||
<Alert showClose variant="minor" color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
|
||||
<Alert showClose variant="minor" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
|
||||
<Alert showClose variant="minor" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
|
||||
|
||||
@@ -42,7 +42,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Avatar with icon</CardTitle>
|
||||
<CardSubtitle>Use an icon instead of a photo with the <code>icon</code> prop.</CardSubtitle>
|
||||
<CardSubtitle>Put an icon inside the <code>avatar</code> instead of a photo.</CardSubtitle>
|
||||
<div class="avatar-list">
|
||||
{iconIcons.map((icon) => <Avatar icon={icon} />)}
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Simple avatar</CardTitle>
|
||||
<CardSubtitle>Pass a <code>person</code> object to render their photo.</CardSubtitle>
|
||||
<CardSubtitle>Show a photo by setting it as the <code>background-image</code> of the avatar.</CardSubtitle>
|
||||
<div class="avatar-list">
|
||||
{people8.map((person) => <Avatar person={person} />)}
|
||||
</div>
|
||||
@@ -75,7 +75,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Avatar placeholder</CardTitle>
|
||||
<CardSubtitle>Fall back to initials with the <code>placeholder</code> prop when there's no photo.</CardSubtitle>
|
||||
<CardSubtitle>Fall back to initials as the avatar text when there's no photo.</CardSubtitle>
|
||||
<div class="avatar-list">
|
||||
{people8.map((person) => <Avatar placeholder={firstLetters(person.full_name ?? '')} />)}
|
||||
</div>
|
||||
@@ -99,7 +99,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Avatar sizes</CardTitle>
|
||||
<CardSubtitle>Six sizes from <code>xxs</code> to <code>xl</code>, for both photos and placeholders.</CardSubtitle>
|
||||
<CardSubtitle>Six sizes from <code>avatar-xxs</code> to <code>avatar-xl</code>, for both photos and placeholders.</CardSubtitle>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-list">
|
||||
@@ -160,7 +160,7 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Avatar statuses</CardTitle>
|
||||
<CardSubtitle>Add a <code>status</code> dot to show online, away, or busy state.</CardSubtitle>
|
||||
<CardSubtitle>Add a <code>badge</code> inside the avatar for an online, away, or busy status dot.</CardSubtitle>
|
||||
{statusColors.map((color, i) => <Avatar person={personById(i + 1)} class="rounded-circle" status={color} />)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -83,7 +83,7 @@ const sizes = ['sm', 'md', 'lg', 'xl'] as const
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Sizes</CardTitle>
|
||||
<CardSubtitle>Scale a button from <code>sm</code> to <code>xl</code> without changing its icon layout.</CardSubtitle>
|
||||
<CardSubtitle>Scale a button from <code>btn-sm</code> to <code>btn-xl</code> without changing its icon layout.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
|
||||
@@ -16,7 +16,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Two y-axes</CardTitle>
|
||||
<CardSubtitle>Plot values with different units together. Bind each axis to a serie with <code>seriesName</code> and move the second one to the right with <code>opposite</code>.</CardSubtitle>
|
||||
<CardSubtitle>Plot values with different units together. Bind each axis to a series with the <code>yaxis.seriesName</code> chart option and move the second one to the right with <code>opposite</code>.</CardSubtitle>
|
||||
<Chart chartId="revenue-vs-orders" height={16} label="Revenue in dollars and order count per month" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -16,7 +16,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Numbered</CardTitle>
|
||||
<CardSubtitle>Page numbers, with or without <code>text</code> Prev/Next labels.</CardSubtitle>
|
||||
<CardSubtitle>Page numbers, with or without Prev/Next text labels (<code>page-text</code>).</CardSubtitle>
|
||||
<Pagination count={5} activeItem={3} />
|
||||
<Pagination count={5} activeItem={3} text />
|
||||
</CardBody>
|
||||
@@ -26,7 +26,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With descriptions</CardTitle>
|
||||
<CardSubtitle>Add <code>prevDescription</code>/<code>nextDescription</code> to name the adjacent page.</CardSubtitle>
|
||||
<CardSubtitle>Name the adjacent page with <code>page-item-subtitle</code> for the direction and <code>page-item-title</code> for the page name.</CardSubtitle>
|
||||
<Pagination count={0} prevDescription="Getting started" nextDescription="Breadcrumbs" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -59,7 +59,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Pattern sizes</CardTitle>
|
||||
<CardSubtitle>Scale the pattern from <code>sm</code> to <code>xl</code>.</CardSubtitle>
|
||||
<CardSubtitle>Scale the pattern from <code>bg-pattern-sm</code> to <code>bg-pattern-xl</code>.</CardSubtitle>
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{
|
||||
patternSizes.map((size) => (
|
||||
@@ -77,7 +77,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Pattern opacity</CardTitle>
|
||||
<CardSubtitle>Scale the pattern strength with <code>lighter</code>, <code>light</code>, <code>dark</code>, or <code>darker</code>.</CardSubtitle>
|
||||
<CardSubtitle>Scale the pattern strength with the <code>bg-pattern-opacity-*</code> utilities.</CardSubtitle>
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{
|
||||
patternOpacities.map((opacity) => (
|
||||
|
||||
@@ -34,7 +34,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With value</CardTitle>
|
||||
<CardSubtitle>Show the exact percentage inside a larger bar with <code>showValue</code>.</CardSubtitle>
|
||||
<CardSubtitle>Show the exact percentage as the <code>progress-bar</code> text inside a larger bar.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Progress value={10} showValue size="lg" />
|
||||
<Progress value={20} showValue size="lg" />
|
||||
@@ -61,7 +61,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Sizes</CardTitle>
|
||||
<CardSubtitle>Scale a bar from <code>sm</code> to <code>xl</code>.</CardSubtitle>
|
||||
<CardSubtitle>Scale a bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Progress value={20} size="sm" />
|
||||
<Progress value={40} />
|
||||
@@ -75,7 +75,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Indeterminate</CardTitle>
|
||||
<CardSubtitle>Animate a bar with no known end point using <code>indeterminate</code>.</CardSubtitle>
|
||||
<CardSubtitle>Animate a bar with no known end point with <code>progress-bar-indeterminate</code>.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Progress indeterminate />
|
||||
</div>
|
||||
@@ -98,7 +98,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Striped</CardTitle>
|
||||
<CardSubtitle>Add diagonal stripes with <code>striped</code> for a textured look.</CardSubtitle>
|
||||
<CardSubtitle>Add diagonal stripes with <code>progress-bar-striped</code> for a textured look.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Progress color="blue" value={20} striped />
|
||||
<Progress color="green" value={40} striped />
|
||||
@@ -112,7 +112,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Animated</CardTitle>
|
||||
<CardSubtitle>Combine <code>striped</code> with <code>animated</code> to keep the stripes moving.</CardSubtitle>
|
||||
<CardSubtitle>Combine <code>progress-bar-striped</code> with <code>progress-bar-animated</code> to keep the stripes moving.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Progress value={20} striped animated />
|
||||
<Progress value={40} color="green" striped animated />
|
||||
@@ -241,7 +241,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle> Progress Description Sizes </CardTitle>
|
||||
<CardSubtitle>Scale the labeled progress bar from <code>sm</code> to <code>xl</code>.</CardSubtitle>
|
||||
<CardSubtitle>Scale the labeled progress bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<ProgressDescription label="Small progress" value={60} size="sm" color="blue" />
|
||||
<ProgressDescription label="Default progress" value={70} color="green" />
|
||||
|
||||
@@ -16,7 +16,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Basic</CardTitle>
|
||||
<CardSubtitle>A list of <code>items</code> is enough for a plain control.</CardSubtitle>
|
||||
<CardSubtitle>A <code>nav-segmented</code> with text <code>nav-link</code> items is enough for a plain control.</CardSubtitle>
|
||||
<NavSegmented items={['1', '2', '3', '4']} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -34,7 +34,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Icons only</CardTitle>
|
||||
<CardSubtitle>Pass <code>icons</code> without <code>items</code> for an icon-only control.</CardSubtitle>
|
||||
<CardSubtitle>Put only an icon in each <code>nav-link</code> for an icon-only control.</CardSubtitle>
|
||||
<NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -43,7 +43,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With icons</CardTitle>
|
||||
<CardSubtitle>Combine <code>items</code> and <code>icons</code> to label each option.</CardSubtitle>
|
||||
<CardSubtitle>Combine an icon and text in each <code>nav-link</code> to label each option.</CardSubtitle>
|
||||
<NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Vertical</CardTitle>
|
||||
<CardSubtitle>Add <code>vertical</code> to stack the options in a column.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>nav-segmented-vertical</code> to stack the options in a column.</CardSubtitle>
|
||||
<NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} vertical />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -61,7 +61,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Vertical with disabled items</CardTitle>
|
||||
<CardSubtitle>Pass indexes to <code>disabled</code> to make specific options unselectable.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>disabled</code> to a <code>nav-link</code> to make that option unselectable.</CardSubtitle>
|
||||
<NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} vertical disabled={[3]} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -88,7 +88,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Independent group</CardTitle>
|
||||
<CardSubtitle>Set a unique <code>name</code> so this control doesn't share selection state with others using the same items.</CardSubtitle>
|
||||
<CardSubtitle>Use radio inputs with a unique <code>name</code> so this control doesn't share selection state with others using the same items.</CardSubtitle>
|
||||
<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="checkbox" />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -97,7 +97,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Full width</CardTitle>
|
||||
<CardSubtitle>Add <code>block</code> to stretch the control across its container.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>w-100</code> to stretch the control across its container.</CardSubtitle>
|
||||
<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} block={true} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -118,7 +118,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Sizes</CardTitle>
|
||||
<CardSubtitle>Set <code>size</code> to <code>sm</code> or <code>lg</code> — with text, icons, or both.</CardSubtitle>
|
||||
<CardSubtitle>Add <code>nav-sm</code> or <code>nav-lg</code> to change the size — with text, icons, or both.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="sm" /></div>
|
||||
<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} /></div>
|
||||
|
||||
@@ -25,7 +25,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Icons</CardTitle>
|
||||
<CardSubtitle>Swap the star for any icon with the <code>icon</code> prop.</CardSubtitle>
|
||||
<CardSubtitle>Swap the star for any icon by passing a different SVG to the <code>stars</code> option.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Rating id="icon-star" value={4} />
|
||||
<Rating id="icon-heart" icon="heart" value={4} color="red" />
|
||||
@@ -39,7 +39,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Sizes</CardTitle>
|
||||
<CardSubtitle>Match the rating to surrounding text with <code>size</code>.</CardSubtitle>
|
||||
<CardSubtitle>Match the rating to surrounding text with an <code>icon-sm</code> or <code>icon-lg</code> class on the star.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Rating id="size-sm" value={3} size="sm" />
|
||||
<Rating id="size-md" value={3} size="md" />
|
||||
@@ -52,7 +52,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Colors</CardTitle>
|
||||
<CardSubtitle>Set <code>color</code> to any theme or extended color to match the rest of the page.</CardSubtitle>
|
||||
<CardSubtitle>Color the star with a <code>text-*</code> class, any theme or extended color, to match the rest of the page.</CardSubtitle>
|
||||
<div class="space-y">
|
||||
<Rating id="color-default" value={3} />
|
||||
<Rating id="color-primary" color="primary" value={3} />
|
||||
|
||||
@@ -35,7 +35,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<CardHeader>
|
||||
<div>
|
||||
<CardTitle>Striped rows</CardTitle>
|
||||
<CardSubtitle>Alternate row shading with <code>striped</code> to make wide tables easier to scan.</CardSubtitle>
|
||||
<CardSubtitle>Alternate row shading with <code>table-striped</code> to make wide tables easier to scan.</CardSubtitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Table card={true} striped={true} offset={5} />
|
||||
|
||||
@@ -101,7 +101,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Selectable tags</CardTitle>
|
||||
<CardSubtitle>Add <code>checkbox</code> to let users toggle a tag on and off.</CardSubtitle>
|
||||
<CardSubtitle>Add a <code>tag-check</code> checkbox to let users toggle a tag on and off.</CardSubtitle>
|
||||
<TagList>
|
||||
{range(1, 6).map((i) => <Tag text={`Label ${i}`} checkbox={true} />)}
|
||||
{range(7, 12).map((i) => <Tag text={`Label ${i}`} checkbox={true} checked={true} />)}
|
||||
@@ -114,7 +114,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Tags with badge</CardTitle>
|
||||
<CardSubtitle>Add a <code>badge</code> count to the end of the tag.</CardSubtitle>
|
||||
<CardSubtitle>Add a <code>tag-badge</code> count to the end of the tag.</CardSubtitle>
|
||||
<TagList>
|
||||
{range(1, 12).map((i) => <Tag text="Label" badge={i} />)}
|
||||
</TagList>
|
||||
|
||||
Reference in new issue
Block a user