Skip to content
Snippets Groups Projects
Commit d6321d3f authored by Aidan's avatar Aidan
Browse files

Remove example folder

parent f0fcbedf
No related branches found
No related tags found
No related merge requests found
.idea/
node_modules/
.vscode/
*.map
.DS_Store
.sourcemaps
dist/
## Created with Capacitor Create App
This app was created using [`@capacitor/create-app`](https://github.com/ionic-team/create-capacitor-app),
and comes with a very minimal shell for building an app.
### Running this example
To run the provided example, you can use `npm start` command.
```bash
npm start
```
{
"appId": "com.example.plugin",
"appName": "example",
"bundledWebRuntime": false,
"webDir": "dist",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
}
}
\ No newline at end of file
{
"name": "capacitor-app",
"version": "1.0.0",
"description": "An Amazing Capacitor App",
"main": "index.js",
"keywords": [
"capacitor",
"mobile"
],
"scripts": {
"start": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@capacitor/core": "latest",
"@capacitor/camera": "latest",
"@capacitor/splash-screen": "latest",
"@polycentric/leveldb-capacitor-plugin": "file:..",
"@capacitor/ios": "^6.0.0",
"@capacitor/android": "^6.0.0"
},
"devDependencies": {
"@capacitor/cli": "latest",
"vite": "^2.9.13"
},
"author": "",
"license": "ISC"
}
\ No newline at end of file
example/src/assets/icon/favicon.ico

99.4 KiB

example/src/assets/imgs/logo.png

11.8 KiB

html,
body {
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Awesome Capacitor App</title>
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<script
type="module"
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
></script>
<link rel="icon" type="image/x-icon" href="./assets/icon/favicon.ico" />
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./css/style.css" />
<meta name="theme-color" content="#31d53d" />
</head>
<body>
<capacitor-welcome></capacitor-welcome>
<script src="./js/capacitor-welcome.js" type="module"></script>
</body>
</html>
import { SplashScreen } from '@capacitor/splash-screen';
import { Camera } from '@capacitor/camera';
window.customElements.define(
'capacitor-welcome',
class extends HTMLElement {
constructor() {
super();
SplashScreen.hide();
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = `
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: block;
width: 100%;
height: 100%;
}
h1, h2, h3, h4, h5 {
text-transform: uppercase;
}
.button {
display: inline-block;
padding: 10px;
background-color: #73B5F6;
color: #fff;
font-size: 0.9em;
border: 0;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
}
main {
padding: 15px;
}
main hr { height: 1px; background-color: #eee; border: 0; }
main h1 {
font-size: 1.4em;
text-transform: uppercase;
letter-spacing: 1px;
}
main h2 {
font-size: 1.1em;
}
main h3 {
font-size: 0.9em;
}
main p {
color: #333;
}
main pre {
white-space: pre-line;
}
</style>
<div>
<capacitor-welcome-titlebar>
<h1>Capacitor</h1>
</capacitor-welcome-titlebar>
<main>
<p>
Capacitor makes it easy to build powerful apps for the app stores, mobile web (Progressive Web Apps), and desktop, all
with a single code base.
</p>
<h2>Getting Started</h2>
<p>
You'll probably need a UI framework to build a full-featured app. Might we recommend
<a target="_blank" href="http://ionicframework.com/">Ionic</a>?
</p>
<p>
Visit <a href="https://capacitorjs.com">capacitorjs.com</a> for information
on using native features, building plugins, and more.
</p>
<a href="https://capacitorjs.com" target="_blank" class="button">Read more</a>
<h2>Tiny Demo</h2>
<p>
This demo shows how to call Capacitor plugins. Say cheese!
</p>
<p>
<button class="button" id="take-photo">Take Photo</button>
</p>
<p>
<img id="image" style="max-width: 100%">
</p>
</main>
</div>
`;
}
connectedCallback() {
const self = this;
self.shadowRoot.querySelector('#take-photo').addEventListener('click', async function (e) {
try {
const photo = await Camera.getPhoto({
resultType: 'uri',
});
const image = self.shadowRoot.querySelector('#image');
if (!image) {
return;
}
image.src = photo.webPath;
} catch (e) {
console.warn('User cancelled', e);
}
});
}
}
);
window.customElements.define(
'capacitor-welcome-titlebar',
class extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = `
<style>
:host {
position: relative;
display: block;
padding: 15px 15px 15px 15px;
text-align: center;
background-color: #73B5F6;
}
::slotted(h1) {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 0.9em;
font-weight: 600;
color: #fff;
}
</style>
<slot></slot>
`;
}
}
);
{
"name": "App",
"short_name": "App",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#31d53d",
"theme_color": "#31d53d"
}
import { defineConfig } from 'vite';
export default defineConfig({
root: './src',
build: {
outDir: '../dist',
minify: false,
emptyOutDir: true,
},
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment