File size: 4,360 Bytes
d95db82 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
'''
title: template
'''
import simplestart as ss
ss.md("## ss.template Load VUE Template")
ss.space("mt-8")
ss.md('''
In SimpleStart, you can define simple Vue components using ss.template to achieve property and data interaction.
#### Function
ss.template(src, path, data, handlers)
##### Function Description
| Parameter | Description |
| --- | --- |
| src | Component script in string format |
| path | Path to the original code of the external component file |
| data | Data used for interaction between frontend components and the Python backend |
| handlers | Events defined in the frontend component, implemented on the Python side |
''')
ss.space("mt-8")
template = '''
<v-card
class="mx-auto text-white"
color="#26c6da"
max-width="400"
prepend-icon="mdi-twitter"
title="Twitter"
>
<template v-slot:prepend>
<v-icon size="x-large"></v-icon>
</template>
<v-card-text class="text-h6 py-2">
"SimpleStart is a easy way to build webpage and visualize data."
</v-card-text>
<v-card-actions>
<v-list-item class="w-100">
<template v-slot:prepend>
<v-avatar
color="grey-darken-3"
image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
></v-avatar>
</template>
<v-list-item-title>Evan You</v-list-item-title>
<v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
<template v-slot:append>
<div class="justify-self-end">
<v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
<span class="subheading me-2">{{data.vote}}</span>
<span class="me-1">·</span>
<v-icon class="me-1" icon="mdi-share-variant"></v-icon>
<span class="subheading">45</span>
</div>
</template>
</v-list-item>
</v-card-actions>
</v-card>
'''
def myclick(event):
mycard.vote = mycard.vote + 1
data = {"vote":256}
mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
def increment(event):
mycard.vote = mycard.vote + 1
#mycard.style = "color:red"
ss.space()
ss.button("Thumb Up", onclick=increment)
ss.space("mt-8")
ss.write('''
---
#### Python Side Code
''')
ss.md('''
```python
import simplestart as ss
template = \'''
<v-card
class="mx-auto text-white"
color="#26c6da"
max-width="400"
prepend-icon="mdi-twitter"
title="Twitter"
>
<template v-slot:prepend>
<v-icon size="x-large"></v-icon>
</template>
<v-card-text class="text-h6 py-2">
"SimpleStart is a easy way to build webpage and visualize data."
</v-card-text>
<v-card-actions>
<v-list-item class="w-100">
<template v-slot:prepend>
<v-avatar
color="grey-darken-3"
image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
></v-avatar>
</template>
<v-list-item-title>Evan You</v-list-item-title>
<v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
<template v-slot:append>
<div class="justify-self-end">
<v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
<span class="subheading me-2">{{data.vote}}</span>
<span class="me-1">·</span>
<v-icon class="me-1" icon="mdi-share-variant"></v-icon>
<span class="subheading">45</span>
</div>
</template>
</v-list-item>
</v-card-actions>
</v-card>
\'''
def myclick(event):
mycard.vote = mycard.vote + 1
data = {"vote":256}
mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
def increment(event):
mycard.vote = mycard.vote + 1
#mycard.style = "color:red"
ss.space()
ss.button("Thumb Up", onclick=increment)
```
''')
ss.space("mt-8")
def onPageEnter():
ss.session["counter"] = 0
|