This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
860 B
26 lines
860 B
2 years ago
|
<script>
|
||
|
|
import Icon from "$/client/components/Icon.svelte";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
button-group.vertical {
|
||
|
|
width: min-content;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<p>This is also shown at the bottom the Card demo. It's just a compact strip for buttons.</p>
|
||
|
|
|
||
|
|
<button-group>
|
||
|
|
<button id="ok"><Icon name="check-circle" color="var(--color-accent)" size="48" /></button>
|
||
|
|
<button><Icon name="x-circle" color="var(--color-bg)" size="48"/></button>
|
||
|
|
<button><Icon name="alert-circle" color="var(--color-bg)" size="48"/></button>
|
||
|
|
</button-group>
|
||
|
|
|
||
|
|
<h2>Vertical</h2>
|
||
|
|
|
||
|
|
<button-group class="vertical">
|
||
|
|
<button id="ok"><Icon name="check-circle" color="var(--color-accent)" size="48" /></button>
|
||
|
|
<button><Icon name="x-circle" color="var(--color-bg)" size="48"/></button>
|
||
|
|
<button><Icon name="alert-circle" color="var(--color-bg)" size="48"/></button>
|
||
|
|
</button-group>
|