mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

fix className

pull/580/head
Cory LaViska 2021-11-05 10:06:06 -04:00
rodzic 3ffbc09630
commit c771534c43
14 zmienionych plików z 29 dodań i 30 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
docs/components/alert.md
Wyświetl plik

@ -227,7 +227,7 @@ const App = () => {
return (
<>
<div class="alert-duration">
<div className="alert-duration">
<SlButton type="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
<SlAlert

2
docs/components/avatar.md
Wyświetl plik

@ -154,7 +154,7 @@ const css = `
const App = () => (
<>
<div class="avatar-group">
<div className="avatar-group">
<SlAvatar image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" />
<SlAvatar image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
<SlAvatar image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />

2
docs/components/badge.md
Wyświetl plik

@ -101,7 +101,7 @@ const css = `
const App = () => (
<>
<div class="badge-pulse">
<div className="badge-pulse">
<SlBadge type="primary" pill pulse>1</SlBadge>
<SlBadge type="success" pill pulse>1</SlBadge>
<SlBadge type="neutral" pill pulse>1</SlBadge>

2
docs/components/button-group.md
Wyświetl plik

@ -427,7 +427,7 @@ const css = `
const App = () => (
<>
<div class="button-group-toolbar">
<div className="button-group-toolbar">
<SlButtonGroup label="History">
<SlTooltip content="Undo">
<SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton>

10
docs/components/card.md
Wyświetl plik

@ -64,7 +64,7 @@ const css = `
const App = () => (
<>
<SlCard class="card-overview">
<SlCard className="card-overview">
<img
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
@ -115,7 +115,7 @@ const css = `
const App = () => (
<>
<SlCard class="card-basic">
<SlCard className="card-basic">
This is just a basic card. No image, no header, and no footer. Just your content.
</SlCard>
@ -185,7 +185,7 @@ const css = `
const App = () => (
<>
<SlCard class="card-header">
<SlCard className="card-header">
<div slot="header">
Header Title
@ -248,7 +248,7 @@ const css = `
const App = () => (
<>
<SlCard class="card-footer">
<SlCard className="card-footer">
This card has a footer. You can put all sorts of things in it!
<div slot="footer">
@ -294,7 +294,7 @@ const css = `
const App = () => (
<>
<SlCard class="card-image">
<SlCard className="card-image">
<img
slot="image"
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"

1
docs/components/drawer.md
Wyświetl plik

@ -244,7 +244,6 @@ const App = () => {
<SlDrawer
label="Drawer"
contained
class="drawer-contained"
open={open}
onSlAfterHide={() => setOpen(false)}
style={{ '--size': '50%' }}

2
docs/components/dropdown.md
Wyświetl plik

@ -361,7 +361,7 @@ const css = `
const App = () => (
<>
<div class="dropdown-hoist">
<div className="dropdown-hoist">
<SlDropdown>
<SlButton slot="trigger" caret>No Hoist</SlButton>
<SlMenu>

4
docs/components/format-number.md
Wyświetl plik

@ -30,7 +30,7 @@ const App = () => {
const [value, setValue] = useState(1000);
return (
<div class="format-number-overview">
<>
<SlFormatNumber value={value} />
<br /><br />
<SlInput
@ -40,7 +40,7 @@ const App = () => {
style={{ maxWidth: '180px' }}
onSlInput={event => setValue(event.target.value)}
/>
</div>
</>
);
};
```

2
docs/components/icon-button.md
Wyświetl plik

@ -88,7 +88,7 @@ const css = `
`;
const App = () => (
<div class="icon-button-color">
<div className="icon-button-color">
<SlIconButton name="type-bold" label="Bold" />
<SlIconButton name="type-italic" label="Italic" />
<SlIconButton name="type-underline" label="Underline" />

4
docs/components/mutation-observer.md
Wyświetl plik

@ -170,12 +170,12 @@ const App = () => {
return (
<>
<div class="mutation-child-list">
<div className="mutation-child-list">
<SlMutationObserver
child-list
onSlMutation={event => console.log(event.detail)}
>
<div class="buttons">
<div className="buttons">
<SlButton type="primary" onClick={addButton}>Add button</SlButton>
{buttonIds.map(id => (
<SlButton key={id} type="default" onClick={() => removeButton(id)}>

4
docs/components/qr-code.md
Wyświetl plik

@ -53,7 +53,7 @@ const App = () => {
return (
<>
<div class="qr-overview">
<div className="qr-overview">
<SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
<br />
@ -151,7 +151,7 @@ const css = `
const App = () => {
return (
<>
<div class="qr-error-correction">
<div className="qr-error-correction">
<SlQrCode value="https://shoelace.style/" error-correction="L" />
<SlQrCode value="https://shoelace.style/" error-correction="M" />
<SlQrCode value="https://shoelace.style/" error-correction="Q" />

20
docs/components/skeleton.md
Wyświetl plik

@ -92,7 +92,7 @@ const css = `
const App = () => (
<>
<div class="skeleton-overview">
<div className="skeleton-overview">
<header>
<SlSkeleton />
<SlSkeleton />
@ -152,7 +152,7 @@ const css = `
const App = () => (
<>
<div class="skeleton-effects">
<div className="skeleton-effects">
<SlSkeleton effect="none" />
None
@ -223,7 +223,7 @@ const css = `
const App = () => (
<>
<div class="skeleton-paragraphs">
<div className="skeleton-paragraphs">
<SlSkeleton />
<SlSkeleton />
<SlSkeleton />
@ -287,7 +287,7 @@ const css = `
const App = () => (
<>
<div class="skeleton-avatars">
<div className="skeleton-avatars">
<SlSkeleton />
<SlSkeleton />
<SlSkeleton />
@ -387,12 +387,12 @@ const css = `
const App = () => (
<>
<div class="skeleton-shapes">
<SlSkeleton class="square" />
<SlSkeleton class="circle" />
<SlSkeleton class="triangle" />
<SlSkeleton class="cross" />
<SlSkeleton class="comment" />
<div className="skeleton-shapes">
<SlSkeleton className="square" />
<SlSkeleton className="circle" />
<SlSkeleton className="triangle" />
<SlSkeleton className="cross" />
<SlSkeleton className="comment" />
</div>
<style>{css}</style>

2
docs/components/tab-group.md
Wyświetl plik

@ -205,7 +205,7 @@ const App = () => {
}
return (
<SlTabGroup class="tabs-closable" onSlClose={handleClose}>
<SlTabGroup className="tabs-closable" onSlClose={handleClose}>
<SlTab slot="nav" panel="general">General</SlTab>
<SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>Closable 1</SlTab>
<SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>Closable 2</SlTab>

2
docs/components/tag.md
Wyświetl plik

@ -119,7 +119,7 @@ const App = () => {
return (
<>
<div class="tags-removable">
<div className="tags-removable">
<SlTag size="small" removable onSlRemove={handleRemove}>
Small
</SlTag>