javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/ionic-vanilla/demos/button/toolbar.html

249 lines
7.9 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Slides Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<ion-toolbar no-padding>
<ion-title>This should have no padding</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="mode-start">
<ion-button class="closeButton" clear>
Close
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid>
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid class="activated">
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary" class="activated">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline>
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline class="activated">
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon name="contact" slot="start"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
<ion-icon name="create" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
</ion-button>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-button menuToggle slot="start">
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button1 (click)="buttonClick(button1)">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-button menuToggle slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink