javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +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

16
packages/core/src/components/segment-button/readme.md
View File

@ -56,6 +56,14 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
boolean boolean
#### href
string
Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered.
#### mode #### mode
@ -98,6 +106,14 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
boolean boolean
#### href
string
Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered.
#### mode #### mode

30
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -16,7 +16,7 @@ export class SegmentButton {
*/ */
@Event() ionClick: EventEmitter<SegmentButtonEventDetail>; @Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@Prop({mutable: true}) activated = false; @Prop({ mutable: true }) activated = false;
/** /**
* The color to use for the text color. * The color to use for the text color.
@ -40,22 +40,21 @@ export class SegmentButton {
*/ */
@Prop({ mutable: true }) disabled = false; @Prop({ mutable: true }) disabled = false;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
/** /**
* The value of the segment button. * The value of the segment button.
*/ */
@Prop({ mutable: true }) value: string; @Prop({ mutable: true }) value: string;
segmentButtonClick(ev: UIEvent) {
ev.preventDefault();
ev.stopPropagation();
this.emitClick();
}
/** /**
* Emit the click event to the parent segment * Emit the click event to the parent segment
*/ */
private emitClick() { private segmentButtonClick() {
clearTimeout(this.styleTmr); clearTimeout(this.styleTmr);
this.styleTmr = setTimeout(() => { this.styleTmr = setTimeout(() => {
@ -94,10 +93,17 @@ export class SegmentButton {
...elementClasses ...elementClasses
}; };
const TagType = this.href ? 'a' : 'button';
return [ return [
<button onClick={this.segmentButtonClick.bind(this)} class={buttonClasses} aria-pressed={this.activated}> <TagType
<slot></slot> aria-pressed={this.activated}
</button> class={buttonClasses}
disabled={this.disabled}
href={this.href}
onClick={this.segmentButtonClick.bind(this)}>
<slot></slot>
</TagType>
]; ];
} }
} }

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

@ -9,12 +9,6 @@
} }
.segment-ios ion-segment-button { .segment-ios ion-segment-button {
display: flex;
flex: 1;
width: 0;
&:first-of-type .segment-button { &:first-of-type .segment-button {
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius); @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
@include margin-horizontal(null, 0); @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; font-family: $segment-md-font-family;
} }
.segment-md ion-segment-button {
display: flex;
flex: 1;
}
.segment-md .segment-button { .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); @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);

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

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

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

@ -9,30 +9,46 @@
</head> </head>
<body> <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 color="dark" value="Reading List">
<ion-segment-button value="Bookmarks"> <ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon> <ion-icon name="book"></ion-icon>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="Reading List"> <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>
<ion-segment-button value="Shared Links"> <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-button>
</ion-segment> </ion-segment>
<ion-segment color="danger"> <ion-segment id="browserSegment" color="danger">
<ion-segment-button value="Bookmarks"> <ion-segment-button href="#bookmarks" value="bookmarks">
Bookmarks Bookmarks
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="Reading List"> <ion-segment-button href="#reading" value="reading">
Reading List Reading List
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="Shared Links"> <ion-segment-button href="#links" value="links">
Shared Links Shared Links
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<pre><code><span id="browserResults"></span></code></pre>
<ion-segment color="secondary" value="active"> <ion-segment color="secondary" value="active">
<ion-segment-button value="active"> <ion-segment-button value="active">
Active Active
@ -45,4 +61,63 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</body> </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> </html>