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

update examples

pull/883/head
Cory LaViska 2022-08-26 09:11:09 -04:00
rodzic ccbdc6c014
commit d9f48a5f2a
1 zmienionych plików z 25 dodań i 25 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

50
docs/components/tree.md
Wyświetl plik

@ -289,14 +289,14 @@ const App = () => {
}; };
``` ```
### Custom expanded/collapsed icons ### Custom expand/collapse icons
Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively.
```html preview ```html preview
<sl-tree> <sl-tree>
<sl-icon name="plus-square" slot="collapse-icon"></sl-icon> <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
<sl-icon name="dash-square" slot="expand-icon"></sl-icon> <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
<sl-tree-item> <sl-tree-item>
Deciduous Deciduous
@ -332,8 +332,8 @@ import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react';
const App = () => ( const App = () => (
<SlTree> <SlTree>
<SlIcon name="plus-square" slot="collapse-icon"></SlIcon> <SlIcon name="plus-square" slot="expand-icon"></SlIcon>
<SlIcon name="dash-square" slot="expand-icon"></SlIcon> <SlIcon name="dash-square" slot="collapse-icon"></SlIcon>
<SlTreeItem> <SlTreeItem>
Deciduous Deciduous
@ -372,40 +372,40 @@ Decorative icons can be used before labels to provide hints for each node.
<sl-tree class="tree-with-icons"> <sl-tree class="tree-with-icons">
<sl-tree-item expanded> <sl-tree-item expanded>
<sl-icon name="folder"></sl-icon> <sl-icon name="folder"></sl-icon>
Root Documents
<sl-tree-item> <sl-tree-item>
<sl-icon name="folder"> </sl-icon> <sl-icon name="folder"> </sl-icon>
Folder 1 Photos
<sl-tree-item> <sl-tree-item>
<sl-icon name="files"></sl-icon> <sl-icon name="image"></sl-icon>
File 1 - 1 birds.jpg
</sl-tree-item>
<sl-tree-item disabled>
<sl-icon name="files"></sl-icon>
File 1 - 2
</sl-tree-item> </sl-tree-item>
<sl-tree-item> <sl-tree-item>
<sl-icon name="files"></sl-icon> <sl-icon name="image"></sl-icon>
File 1 - 3 kitten.jpg
</sl-tree-item>
<sl-tree-item>
<sl-icon name="image"></sl-icon>
puppy.jpg
</sl-tree-item> </sl-tree-item>
</sl-tree-item> </sl-tree-item>
<sl-tree-item> <sl-tree-item>
<sl-icon name="files"></sl-icon> <sl-icon name="folder"></sl-icon>
Folder 2 Writing
<sl-tree-item> <sl-tree-item>
<sl-icon name="files"></sl-icon> <sl-icon name="file"></sl-icon>
File 2 - 1 draft.txt
</sl-tree-item> </sl-tree-item>
<sl-tree-item> <sl-tree-item>
<sl-icon name="files"></sl-icon> <sl-icon name="file-pdf"></sl-icon>
File 2 - 2 final.pdg
</sl-tree-item>
<sl-tree-item>
<sl-icon name="file-bar-graph"></sl-icon>
sales.txt
</sl-tree-item> </sl-tree-item>
</sl-tree-item>
<sl-tree-item>
<sl-icon name="files"></sl-icon>
File 1
</sl-tree-item> </sl-tree-item>
</sl-tree-item> </sl-tree-item>
</sl-tree> </sl-tree>