javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): update segment to work with an anchor tag

Browse Source
This commit is contained in:
Brandy Carney
2018-01-30 12:06:03 -05:00
parent c4ca0886b2
commit b70cca9340
6 changed files with 130 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/components/segment/segment.ios.scss
View File

@ -9,12 +9,6 @@
}
.segment-ios ion-segment-button {
display: flex;
flex: 1;
width: 0;
&:first-of-type .segment-button {
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
@include margin-horizontal(null, 0);

6
packages/core/src/components/segment/segment.md.scss
View File

@ -8,12 +8,6 @@
font-family: $segment-md-font-family;
}
.segment-md ion-segment-button {
display: flex;
flex: 1;
}
.segment-md .segment-button {
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);

16
packages/core/src/components/segment/segment.scss
View File

@ -13,6 +13,12 @@ ion-segment {
width: 100%;
}
ion-segment-button {
display: flex;
flex: 1;
}
.segment-button {
@include border-radius(0);
@include margin-horizontal(0);
@ -20,14 +26,22 @@ ion-segment {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-kerning: none;
user-select: none;
contain: content;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
&:active,
&:focus {
outline: none;
}
}
}

87
packages/core/src/components/segment/test/standalone/index.html
View File

@ -9,30 +9,46 @@
</head>
<body>
<ion-toolbar>
<ion-segment value="Free">
<ion-segment-button value="Paid">
Paid
</ion-segment-button>
<ion-segment-button value="Free">
Free
</ion-segment-button>
<ion-segment-button value="Top">
Top
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-segment color="dark" value="Reading List">
<ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Reading List">
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
<ion-icon name="glasses"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Shared Links">
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
<ion-icon name="at"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-segment color="danger">
<ion-segment-button value="Bookmarks">
<ion-segment id="browserSegment" color="danger">
<ion-segment-button href="#bookmarks" value="bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="Reading List">
<ion-segment-button href="#reading" value="reading">
Reading List
</ion-segment-button>
<ion-segment-button value="Shared Links">
<ion-segment-button href="#links" value="links">
Shared Links
</ion-segment-button>
</ion-segment>
<pre><code><span id="browserResults"></span></code></pre>
<ion-segment color="secondary" value="active">
<ion-segment-button value="active">
Active
@ -45,4 +61,63 @@
</ion-segment-button>
</ion-segment>
</body>
<script>
var segment = document.getElementById('browserSegment');
var results = document.getElementById('browserResults');
checkUrl();
segment.addEventListener('ionChange', function() {
checkUrl();
});
function checkUrl() {
var url = window.location.href;
if (url.search('#bookmarks') > -1) {
setResults('bookmarks');
} else if (url.search('#reading') > -1) {
setResults('reading');
} else if (url.search('#links') > -1) {
setResults('links');
}
}
function setResults(value) {
results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
segment.value = value;
}
</script>
<style>
body {
margin: 0;
}
ion-segment {
margin-bottom: 10px;
}
ion-toolbar ion-segment {
margin-bottom: 0;
}
pre {
border: 1px solid #e6e9ee;
background: white;
margin: 10px;
padding: 4px;
line-height: 24px;
}
code {
display: block;
padding: 0.5em;
background: #ffffff;
word-wrap: normal;
white-space: pre;
color: #314361;
}
</style>
</html>