mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Move Shape to the core CSS bundle
This commit is contained in:
codecalm committed
1 parent
49b5518f7d
commit
9c1fd614b1
10 files changed
+387
-1
No files matched your search
@@ -23,3 +23,65 @@ 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
|
||||
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.
|
||||
@@ -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>
|
||||
@@ -298,6 +298,10 @@
|
||||
"title": "Segmented control",
|
||||
"url": "/ui/components/segmented-control"
|
||||
},
|
||||
{
|
||||
"title": "Shape",
|
||||
"url": "/ui/components/shape"
|
||||
},
|
||||
{
|
||||
"title": "Signal",
|
||||
"url": "/ui/components/signal"
|
||||
|
||||
@@ -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