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.
47 lines
1.3 KiB
47 lines
1.3 KiB
2 years ago
|
<script>
|
||
|
|
import Icon from '$/client/components/Icon.svelte';
|
||
|
|
import PlaceHolder from "$/client/components/PlaceHolder.svelte";
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
flex: flex-shrink;
|
||
|
|
flex-grow: 1;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
button#ok {
|
||
|
|
background-color: var(--color-bg-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
card {
|
||
|
|
width: 600px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<content>
|
||
|
|
<card>
|
||
|
|
<top>
|
||
|
|
<PlaceHolder width={ 16 * 60 } height={ 9 * 60 } />
|
||
|
|
</top>
|
||
|
|
|
||
|
|
<middle>
|
||
|
|
<h4>
|
||
|
|
Card Example
|
||
|
|
</h4>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur
|
||
|
|
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
|
|
</middle>
|
||
|
|
|
||
|
|
<bottom>
|
||
|
|
<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-group>
|
||
|
|
</bottom>
|
||
|
|
</card>
|
||
|
|
|
||
|
|
<p>This is another example of simply using CSS to implement basic components. Rather than implement Svelte compoentns with slots it is sometimes <b>much</b> easier to CSS and plain HTML. To see how to use cards look at <b>admin/bando/demos/Cards.svelte</b>. I also show you how to restyle the buttons if you want them to be larger and square like you find in many panel examples.</p>
|
||
|
|
</content>
|