html - que - ionic 4 tutorial español
¿Incrustar contenido de un archivo html en otra página html usando el framework Ionic? (4)
Puedes hacer un enlace para que cuando hagan clic en los "perfiles" vaya a otra página y luego puedas poner el código para tu barra lateral en un documento php y usar una etiqueta de inclusión php para mostrarlo en la página nueva. Vea el ejemplo a continuación:
sidebarCode.php:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
La nueva página:
<!--Specific Did You Want-->
<div>
<?php include ''sidebarCode.php'';?>
</div>
Actualmente estoy creando un sitio web usando el marco Ionic que tiene una barra lateral en el lado izquierdo. Los usuarios pueden hacer clic en un elemento para ir a otra página del sitio web. Ahora tengo que copiar el código de la barra lateral a cada página y eso es inútil y no es el camino a seguir.
Entonces mi pregunta es si es posible "insertar" una página html en una sección específica de otra página. Por ejemplo, podría hacer que mi barra lateral sea "estática" y cargue en un archivo login.html en un div específico. Y tener un archivo html con todas las páginas sería muy difícil de mantener y organizar.
¿Es posible de alguna manera?
EDITAR: como solicitando, estoy agregando el código más relevante que ya tengo
<ion-side-menus>
<!-- Main page-->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<!-- Knop toggleSidebar -->
<button class="button button-icon" ng-click="triggerSidebar()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Proof of concept</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col" col-50>5 + 8 = </div>
<div class="col" col-25><input type="number" placeholder="13"></div>
<div class="col" col-25><button class="button button-small">Controleer</button></div>
</div>
</ion-content>
</ion-side-menu-content>
<!-- End Main page -->
<!-- Sidebar -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
<div class="item item-divider">Settings</div>
<a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
<a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
<a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
</div>
</ion-content>
</ion-side-menu>
<!-- End sidebar -->
Lo que intento comunicar es que, cuando alguien hace clic en la opción "perfiles", el contenido de la página principal se cambia con contenido tomado de otro archivo html
Puedes hacerlo usando frames :) con solo html, el siguiente código te ayudará
<html>
<head>
<title>Multiple Pages</title>
</head>
<FRAMESET cols="20%, 80%">
<FRAME SRC="sidebar.html">
<FRAME SRC="content.html">
</FRAMESET>
</html>
#side_bar{
background-color: red;
width: 200px;
height: 100%;
float: left;
}
<div id="side_bar">
<?php
include_once(''sidebar.html'');
?>
</div>
Dentro de <ion-side-menu-content> puede cargar scripts a través del enrutador ui. Entonces, lo que puede hacer es cuando un usuario hace clic en un elemento de menú, almacena la página HTML como plantilla usando $templatecache y luego simplemente recarga su vista dentro de <ion-side-menu-content> que hará su trabajo.
Puedes resolverlo usando un enrutamiento UI angular:
$stateProvider
.state("menu", {
url: "/menu",
abstract: true,
templateUrl: "views/menu.html"
})
.state(''menu.combinedPage1'', {
url: ''/combinedPage1'',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded1.html",
controller: "EmbeddedController1"
}
}
})
.state(''menu.combinedPage2'', {
url: ''/combinedPage2'',
views: {
"EmbeddedContent": {
templateUrl: "views/embedded2.html",
controller: "EmbeddedController2"
}
}
})
Aquí el "menú" es un estado abstracto y contiene vistas incrustadas controladas por el enrutador.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view name="EmbeddedContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>