mirror of
https://github.com/tabler/tabler.git
synced 2026-10-20 14:54:31 +04:00
Move Shape to the core CSS bundle (#3305)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
12c045f3e7
commit
28c24bf674
10 files changed
+399
-10
No files matched your search
@@ -14,7 +14,7 @@
|
||||
# against: 1.6.1
|
||||
#
|
||||
# Decided by codecalm on 2026-10-06 (#3278): Pricing moves from tabler-marketing.css
|
||||
# to tabler.css. See the 1.7 upgrade guide, "Pricing is in the core bundle".
|
||||
# to tabler.css. See the 1.7 upgrade guide, "Pricing and Shape are in the core bundle".
|
||||
css:tabler-marketing.css:--tblr-gray-200 # accepted: Pricing ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-shadow-card # accepted: Pricing ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.pricing # accepted: Pricing ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
@@ -27,3 +27,68 @@ css:tabler-marketing.css:.pricing-price-currency # accepted: Pricing ships in ta
|
||||
css:tabler-marketing.css:.pricing-price-description # accepted: Pricing ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.pricing-title # accepted: Pricing ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
file:scss/marketing/_pricing.scss # accepted: Pricing ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
#
|
||||
# Decided by codecalm on 2026-10-08 (#3294): Shape moves from tabler-marketing.css
|
||||
# to tabler.css. See the 1.7 upgrade guide, "Pricing and Shape are in the core bundle".
|
||||
css:tabler-marketing.css:--tblr-azure # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-azure-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-black # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-black-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-blue # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-blue-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-cyan # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-cyan-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-gray # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-gray-dark # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-gray-dark-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-gray-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-green # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-green-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-indigo # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-indigo-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-lime # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-lime-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-orange # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-orange-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-pink # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-pink-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-primary-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-purple # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-purple-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-red # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-red-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-shape-border-radius # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-shape-icon-size # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-shape-size # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-teal # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-teal-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-white # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-white-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-yellow # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:--tblr-yellow-lt # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.icon # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-2xl # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-azure # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-black # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-blue # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-cyan # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-gray # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-gray-dark # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-green # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-indigo # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-lg # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-lime # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-md # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-orange # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-pink # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-purple # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-red # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-sm # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-teal # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-white # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-xl # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-xs # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-xxs # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
css:tabler-marketing.css:.shape-yellow # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
file:scss/marketing/_shape.scss # accepted: Shape ships in tabler.css since 1.7, which every marketing page loads anyway
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
---
|
||||
|
||||
Moved the `.shape` component from `tabler-marketing.css` to the core `tabler.css` bundle.
|
||||
@@ -84,6 +84,7 @@
|
||||
@forward 'ui/pagination';
|
||||
@forward 'ui/popovers';
|
||||
@forward 'ui/pricing';
|
||||
@forward 'ui/shape';
|
||||
@forward 'ui/progress';
|
||||
@forward 'ui/ribbons';
|
||||
@forward 'ui/markdown';
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
@forward 'marketing/browser';
|
||||
@forward 'marketing/sections';
|
||||
@forward 'marketing/filters';
|
||||
@forward 'marketing/shape';
|
||||
|
||||
// This bundle uses its own utilities map instead of the global one, so the
|
||||
// utilities API is emitted via the parameterized mixin (last, as before).
|
||||
|
||||
@@ -3,9 +3,11 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.shape {
|
||||
// scss-docs-start shape-css-vars
|
||||
--shape-size: #{$avatar-size};
|
||||
--shape-icon-size: #{$avatar-icon-size};
|
||||
--shape-border-radius: 35%;
|
||||
// scss-docs-end shape-css-vars
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
title: Shape
|
||||
summary: A tinted, rounded square that holds one icon, for feature lists and other places where an icon needs a background.
|
||||
description: Put an icon on a soft, tinted background with the shape component. Pick a size and a color, or set the corner radius with a CSS variable.
|
||||
related: [/ui/components/avatar, /ui/components/icon]
|
||||
source: core/scss/ui/_shape.scss
|
||||
css-vars: shape
|
||||
added-in: '1.7.0'
|
||||
classnames:
|
||||
component:
|
||||
- class: shape
|
||||
desc: Container element, an inline rounded square in the primary color
|
||||
color:
|
||||
- class: shape-{color}
|
||||
desc: Any palette color, for example shape-red or shape-teal
|
||||
size:
|
||||
- class: shape-{size}
|
||||
desc: Avatar sizes from shape-xxs to shape-2xl
|
||||
---
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
A shape is a `.shape` element with one icon inside. It is a square with soft corners, filled with a light tint of the primary color. The icon takes the stronger primary color. The square is the same size as an [avatar](/ui/components/avatar), so the two line up in a list.
|
||||
|
||||
<Example centered>
|
||||
<span class="shape"><Icon name="devices" /></span>
|
||||
</Example>
|
||||
|
||||
## Sizes
|
||||
|
||||
Add `.shape-{size}` to change the size. The sizes are the avatar sizes, from `xxs` to `2xl`. The icon grows with the square.
|
||||
|
||||
<Example centered>
|
||||
<div class="d-flex align-items-end gap-3">
|
||||
<span class="shape shape-xxs"><Icon name="star" /></span>
|
||||
<span class="shape shape-xs"><Icon name="star" /></span>
|
||||
<span class="shape shape-sm"><Icon name="star" /></span>
|
||||
<span class="shape shape-md"><Icon name="star" /></span>
|
||||
<span class="shape shape-lg"><Icon name="star" /></span>
|
||||
<span class="shape shape-xl"><Icon name="star" /></span>
|
||||
<span class="shape shape-2xl"><Icon name="star" /></span>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Colors
|
||||
|
||||
Add `.shape-{color}` to use another palette color. The square takes the light tint of the color and the icon takes the full color.
|
||||
|
||||
<Example centered>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<span class="shape shape-blue"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-azure"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-indigo"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-purple"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-pink"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-red"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-orange"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-yellow"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-lime"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-green"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-teal"><Icon name="brand-bootstrap" /></span>
|
||||
<span class="shape shape-cyan"><Icon name="brand-bootstrap" /></span>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Corner radius
|
||||
|
||||
The corners are rounded by `35%` of the size. Set `--tblr-shape-border-radius` on the shape to change this: `50%` makes a circle, `0` makes a sharp square.
|
||||
|
||||
<Example centered>
|
||||
<div class="d-flex gap-3">
|
||||
<span class="shape shape-md" style="--tblr-shape-border-radius: 0"><Icon name="palette" /></span>
|
||||
<span class="shape shape-md"><Icon name="palette" /></span>
|
||||
<span class="shape shape-md" style="--tblr-shape-border-radius: 50%"><Icon name="palette" /></span>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## In a feature list
|
||||
|
||||
Shapes mark the items of a feature list. Put one above or next to each heading, with the same size and color on every item.
|
||||
|
||||
<Example>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<span class="shape shape-md mb-3"><Icon name="devices" /></span>
|
||||
<h3>Mobile-optimized</h3>
|
||||
<p class="text-secondary">Every page works on any screen size.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="shape shape-md mb-3"><Icon name="mailbox" /></span>
|
||||
<h3>Tested email clients</h3>
|
||||
<p class="text-secondary">Checked in more than 90 email clients.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="shape shape-md mb-3"><Icon name="palette" /></span>
|
||||
<h3>Minimal design</h3>
|
||||
<p class="text-secondary">Clean layouts based on Bootstrap.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- A shape is decoration. The icon inside renders with `aria-hidden="true"`, so the shape adds nothing to the accessibility tree.
|
||||
- Put the meaning in the text next to the shape, not in the icon or the color.
|
||||
@@ -1,15 +1,15 @@
|
||||
---
|
||||
title: Upgrade to 1.7
|
||||
summary: Move a project from Tabler 1.6 to 1.7. The Pricing component moved from the marketing bundle into the core bundle, so a page that loaded only the marketing stylesheet for it needs one more link.
|
||||
summary: Move a project from Tabler 1.6 to 1.7. The Pricing and Shape components moved from the marketing bundle into the core bundle, so a page that loaded only the marketing stylesheet for them needs one more link.
|
||||
description: Upgrade guide from Tabler 1.6 to 1.7 with the components that moved from the marketing bundle into the core bundle, and what to change in your HTML and Sass imports.
|
||||
added-in: '1.7.0'
|
||||
order: 1
|
||||
related: [/ui/getting-started/upgrade/1-6, /ui/getting-started/customize]
|
||||
---
|
||||
|
||||
Tabler 1.7 is a small update. Every class, custom property, Sass variable and function from 1.6 is still there, and the only change that can touch your code is where one component ships: Pricing moved from `tabler-marketing.css` into the core `tabler.css`. A page that loads both files, as every marketing page does, needs no change.
|
||||
Tabler 1.7 is a small update. Every class, custom property, Sass variable and function from 1.6 is still there, and the only change that can touch your code is where two components ship: Pricing and Shape moved from `tabler-marketing.css` into the core `tabler.css`. A page that loads both files, as every marketing page does, needs no change.
|
||||
|
||||
Check [Pricing is in the core bundle](#pricing-is-in-the-core-bundle) if you load `tabler-marketing.css` on its own or import its Sass partials one by one.
|
||||
Check [Pricing and Shape are in the core bundle](#pricing-and-shape-are-in-the-core-bundle) if you load `tabler-marketing.css` on its own or import its Sass partials one by one.
|
||||
|
||||
If you're coming from 1.5 or older, do the [1.6 upgrade](/ui/getting-started/upgrade/1-6) first.
|
||||
|
||||
@@ -18,8 +18,8 @@ If you're coming from 1.5 or older, do the [1.6 upgrade](/ui/getting-started/upg
|
||||
If you…|You need to…
|
||||
---|---
|
||||
Load `tabler.css` and `tabler-marketing.css` together|Nothing
|
||||
Load `tabler-marketing.css` without `tabler.css` on a page that uses `.pricing`|Add `tabler.css`, see [Pricing is in the core bundle](#pricing-is-in-the-core-bundle)
|
||||
Import `scss/marketing/pricing` in your own Sass|Import `scss/ui/pricing`, see [Sass changes](#sass-changes)
|
||||
Load `tabler-marketing.css` without `tabler.css` on a page that uses `.pricing` or `.shape`|Add `tabler.css`, see [Pricing and Shape are in the core bundle](#pricing-and-shape-are-in-the-core-bundle)
|
||||
Import `scss/marketing/pricing` or `scss/marketing/shape` in your own Sass|Import `scss/ui/pricing` or `scss/ui/shape`, see [Sass changes](#sass-changes)
|
||||
|
||||
## Update the package
|
||||
|
||||
@@ -39,11 +39,11 @@ Or update the CDN links:
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.7.0/dist/js/tabler.min.js"></script>
|
||||
```
|
||||
|
||||
## Pricing is in the core bundle
|
||||
## Pricing and Shape are in the core bundle
|
||||
|
||||
The [Pricing](/ui/components/pricing) component, `.pricing` and its `.pricing-*` parts, used to ship only in `tabler-marketing.css`. It's part of `tabler.css` now, so a dashboard can show plan cards without the marketing stylesheet. The class names and the markup are the same.
|
||||
The [Pricing](/ui/components/pricing) component, `.pricing` and its `.pricing-*` parts, and the [Shape](/ui/components/shape) component, `.shape` with its size and color modifiers, used to ship only in `tabler-marketing.css`. They're part of `tabler.css` now, so a dashboard can show plan cards or an icon in a shape without the marketing stylesheet. The class names and the markup are the same.
|
||||
|
||||
`tabler-marketing.css` no longer contains the component. A page that loads both stylesheets keeps working. A page that loaded only `tabler-marketing.css` for the pricing cards has to add `tabler.css`, which it needs for the buttons and badges inside the cards anyway:
|
||||
`tabler-marketing.css` no longer contains the two components. A page that loads both stylesheets keeps working. A page that loaded only `tabler-marketing.css` for them has to add `tabler.css`, which it needs for the buttons, badges and icons inside them anyway:
|
||||
|
||||
```diff
|
||||
- <link rel="stylesheet" href="/dist/css/tabler-marketing.min.css" />
|
||||
@@ -62,10 +62,13 @@ Only relevant if you compile the `scss/` sources yourself and import partials on
|
||||
Partial in 1.6|Partial in 1.7
|
||||
---|---
|
||||
`scss/marketing/_pricing.scss`|`scss/ui/_pricing.scss`
|
||||
`scss/marketing/_shape.scss`|`scss/ui/_shape.scss`
|
||||
|
||||
```diff
|
||||
- @use '@tabler/core/scss/marketing/pricing';
|
||||
- @use '@tabler/core/scss/marketing/shape';
|
||||
+ @use '@tabler/core/scss/ui/pricing';
|
||||
+ @use '@tabler/core/scss/ui/shape';
|
||||
```
|
||||
|
||||
## What is new in 1.7
|
||||
@@ -73,5 +76,6 @@ Partial in 1.6|Partial in 1.7
|
||||
Besides the changes above, 1.7 adds:
|
||||
|
||||
- [Pricing](/ui/components/pricing) as a documented core component, with a class reference.
|
||||
- [Shape](/ui/components/shape), a rounded container for an icon in several sizes and every theme color, with its CSS variables documented.
|
||||
|
||||
See the [changelog](https://github.com/tabler/tabler/releases) for the full list.
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
||||
import Card from '@ui/Card.astro'
|
||||
import CardBody from '@ui/CardBody.astro'
|
||||
import CardTitle from '@ui/CardTitle.astro'
|
||||
import CardSubtitle from '@ui/CardSubtitle.astro'
|
||||
import DocsLink from '@ui/DocsLink.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import { avatarSizes, extraColors } from '@shared/lib/tokens'
|
||||
|
||||
const icons = ['devices', 'mailbox', 'palette', 'tools', 'brand-bootstrap', 'paint', 'rocket', 'shield-check']
|
||||
|
||||
const radii = [
|
||||
{ label: 'Square', value: '0' },
|
||||
{ label: 'Default', value: undefined },
|
||||
{ label: 'Circle', value: '50%' },
|
||||
]
|
||||
|
||||
const features = [
|
||||
{ icon: 'devices', title: 'Mobile-optimized', text: 'Every page works on any screen size, from a phone to a wide monitor.' },
|
||||
{ icon: 'mailbox', title: 'Tested email clients', text: 'Checked in more than 90 email clients and devices.' },
|
||||
{ icon: 'palette', title: 'Minimal design', text: 'Clean layouts based on Bootstrap and Material Design principles.' },
|
||||
]
|
||||
|
||||
const featureList = [
|
||||
{ icon: 'tools', color: 'blue', title: 'Easy to customize', text: 'Change colors, fonts and spacing with Sass or CSS variables.' },
|
||||
{ icon: 'brand-bootstrap', color: 'purple', title: 'Built on Bootstrap', text: 'Every Bootstrap component works out of the box.' },
|
||||
{ icon: 'paint', color: 'green', title: 'Dark mode', text: 'One attribute switches the whole interface to a dark theme.' },
|
||||
]
|
||||
---
|
||||
|
||||
<DefaultLayout title="Shape" pageMenu="base.shape" description="Shapes put an icon on a soft, tinted square, for feature lists and other places where an icon needs a background.">
|
||||
<DocsLink slot="page-header-actions" path="/ui/components/shape" />
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Sizes</CardTitle>
|
||||
<CardSubtitle>Add <code>.shape-{size}</code>, from <code>xxs</code> to <code>2xl</code>, the same sizes as an avatar.</CardSubtitle>
|
||||
<div class="d-flex flex-wrap align-items-end gap-3">
|
||||
{
|
||||
avatarSizes.map((size) => (
|
||||
<span class:list={['shape', `shape-${size}`]}>
|
||||
<Icon name="star" />
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Colors</CardTitle>
|
||||
<CardSubtitle>Add <code>.shape-{color}</code> to use another palette color.</CardSubtitle>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<span class="shape"><Icon name="brand-bootstrap" /></span>
|
||||
{
|
||||
extraColors.map((color) => (
|
||||
<span class:list={['shape', `shape-${color}`]}>
|
||||
<Icon name="brand-bootstrap" />
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>With icons</CardTitle>
|
||||
<CardSubtitle>Put one <code>.icon</code> inside the shape; it is sized with the square.</CardSubtitle>
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
{
|
||||
icons.map((icon) => (
|
||||
<span class="shape shape-md">
|
||||
<Icon name={icon} />
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Corner radius</CardTitle>
|
||||
<CardSubtitle>Set <code>--tblr-shape-border-radius</code> to change the corners; the default is <code>35%</code>.</CardSubtitle>
|
||||
<div class="d-flex flex-wrap gap-4">
|
||||
{
|
||||
radii.map((item) => (
|
||||
<div class="text-center">
|
||||
<span class="shape shape-lg" style={item.value && `--tblr-shape-border-radius: ${item.value}`}>
|
||||
<Icon name="palette" />
|
||||
</span>
|
||||
<div class="text-secondary small mt-1">{item.label}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Feature list</CardTitle>
|
||||
<CardSubtitle>A shape above each heading, with the same size and color on every item.</CardSubtitle>
|
||||
<div class="row g-4 text-center">
|
||||
{
|
||||
features.map((feature) => (
|
||||
<div class="col-md-4">
|
||||
<span class="shape shape-md mb-3">
|
||||
<Icon name={feature.icon} />
|
||||
</span>
|
||||
<h3 class="h3">{feature.title}</h3>
|
||||
<p class="text-secondary mb-0">{feature.text}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Feature list, inline</CardTitle>
|
||||
<CardSubtitle>A colored shape next to each heading, in a <code>.row</code> with an auto column.</CardSubtitle>
|
||||
<div class="row g-4">
|
||||
{
|
||||
featureList.map((feature) => (
|
||||
<div class="col-md-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-auto">
|
||||
<span class:list={['shape', 'shape-md', `shape-${feature.color}`]}>
|
||||
<Icon name={feature.icon} />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h4 mb-1">{feature.title}</h3>
|
||||
<p class="text-secondary mb-0">{feature.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
// Shape component: a six-item feature grid, each item with a colored shape
|
||||
// above its heading, the way the marketing pages use it. Six colors so the
|
||||
// tint and the icon color read as a pair across the palette, at the default
|
||||
// size a page would use.
|
||||
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
||||
import Card from '@ui/Card.astro'
|
||||
import CardBody from '@ui/CardBody.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
|
||||
const features = [
|
||||
{ icon: 'devices', color: 'blue', title: 'Mobile-optimized', text: 'Every page works on any screen size, from a phone to a wide monitor.' },
|
||||
{ icon: 'mailbox', color: 'purple', title: 'Tested email clients', text: 'Checked in more than 90 email clients and devices.' },
|
||||
{ icon: 'palette', color: 'green', title: 'Minimal design', text: 'Clean layouts based on Bootstrap and Material Design principles.' },
|
||||
{ icon: 'shield-check', color: 'orange', title: 'Secure by default', text: 'Sensible defaults for forms, auth pages and user settings.' },
|
||||
{ icon: 'chart-bar', color: 'red', title: 'Charts and tables', text: 'Dashboards, data grids and charts that fit in with the rest.' },
|
||||
{ icon: 'users', color: 'teal', title: 'Built for teams', text: 'Shared components and docs so everyone ships the same UI.' },
|
||||
]
|
||||
---
|
||||
|
||||
<ScreenshotLayout title="Shape" columns={3}>
|
||||
<Card>
|
||||
<CardBody class="p-5">
|
||||
<div class="row g-5 text-center">
|
||||
{
|
||||
features.map((feature) => (
|
||||
<div class="col-4">
|
||||
<span class:list={['shape', `shape-${feature.color}`, 'mb-3']}>
|
||||
<Icon name={feature.icon} />
|
||||
</span>
|
||||
<h3 class="h3">{feature.title}</h3>
|
||||
<p class="text-secondary mb-0">{feature.text}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</ScreenshotLayout>
|
||||
@@ -241,6 +241,11 @@
|
||||
"title": "Scroll spy",
|
||||
"url": "scroll-spy.html"
|
||||
},
|
||||
"shape": {
|
||||
"title": "Shape",
|
||||
"url": "shape.html",
|
||||
"badge": "New"
|
||||
},
|
||||
"signal": {
|
||||
"title": "Signal",
|
||||
"url": "signal.html"
|
||||
|
||||
Reference in new issue
Block a user