mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(theming): update default colors and add examples
closes #13988
This commit is contained in:
Brandy Carney
@@ -21,28 +21,44 @@
|
||||
<ion-list>
|
||||
<ion-list-header>Badges Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-badge slot="end">99</ion-badge>
|
||||
<ion-label>Default Badge</ion-label>
|
||||
<ion-badge slot="end">00</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="end" color="primary">99</ion-badge>
|
||||
<ion-label>Primary Badge</ion-label>
|
||||
<ion-badge slot="end" color="primary">11</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="end" color="secondary">99</ion-badge>
|
||||
<ion-label>Secondary Badge</ion-label>
|
||||
<ion-badge slot="end" color="secondary">22</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Badge</ion-label>
|
||||
<ion-badge slot="end" color="tertiary">33</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Badge</ion-label>
|
||||
<ion-badge slot="end" color="success">44</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Badge</ion-label>
|
||||
<ion-badge slot="end" color="warning">55</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="end" color="danger">99</ion-badge>
|
||||
<ion-label>Danger Badge</ion-label>
|
||||
<ion-badge slot="end" color="danger">66</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="end" color="light">99</ion-badge>
|
||||
<ion-label>Light Badge</ion-label>
|
||||
<ion-badge slot="end" color="light">77</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Badge</ion-label>
|
||||
<ion-badge slot="end" color="medium">88</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="end" color="dark">99</ion-badge>
|
||||
<ion-label>Dark Badge</ion-label>
|
||||
<ion-badge slot="end" color="dark">99</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
|
||||
@@ -53,28 +69,44 @@
|
||||
<ion-list>
|
||||
<ion-list-header>Badges Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-badge slot="start">99</ion-badge>
|
||||
<ion-label>Default Badge</ion-label>
|
||||
<ion-badge slot="start">00</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="primary">99</ion-badge>
|
||||
<ion-label>Primary Badge</ion-label>
|
||||
<ion-badge slot="start" color="primary">11</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="secondary">99</ion-badge>
|
||||
<ion-label>Secondary Badge</ion-label>
|
||||
<ion-badge slot="start" color="secondary">22</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Badge</ion-label>
|
||||
<ion-badge slot="start" color="tertiary">33</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Success Badge</ion-label>
|
||||
<ion-badge slot="start" color="success">44</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning Badge</ion-label>
|
||||
<ion-badge slot="start" color="warning">55</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="danger">99</ion-badge>
|
||||
<ion-label>Danger Badge</ion-label>
|
||||
<ion-badge slot="start" color="danger">66</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="light">99</ion-badge>
|
||||
<ion-label>Light Badge</ion-label>
|
||||
<ion-badge slot="start" color="light">77</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Medium Badge</ion-label>
|
||||
<ion-badge slot="start" color="medium">88</ion-badge>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="dark">99</ion-badge>
|
||||
<ion-label>Dark Badge</ion-label>
|
||||
<ion-badge slot="start" color="dark">99</ion-badge>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
@@ -9,12 +9,18 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Default -->
|
||||
<ion-badge>99</ion-badge>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-badge color="primary">11</ion-badge>
|
||||
<ion-badge color="secondary">22</ion-badge>
|
||||
<ion-badge color="warning">33</ion-badge>
|
||||
<ion-badge color="danger">44</ion-badge>
|
||||
<ion-badge color="light">55</ion-badge>
|
||||
<ion-badge color="dark">66</ion-badge>
|
||||
<ion-badge>99</ion-badge>
|
||||
<ion-badge color="tertiary">33</ion-badge>
|
||||
<ion-badge color="success">44</ion-badge>
|
||||
<ion-badge color="warning">55</ion-badge>
|
||||
<ion-badge color="danger">66</ion-badge>
|
||||
<ion-badge color="light">77</ion-badge>
|
||||
<ion-badge color="medium">88</ion-badge>
|
||||
<ion-badge color="dark">99</ion-badge>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -22,30 +22,43 @@
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="primary">Primary</ion-button>
|
||||
<ion-button href="#" color="primary" class="activated">Primary.activated</ion-button>
|
||||
<ion-button href="#" class="activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="secondary">Secondary</ion-button>
|
||||
<ion-button href="#" color="secondary" class="activated">Secondary.activated</ion-button>
|
||||
<ion-button href="#" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button href="#" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="success">Success</ion-button>
|
||||
<ion-button href="#" class="activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="warning">Warning</ion-button>
|
||||
<ion-button href="#" color="warning" class="activated">Warning.activated</ion-button>
|
||||
<ion-button href="#" class="activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="danger">Danger</ion-button>
|
||||
<ion-button href="#" color="danger" class="activated">Danger.activated</ion-button>
|
||||
<ion-button href="#" class="activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="light">Light</ion-button>
|
||||
<ion-button href="#" color="light" class="activated">Light.activated</ion-button>
|
||||
<ion-button href="#" class="activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="medium">Medium</ion-button>
|
||||
<ion-button href="#" class="activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" color="dark">Dark</ion-button>
|
||||
<ion-button href="#" color="dark" class="activated">Dark.activated</ion-button>
|
||||
<ion-button href="#" class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button href="#" disabled>Disabled</ion-button>
|
||||
<ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
@@ -23,37 +23,47 @@
|
||||
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button color="primary" class="activated">Primary.activated</ion-button>
|
||||
<ion-button class="activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button color="secondary" class="activated">Secondary.activated</ion-button>
|
||||
<ion-button class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button color="tertiary" class="activated">Tertiary.activated</ion-button>
|
||||
<ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="success">Success</ion-button>
|
||||
<ion-button class="activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="warning">Warning</ion-button>
|
||||
<ion-button color="warning" class="activated">Warning.activated</ion-button>
|
||||
<ion-button class="activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button color="danger" class="activated">Danger.activated</ion-button>
|
||||
<ion-button class="activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button color="light" class="activated">Light.activated</ion-button>
|
||||
<ion-button class="activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="medium">Medium</ion-button>
|
||||
<ion-button class="activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
<ion-button color="dark" class="activated">Dark.activated</ion-button>
|
||||
<ion-button class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
@@ -20,61 +20,109 @@
|
||||
<ion-button fill="outline">Default</ion-button>
|
||||
<ion-button fill="outline" class="activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="primary">Primary</ion-button>
|
||||
<ion-button fill="outline" color="primary" class="activated">Primary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="outline" color="secondary" class="activated">Secondary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" color="warning">Warning</ion-button>
|
||||
<ion-button fill="outline" color="warning" class="activated">Warning.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" color="danger">Danger</ion-button>
|
||||
<ion-button fill="outline" color="danger" class="activated">Danger.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" color="light">Light</ion-button>
|
||||
<ion-button fill="outline" color="light" class="activated">Light.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" color="dark">Dark</ion-button>
|
||||
<ion-button fill="outline" color="dark" class="activated">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" disabled>Disabled</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear">Default</ion-button>
|
||||
<ion-button fill="clear" class="activated">Default.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" color="primary">Primary</ion-button>
|
||||
<ion-button fill="clear" color="primary" class="activated">Primary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="clear" color="secondary" class="activated">Secondary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" color="danger">Danger</ion-button>
|
||||
<ion-button fill="clear" color="danger" class="activated">Danger.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" color="light">Light</ion-button>
|
||||
<ion-button fill="clear" color="light" class="activated">Light.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" color="dark">Dark</ion-button>
|
||||
<ion-button fill="clear" color="dark" class="activated">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" disabled>Disabled</ion-button>
|
||||
</p>
|
||||
<ion-button fill="outline" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="success">Success</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="warning">Warning</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="danger">Danger</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="light">Light</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="medium">Medium</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="dark">Dark</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" disabled>Disabled</ion-button>
|
||||
<ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear">Default</ion-button>
|
||||
<ion-button fill="clear" class="activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="primary">Primary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="success">Success</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="warning">Warning</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="danger">Danger</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="light">Light</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="medium">Medium</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="dark">Dark</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" disabled>Disabled</ion-button>
|
||||
<ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
@@ -16,24 +16,32 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding text-center no-bounce>
|
||||
<ion-button round>button</ion-button>
|
||||
<ion-button round color="light">button light</ion-button>
|
||||
<ion-button round color="secondary">button secondary</ion-button>
|
||||
<ion-button round color="warning">button warning</ion-button>
|
||||
<ion-button round color="danger">button danger</ion-button>
|
||||
<ion-button round color="dark">button dark</ion-button>
|
||||
<ion-button round>Default</ion-button>
|
||||
<ion-button round color="primary">Primary</ion-button>
|
||||
<ion-button round color="secondary">Secondary</ion-button>
|
||||
<ion-button round color="tertiary">Tertiary</ion-button>
|
||||
<ion-button round color="success">Success</ion-button>
|
||||
<ion-button round color="warning">Warning</ion-button>
|
||||
<ion-button round color="danger">Danger</ion-button>
|
||||
<ion-button round color="light">Light</ion-button>
|
||||
<ion-button round color="medium">Medium</ion-button>
|
||||
<ion-button round color="dark">Dark</ion-button>
|
||||
|
||||
<ion-button fill="outline" round>button</ion-button>
|
||||
<ion-button fill="outline" round color="light">button light</ion-button>
|
||||
<ion-button fill="outline" round color="secondary">button secondary</ion-button>
|
||||
<ion-button fill="outline" round color="warning">button warning</ion-button>
|
||||
<ion-button fill="outline" round color="danger">button danger</ion-button>
|
||||
<ion-button fill="outline" round color="dark">button dark</ion-button>
|
||||
<ion-button fill="outline" round>Default</ion-button>
|
||||
<ion-button fill="outline" round color="primary">Primary</ion-button>
|
||||
<ion-button fill="outline" round color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="outline" round color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="outline" round color="success">Success</ion-button>
|
||||
<ion-button fill="outline" round color="warning">Warning</ion-button>
|
||||
<ion-button fill="outline" round color="danger">Danger</ion-button>
|
||||
<ion-button fill="outline" round color="light">Light</ion-button>
|
||||
<ion-button fill="outline" round color="medium">Medium</ion-button>
|
||||
<ion-button fill="outline" round color="dark">Dark</ion-button>
|
||||
|
||||
<ion-button round fill="clear">clear</ion-button>
|
||||
<ion-button round expand="block" color="danger">block</ion-button>
|
||||
<ion-button round expand="full" color="dark">full</ion-button>
|
||||
<ion-button round strong>strong</ion-button>
|
||||
<ion-button round fill="clear">Clear</ion-button>
|
||||
<ion-button round expand="block" color="danger">Block</ion-button>
|
||||
<ion-button round expand="full" color="dark">Full</ion-button>
|
||||
<ion-button round strong>Strong</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
@@ -9,11 +9,52 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button color="secondary">Secondary</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="dark">Dark</ion-button>
|
||||
<p>
|
||||
<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>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="primary">Primary</ion-button>
|
||||
<ion-button fill="outline" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="outline" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="outline" color="success">Success</ion-button>
|
||||
<ion-button fill="outline" color="warning">Warning</ion-button>
|
||||
<ion-button fill="outline" color="danger">Danger</ion-button>
|
||||
<ion-button fill="outline" color="light">Light</ion-button>
|
||||
<ion-button fill="outline" color="medium">Medium</ion-button>
|
||||
<ion-button fill="outline" color="dark">Dark</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="primary">Primary</ion-button>
|
||||
<ion-button fill="clear" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="clear" color="success">Success</ion-button>
|
||||
<ion-button fill="clear" color="warning">Warning</ion-button>
|
||||
<ion-button fill="clear" color="danger">Danger</ion-button>
|
||||
<ion-button fill="clear" color="light">Light</ion-button>
|
||||
<ion-button fill="clear" color="medium">Medium</ion-button>
|
||||
<ion-button fill="clear" color="dark">Dark</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button expand="block" color="light">Light</ion-button>
|
||||
<ion-button expand="block" color="medium">Medium</ion-button>
|
||||
<ion-button expand="block" color="dark">Dark</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button expand="full" color="light">Light</ion-button>
|
||||
<ion-button expand="full" color="medium">Medium</ion-button>
|
||||
<ion-button expand="full" color="dark">Dark</ion-button>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -20,40 +20,62 @@
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox color="primary" checked></ion-checkbox>
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox color="secondary" checked></ion-checkbox>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success</ion-label>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox color="warning" checked></ion-checkbox>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox color="danger" checked></ion-checkbox>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox color="light" checked></ion-checkbox>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium</ion-label>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox color="dark" checked></ion-checkbox>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@@ -9,13 +9,22 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Default -->
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
<ion-checkbox color="primary" checked></ion-checkbox>
|
||||
<ion-checkbox color="secondary" checked></ion-checkbox>
|
||||
<ion-checkbox color="warning" checked></ion-checkbox>
|
||||
<ion-checkbox color="danger" checked></ion-checkbox>
|
||||
<ion-checkbox color="dark" checked></ion-checkbox>
|
||||
<ion-checkbox color="light" checked></ion-checkbox>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-checkbox checked color="primary"></ion-checkbox>
|
||||
<ion-checkbox checked color="secondary"></ion-checkbox>
|
||||
<ion-checkbox checked color="tertiary"></ion-checkbox>
|
||||
<ion-checkbox checked color="success"></ion-checkbox>
|
||||
<ion-checkbox checked color="warning"></ion-checkbox>
|
||||
<ion-checkbox checked color="danger"></ion-checkbox>
|
||||
<ion-checkbox checked color="light"></ion-checkbox>
|
||||
<ion-checkbox checked color="medium"></ion-checkbox>
|
||||
<ion-checkbox checked color="dark"></ion-checkbox>
|
||||
|
||||
<!-- Disabled -->
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
<ion-checkbox disabled checked></ion-checkbox>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -21,29 +21,55 @@
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="end">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="end" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="end" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="end" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="end" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="end" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="end" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="end" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="end" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="end" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
|
||||
<ion-label>Dynamic Note Color (toggle)</ion-label>
|
||||
@@ -53,28 +79,53 @@
|
||||
<ion-list>
|
||||
<ion-list-header>Notes Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
<ion-label>Default Note</ion-label>
|
||||
<ion-note slot="start">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
<ion-label>Primary Note</ion-label>
|
||||
<ion-note slot="start" color="primary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
<ion-label>Secondary Note</ion-label>
|
||||
<ion-note slot="start" color="secondary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Tertiary Note</ion-label>
|
||||
<ion-note slot="start" color="tertiary">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Success Note</ion-label>
|
||||
<ion-note slot="start" color="success">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Warning Note</ion-label>
|
||||
<ion-note slot="start" color="warning">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
<ion-label>Danger Note</ion-label>
|
||||
<ion-note slot="start" color="danger">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
<ion-label>Light Note</ion-label>
|
||||
<ion-note slot="start" color="light">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Medium Note</ion-label>
|
||||
<ion-note slot="start" color="medium">99</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
<ion-label>Dark Note</ion-label>
|
||||
<ion-note slot="start" color="dark">99</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
@@ -9,14 +9,18 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Default Note -->
|
||||
<!-- Default -->
|
||||
<ion-note>Default Note</ion-note>
|
||||
|
||||
<!-- Note Colors -->
|
||||
<!-- Colors -->
|
||||
<ion-note color="primary">Primary Note</ion-note>
|
||||
<ion-note color="secondary">Secondary Note</ion-note>
|
||||
<ion-note color="tertiary">Tertiary Note</ion-note>
|
||||
<ion-note color="success">Success Note</ion-note>
|
||||
<ion-note color="warning">Warning Note</ion-note>
|
||||
<ion-note color="danger">Danger Note</ion-note>
|
||||
<ion-note color="light">Light Note</ion-note>
|
||||
<ion-note color="medium">Medium Note</ion-note>
|
||||
<ion-note color="dark">Dark Note</ion-note>
|
||||
|
||||
<!-- Notes in a List -->
|
||||
|
||||
@@ -11,12 +11,27 @@
|
||||
<body>
|
||||
<ion-radio-group>
|
||||
<ion-radio></ion-radio>
|
||||
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
<ion-radio color="secondary"></ion-radio>
|
||||
<ion-radio color="tertiary"></ion-radio>
|
||||
<ion-radio color="success"></ion-radio>
|
||||
<ion-radio color="warning"></ion-radio>
|
||||
<ion-radio color="danger" checked></ion-radio>
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
<ion-radio color="light"></ion-radio>
|
||||
<ion-radio color="medium"></ion-radio>
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
|
||||
<ion-radio disabled></ion-radio>
|
||||
<ion-radio color="secondary" disabled></ion-radio>
|
||||
</ion-radio-group>
|
||||
|
||||
<style>
|
||||
/* to be able to see the radio buttons */
|
||||
.radio-ios {
|
||||
border: 1px solid #dedede;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,20 +9,42 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-radio id="radio1"></ion-radio>
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
<ion-radio color="secondary"></ion-radio>
|
||||
<ion-radio color="danger"></ion-radio>
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
<ion-radio color="light"></ion-radio>
|
||||
<ion-radio disabled></ion-radio>
|
||||
<p>
|
||||
<ion-radio></ion-radio>
|
||||
<ion-radio color="primary"></ion-radio>
|
||||
<ion-radio color="secondary"></ion-radio>
|
||||
<ion-radio color="tertiary"></ion-radio>
|
||||
<ion-radio color="success"></ion-radio>
|
||||
<ion-radio color="warning"></ion-radio>
|
||||
<ion-radio color="danger"></ion-radio>
|
||||
<ion-radio color="light"></ion-radio>
|
||||
<ion-radio color="medium"></ion-radio>
|
||||
<ion-radio color="dark"></ion-radio>
|
||||
<ion-radio disabled></ion-radio>
|
||||
<ion-radio color="secondary" disabled></ion-radio>
|
||||
</p>
|
||||
|
||||
<ion-radio id="radio2" checked></ion-radio>
|
||||
<ion-radio color="primary" checked></ion-radio>
|
||||
<ion-radio color="secondary" checked></ion-radio>
|
||||
<ion-radio color="danger" checked></ion-radio>
|
||||
<ion-radio color="dark" checked></ion-radio>
|
||||
<ion-radio color="light" checked></ion-radio>
|
||||
<ion-radio checked disabled></ion-radio>
|
||||
<p>
|
||||
<ion-radio checked></ion-radio>
|
||||
<ion-radio checked color="primary"></ion-radio>
|
||||
<ion-radio checked color="secondary"></ion-radio>
|
||||
<ion-radio checked color="tertiary"></ion-radio>
|
||||
<ion-radio checked color="success"></ion-radio>
|
||||
<ion-radio checked color="warning"></ion-radio>
|
||||
<ion-radio checked color="danger"></ion-radio>
|
||||
<ion-radio checked color="light"></ion-radio>
|
||||
<ion-radio checked color="medium"></ion-radio>
|
||||
<ion-radio checked color="dark"></ion-radio>
|
||||
<ion-radio checked disabled></ion-radio>
|
||||
<ion-radio checked color="secondary" disabled></ion-radio>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
/* to be able to see the radio buttons */
|
||||
.radio-ios {
|
||||
border: 1px solid #dedede;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -46,7 +46,17 @@
|
||||
<ion-toolbar color="primary">
|
||||
<ion-searchbar show-cancel-button></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
`
|
||||
|
||||
<h5 padding-left padding-top> Search - Secondary Toolbar </h5>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-searchbar></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Tertiary Toolbar </h5>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-searchbar></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Success Toolbar </h5>
|
||||
<ion-toolbar color="success">
|
||||
<ion-searchbar></ion-searchbar>
|
||||
@@ -62,16 +72,21 @@
|
||||
<ion-searchbar></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Light Toolbar </h5>
|
||||
<ion-toolbar color="light">
|
||||
<ion-searchbar show-cancel-button></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Medium Toolbar </h5>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-searchbar show-cancel-button></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Dark Toolbar </h5>
|
||||
<ion-toolbar color="dark">
|
||||
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Light Toolbar </h5>
|
||||
<ion-toolbar color="light">
|
||||
<ion-searchbar show-cancel-button></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="danger">
|
||||
<h4 >H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
</ion-text>
|
||||
|
||||
<ion-text color="dark">
|
||||
|
||||
@@ -9,12 +9,22 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-toggle checked></ion-toggle>
|
||||
<ion-toggle color="secondary" (ionChange)="kiwiChange($event)" checked></ion-toggle>
|
||||
<ion-toggle color="danger" name="cherry" checked></ion-toggle>
|
||||
<ion-toggle color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
|
||||
<ion-toggle color="warning" checked></ion-toggle>
|
||||
<ion-toggle color="dark" checked></ion-toggle>
|
||||
<!-- Default -->
|
||||
<ion-toggle></ion-toggle>
|
||||
|
||||
<!-- Colors -->
|
||||
<ion-toggle checked color="primary"></ion-toggle>
|
||||
<ion-toggle checked color="secondary"></ion-toggle>
|
||||
<ion-toggle checked color="tertiary"></ion-toggle>
|
||||
<ion-toggle checked color="success"></ion-toggle>
|
||||
<ion-toggle checked color="warning"></ion-toggle>
|
||||
<ion-toggle checked color="danger"></ion-toggle>
|
||||
<ion-toggle checked color="light"></ion-toggle>
|
||||
<ion-toggle checked color="medium"></ion-toggle>
|
||||
<ion-toggle checked color="dark"></ion-toggle>
|
||||
|
||||
<!-- Disabled -->
|
||||
<ion-toggle checked disabled></ion-toggle>
|
||||
<ion-toggle checked disabled color="secondary"></ion-toggle>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -22,6 +22,14 @@
|
||||
<ion-title>Secondary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning</ion-title>
|
||||
</ion-toolbar>
|
||||
@@ -34,6 +42,10 @@
|
||||
<ion-title>Light</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-title>Dark</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -21,6 +21,14 @@
|
||||
<ion-title>Secondary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Warning</ion-title>
|
||||
</ion-toolbar>
|
||||
@@ -33,6 +41,10 @@
|
||||
<ion-title>Light</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-title>Dark</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -14,22 +14,31 @@
|
||||
<ion-title>Toolbar - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Toolbar - Primary Translucent</ion-title>
|
||||
<ion-title>Primary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Toolbar - Secondary Translucent</ion-title>
|
||||
<ion-title>Secondary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Toolbar - Light Translucent</ion-title>
|
||||
<ion-toolbar color="tertiary">
|
||||
<ion-title>Tertiary - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Toolbar - Danger Translucent</ion-title>
|
||||
<ion-toolbar color="success">
|
||||
<ion-title>Success - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="warning">
|
||||
<ion-title>Toolbar - Warning Translucent</ion-title>
|
||||
<ion-title>Warning - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="danger">
|
||||
<ion-title>Danger - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>Light - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="medium">
|
||||
<ion-title>Medium - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar color="dark">
|
||||
<ion-title>Toolbar - Dark Translucent</ion-title>
|
||||
<ion-title>Dark - Translucent</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
@@ -4,15 +4,15 @@
|
||||
// ----------------------------------
|
||||
|
||||
// Private color variables, use colors() to override
|
||||
$primary: #488aff;
|
||||
$secondary: #32db64;
|
||||
$tertiary: #f4a942;
|
||||
$primary: #3880ff;
|
||||
$secondary: #0cd1e8;
|
||||
$tertiary: #7044ff;
|
||||
$success: #10dc60;
|
||||
$warning: #ffce00;
|
||||
$danger: #f53d3d;
|
||||
$light: #f4f4f4;
|
||||
$danger: #f04141;
|
||||
$light: #f4f5f8;
|
||||
$medium: #989aa2;
|
||||
$dark: #222;
|
||||
$dark: #222428;
|
||||
|
||||
// Allows users to override an individual color
|
||||
$colors: () !default;
|
||||
|
||||
Reference in New Issue
Block a user