<!DOCTYPE html>
<html class="ios">
<head>
<meta charset="UTF-8"/>
<title>riot demo</title>
<link rel="stylesheet" href="app.css">
<script src="https://unpkg.com/riot@4/riot+compiler.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
</head>
<body>
<app></app>
<script type="riot" src="./app.riot"></script>
<script>
riot
.compile()
.then(() => {
riot.mount('app', {
title: 'Hello Riot with Ionic'
})
})
.catch(e => {
console.log(e)
})
</script>
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.esm.js"></script> -->
<!-- <script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.js"></script> -->
</body>
</html>
<app mode="ios">
<ion-app class="ion-padding">
<ion-content>
<h1>{ props.title }</h1>
<div class="buttons">
<!-- Default -->
<ion-button>Default</ion-button>
<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>
<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
</div>
<ion-card>
<ion-img src="https://ionicframework.com/img/homepage/demo-image.png"></ion-img>
<ion-card-content>
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<p>Here’s a small text description for the card component.
Nothing more, nothing less.
</p>
<ion-item>
<ion-button fill="solid">Action</ion-button>
<ion-icon name="heart" slot="start"></ion-icon>
<ion-icon name="share" slot="end"></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
<ion-list>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
<p style="margin-bottom: 300px;"></p>
</ion-content>
</ion-app>
<script>
export default {
onBeforeMount(props) {
console.log(props)
}
}
</script>
</app>
/* body {
font-family: 'Futura myriad pro', sans-serif;
border: 0;
background-color: #fafafa;
height: 100%;
}
app {
margin: 5% auto;
} */
<app mode="ios">
<ion-app class="ion-padding">
<ion-button>click me</ion-button>
<ion-content>
<h1>{ props.title }</h1>
<div class="buttons">
<!-- Default -->
<ion-button>Default</ion-button>
<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>
<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
</div>
<ion-card>
<ion-img src="https://ionicframework.com/img/homepage/demo-image.png"></ion-img>
<ion-card-content>
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<p>Here’s a small text description for the card component.
Nothing more, nothing less.
</p>
<ion-item>
<ion-button fill="solid">Action</ion-button>
<ion-icon name="heart" slot="start"></ion-icon>
<ion-icon name="share" slot="end"></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
<ion-list>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
<p style="margin-bottom: 300px;"></p>
</ion-content>
</ion-app>
<script>
export default {
onBeforeMount(props) {
console.log(props)
}
}
</script>
</app>