kopia lustrzana https://github.com/shoelace-style/shoelace
Update `sl-card` documentation
Sara
rodzic
0ab24844c9
commit
8b45ad181c
|
|
@ -121,14 +121,20 @@ const App = () => (
|
||||||
|
|
||||||
### Basic Card
|
### Basic Card
|
||||||
|
|
||||||
Basic cards aren't very exciting, but they can display any content you want them to.
|
Basic cards aren't very exciting, but they can display any content you want them to. This is the standard container to use when displaying content on a standard page with a `gray-100` background.
|
||||||
|
|
||||||
```html:preview
|
```html:preview
|
||||||
<sl-card class="card-basic">
|
<div class="page-basic">
|
||||||
This is just a basic card. No image, no header, and no footer. Just your content.
|
<sl-card class="card-basic">
|
||||||
</sl-card>
|
This is just a basic card. No image, no header, and no footer. Just your content.
|
||||||
|
</sl-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.page-basic {
|
||||||
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
|
}
|
||||||
.card-basic {
|
.card-basic {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
@ -136,12 +142,17 @@ Basic cards aren't very exciting, but they can display any content you want them
|
||||||
```
|
```
|
||||||
|
|
||||||
```pug:slim
|
```pug:slim
|
||||||
sl-card.card-basic
|
.page-basic
|
||||||
| This is just a basic card. No image, no header, and no footer. Just your content.
|
sl-card.card-basic
|
||||||
|
| This is just a basic card. No image, no header, and no footer. Just your content.
|
||||||
|
|
||||||
css:
|
css:
|
||||||
|
.page-basic {
|
||||||
|
@apply bg-gray-100 p-6;
|
||||||
|
}
|
||||||
|
|
||||||
.card-basic {
|
.card-basic {
|
||||||
max-width: 300px;
|
@apply max-w-[300px];
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -149,6 +160,10 @@ css:
|
||||||
import SlCard from '@teamshares/shoelace/dist/react/card';
|
import SlCard from '@teamshares/shoelace/dist/react/card';
|
||||||
|
|
||||||
const css = `
|
const css = `
|
||||||
|
.page-basic {
|
||||||
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
|
}
|
||||||
.card-basic {
|
.card-basic {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
@ -167,25 +182,52 @@ const App = () => (
|
||||||
|
|
||||||
### Card with No Shadow
|
### Card with No Shadow
|
||||||
|
|
||||||
Use the `noShadow` property to remove a card's default box shadow.
|
Use the `noShadow` property to remove a card's default box shadow. This is useful when nesting cards inside another card.
|
||||||
|
|
||||||
```html:preview
|
```html:preview
|
||||||
<sl-card class="card-basic" noShadow> This is just a basic card with no shadow. </sl-card>
|
<div class="page-basic">
|
||||||
|
<sl-card>
|
||||||
|
<div slot="header">Card with nested cards</div>
|
||||||
|
<div class="nested-cards">
|
||||||
|
<sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
|
||||||
|
<sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
|
||||||
|
<sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
|
||||||
|
</div>
|
||||||
|
</sl-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card-basic {
|
.page-basic {
|
||||||
max-width: 300px;
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
}
|
}
|
||||||
|
.nested-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
width: 100%;
|
||||||
|
gap: var(--sl-spacing-medium);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
```pug:slim
|
```pug:slim
|
||||||
sl-card.card-basic noShadow=true
|
.page-basic
|
||||||
| This is just a basic card with no shadow.
|
sl-card
|
||||||
|
div slot="header" Card with nested cards
|
||||||
|
.nested-cards
|
||||||
|
sl-card noShadow=true
|
||||||
|
| This is a basic card with no shadow, nested inside a standard card with shadow.
|
||||||
|
sl-card noShadow=true
|
||||||
|
| This is a basic card with no shadow, nested inside a standard card with shadow.
|
||||||
|
sl-card noShadow=true
|
||||||
|
| This is a basic card with no shadow, nested inside a standard card with shadow.
|
||||||
|
|
||||||
css:
|
css:
|
||||||
.card-basic {
|
.page-basic {
|
||||||
max-width: 300px;
|
@apply bg-gray-100 p-6;
|
||||||
|
}
|
||||||
|
.nested-cards {
|
||||||
|
@apply grid grid-cols-2 w-full gap-4;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -209,57 +251,204 @@ const App = () => (
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
### Card with Header
|
### Loading Card
|
||||||
|
|
||||||
Headers can be used to display titles, actions, and more. Other than padding and a bottom border, headers have no styling applied by default.
|
Use the `loading` property to indicate that a process related to a card is in progress. An overlay will cover the entire card and an `sl-spinner` component will be displayed on top of the overlay.
|
||||||
|
|
||||||
```html:preview
|
```html:preview
|
||||||
<sl-card class="card-header">
|
<div class="page-basic">
|
||||||
<div slot="header">
|
<sl-card class="card-loading" loading>
|
||||||
Card header
|
This is a basic card in a loading state.
|
||||||
<sl-icon-button library="fa" name="fas-pencil" label="Edit settings"></sl-icon-button>
|
</sl-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
This card has a header. You can put all sorts of things in it!
|
|
||||||
</sl-card>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.card-header {
|
.page-basic {
|
||||||
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
|
}
|
||||||
|
.card-loading {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header [slot='header'] {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header sl-icon-button {
|
|
||||||
font-size: var(--sl-font-size-medium);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
```pug:slim
|
```pug:slim
|
||||||
sl-card.card-header
|
.page-basic
|
||||||
div slot="header"
|
sl-card.card-loading loading=true
|
||||||
| Card header
|
| This is a basic card in a loading state.
|
||||||
sl-icon-button library="fa" name="fas-pencil" label="Edit settings"
|
|
||||||
| This card has a header. You can put all sorts of things in it!
|
|
||||||
|
|
||||||
css:
|
css:
|
||||||
.card-header {
|
.page-basic {
|
||||||
|
@apply bg-gray-100 p-6;
|
||||||
|
}
|
||||||
|
.card-loading {
|
||||||
|
@apply max-w-[300px];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```jsx:react
|
||||||
|
import { SlCard } from '@teamshares/shoelace/dist/react';
|
||||||
|
|
||||||
|
const css = `
|
||||||
|
.card-basic {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
.card-header [slot=header] {
|
const App = () => (
|
||||||
display: flex;
|
<>
|
||||||
align-items: center;
|
<SlCard className="card-basic" loading>
|
||||||
justify-content: space-between;
|
This is a basic card in a loading state.
|
||||||
|
</SlCard>
|
||||||
|
|
||||||
|
<style>{css}</style>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Empty State Card
|
||||||
|
|
||||||
|
Use the `emptyState` property to style the card for an empty state. This will make the card less prominent by setting the background color to transparent (showing the `gray-100` page behind it) and darken the border slightly.
|
||||||
|
|
||||||
|
```html:preview
|
||||||
|
<div class="page-basic">
|
||||||
|
<sl-card class="card-empty" emptyState>
|
||||||
|
This is a basic card styled as an empty state container.
|
||||||
|
<br/><br/>
|
||||||
|
Fill it with content using the Empty State View Component!
|
||||||
|
</sl-card>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.page-basic {
|
||||||
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
|
}
|
||||||
|
.card-empty {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
```pug:slim
|
||||||
|
.page-basic
|
||||||
|
sl-card.card-empty emptyState=true
|
||||||
|
| This is a basic card styled as an empty state container.
|
||||||
|
br
|
||||||
|
br
|
||||||
|
| Fill it with content using the Empty State View Component!
|
||||||
|
|
||||||
|
css:
|
||||||
|
.page-basic {
|
||||||
|
@apply bg-gray-100 p-6;
|
||||||
|
}
|
||||||
|
.card-empty {
|
||||||
|
@apply max-w-[300px];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```jsx:react
|
||||||
|
import { SlCard } from '@teamshares/shoelace/dist/react';
|
||||||
|
|
||||||
|
const css = `
|
||||||
|
.card-basic {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const App = () => (
|
||||||
|
<>
|
||||||
|
<SlCard className="card-basic" loading>
|
||||||
|
This is a basic card in a loading state.
|
||||||
|
</SlCard>
|
||||||
|
|
||||||
|
<style>{css}</style>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Card with Header
|
||||||
|
|
||||||
|
Use `slot="header"` to display header content in the card. Other than padding and a bottom border, headers have no styling applied by default.
|
||||||
|
|
||||||
|
To optionally apply a <code>flex/space-between</code> layout to a header with a title and one or more button actions (or other content to display on the right), use the `actionHeader` property on `sl-card`.
|
||||||
|
|
||||||
|
```html:preview
|
||||||
|
<div class="page-basic">
|
||||||
|
<sl-card class="card-header">
|
||||||
|
<div slot="header">
|
||||||
|
<div class="ts-heading-7">Card title</div>
|
||||||
|
<div class="ts-body-2">Description</div>
|
||||||
|
</div>
|
||||||
|
This card has a header with no additional styling applied by default.
|
||||||
|
</sl-card>
|
||||||
|
<sl-card class="card-header" actionHeader >
|
||||||
|
<div slot="header">
|
||||||
|
<div class="ts-heading-7">Card title</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<sl-tooltip content="Edit">
|
||||||
|
<sl-icon-button library="fa" name="pencil"></sl-icon-button>
|
||||||
|
</sl-tooltip>
|
||||||
|
<sl-tooltip content="Delete">
|
||||||
|
<sl-icon-button library="fa" name="trash"></sl-icon-button>
|
||||||
|
</sl-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
This card is using the <code>actionHeader</code> property, which applies a <code>flex/space-between</code> layout to the header.
|
||||||
|
<br/><br/>
|
||||||
|
To display more than one action button, wrap the buttons in a container.
|
||||||
|
</sl-card>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.page-basic {
|
||||||
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
margin: var(--sl-spacing-x-small) 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.header-actions * {
|
||||||
|
margin-inline-start: var(--sl-spacing-x-small);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
```pug:slim
|
||||||
|
.page-basic
|
||||||
|
sl-card.card-header
|
||||||
|
div slot="header"
|
||||||
|
.ts-heading-7 Card title
|
||||||
|
.ts-body-2 Description
|
||||||
|
| This card has a header with no additional styling applied by default.
|
||||||
|
sl-card.card-header actionHeader=true
|
||||||
|
div slot="header"
|
||||||
|
.ts-heading-7 Card title
|
||||||
|
.header-actions
|
||||||
|
sl-tooltip content="Edit"
|
||||||
|
sl-icon-button library="fa" name="pencil"
|
||||||
|
sl-tooltip content="Delete"
|
||||||
|
sl-icon-button library="fa" name="trash"
|
||||||
|
| This card is using the
|
||||||
|
code actionHeader
|
||||||
|
| property, which applies a
|
||||||
|
code flex/space-between
|
||||||
|
| layout to the header.
|
||||||
|
br
|
||||||
|
br
|
||||||
|
| To display more than one action button, wrap the buttons in a container.
|
||||||
|
|
||||||
|
css:
|
||||||
|
.page-basic {
|
||||||
|
@apply bg-gray-100 p-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header sl-icon-button {
|
.card-header {
|
||||||
font-size: var(--sl-font-size-medium);
|
@apply my-2 w-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions * {
|
||||||
|
@apply ms-2;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -300,55 +489,143 @@ const App = () => (
|
||||||
|
|
||||||
### Card with Footer
|
### Card with Footer
|
||||||
|
|
||||||
Footers can be used to display actions, summaries, or other relevant content. Similar to the header, footers have no styling applied by default other than padding and a top border.
|
Use `slot="footer"` to display footer content in the card. Similar to the header, footers have no styling applied by default other than padding and a top border.
|
||||||
|
|
||||||
|
To optionally apply a `flex/flex-end` layout to a footer with one or more buttons, use the `buttonFooter` property on `sl-card`.
|
||||||
|
|
||||||
```html:preview
|
```html:preview
|
||||||
<sl-card class="card-footer">
|
<div class="page-basic">
|
||||||
This card has a footer. You can put all sorts of things in it!
|
<sl-card class="card-footer">
|
||||||
|
This card has a footer with no additional styling applied by default.
|
||||||
<div slot="footer">
|
<div slot="footer">
|
||||||
<sl-button variant="default">Previous</sl-button>
|
<a href="#" class="ts-body-2 ts-text-link">Use for links or whatever!</a>
|
||||||
<sl-button variant="primary">Next</sl-button>
|
</div>
|
||||||
</div>
|
</sl-card>
|
||||||
</sl-card>
|
<sl-card class="card-footer" buttonFooter>
|
||||||
|
This card is using the <code>buttonFooter</code> property, which applies a <code>flex/flex-end</code> layout and <code>8 px gap</code>to footer elements.
|
||||||
|
<div slot="footer">
|
||||||
|
<sl-button variant="default">Default</sl-button>
|
||||||
|
<sl-button variant="primary">Primary</sl-button>
|
||||||
|
</div>
|
||||||
|
</sl-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.page-basic {
|
||||||
|
background: var(--sl-color-neutral-100);
|
||||||
|
padding: var(--ts-spacing-large);
|
||||||
|
}
|
||||||
.card-footer {
|
.card-footer {
|
||||||
max-width: 300px;
|
margin: var(--sl-spacing-x-small) 0;
|
||||||
}
|
width: 100%;
|
||||||
|
|
||||||
.card-footer [slot='footer'] {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer [slot='footer'] > * {
|
|
||||||
margin-inline-start: 0.5rem;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
```pug:slim
|
```pug:slim
|
||||||
sl-card.card-footer
|
.page-basic
|
||||||
| This card has a footer. You can put all sorts of things in it!
|
sl-card.card-footer
|
||||||
div slot="footer"
|
| This card has a footer with no additional styling applied by default.
|
||||||
sl-rating
|
div slot="footer"
|
||||||
sl-button variant="primary" Preview
|
a href="#" class="ts-body-2 ts-text-link" Use for links or whatever!
|
||||||
|
sl-card.card-footer buttonFooter=true
|
||||||
|
| Thi s card is using the
|
||||||
|
code buttonFooter
|
||||||
|
| property, which applies a
|
||||||
|
code flex/flex-end
|
||||||
|
| layout and
|
||||||
|
code 8 px gap
|
||||||
|
| to footer elements.
|
||||||
|
div slot="footer"
|
||||||
|
sl-button variant="default" Default
|
||||||
|
sl-button variant="primary" Primary
|
||||||
css:
|
css:
|
||||||
|
.page-basic {
|
||||||
|
@apply bg-gray-100 p-6;
|
||||||
|
}
|
||||||
|
.card-footer {
|
||||||
|
@apply my-2 w-full;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```jsx:react
|
||||||
|
import SlButton from '@teamshares/shoelace/dist/react/button';
|
||||||
|
import SlCard from '@teamshares/shoelace/dist/react/card';
|
||||||
|
import SlRating from '@teamshares/shoelace/dist/react/rating';
|
||||||
|
|
||||||
|
const css = `
|
||||||
.card-footer {
|
.card-footer {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer [slot=footer] {
|
.card-footer [slot="footer"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer [slot='footer'] > * {
|
.card-footer [slot='footer'] > * {
|
||||||
margin-inline-start: 0.5rem;
|
margin-inline-start: 0.5rem;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const App = () => (
|
||||||
|
<>
|
||||||
|
<SlCard className="card-footer">
|
||||||
|
This card has a footer. You can put all sorts of things in it!
|
||||||
|
<div slot="footer">
|
||||||
|
<SlRating></SlRating>
|
||||||
|
<SlButton slot="footer" variant="primary">
|
||||||
|
Preview
|
||||||
|
</SlButton>
|
||||||
|
</div>
|
||||||
|
</SlCard>
|
||||||
|
|
||||||
|
<style>{css}</style>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compact Card
|
||||||
|
|
||||||
|
Use the `compact` property to reduce spacing and remove the borders between the header, body, and footer.
|
||||||
|
|
||||||
|
```html:preview
|
||||||
|
<div class="page-basic">
|
||||||
|
<sl-card class="card-compact" compact buttonFooter>
|
||||||
|
<div slot="header">
|
||||||
|
<div class="ts-heading-8">Compact card header</div>
|
||||||
|
</div>
|
||||||
|
This card is using the <code>compact</code> property, which reduces spacing and removes the borders between the header, body, and footer.
|
||||||
|
<div slot="footer">
|
||||||
|
<sl-button variant="default" size="small">Default</sl-button>
|
||||||
|
<sl-button variant="primary" size="small">Primary</sl-button>
|
||||||
|
</div>
|
||||||
|
</sl-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card-compact {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
```pug:slim
|
||||||
|
.page-basic
|
||||||
|
sl-card.card-compact compact=true buttonFooter=true
|
||||||
|
div slot="header
|
||||||
|
.ts-heading-8 Compact card header
|
||||||
|
| This card is using the
|
||||||
|
code compact
|
||||||
|
| property, which reduces spacing and removes the borders between the header, body, and footer.
|
||||||
|
div slot="footer"
|
||||||
|
sl-button variant="default" size="small" Default
|
||||||
|
sl-button variant="primary" size="small" Primary
|
||||||
|
|
||||||
|
css:
|
||||||
|
.card-footer {
|
||||||
|
@apply w-[400px];
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue