teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

コード削除

2017/11/06 00:04

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -5,45 +5,7 @@
5
5
  ###発生している問題・エラーメッセージ
6
6
  機能自体は実現できているが画面に収まりきらずスクロールバーが出る場合に親の背景が途切れてしまう。
7
7
 
8
- ###該当のソースコード
9
8
 
10
- ```html
11
- <!-- parent.component.heml -->
12
- <div>
13
- <mat-slider min="50" max="200" step="1" [(ngModel)]="value"></mat-slider>
14
- <span>{{ value }}</span>
15
- <div>
16
- <svg [magnification]="value"></svg>
17
- </div>
18
- </div>
19
- ```
20
- ```html
21
- <!-- svg.component.html -->
22
- <div class="background">
23
- <svg [attr.viewBox]="viewBox()">
24
- <g>
25
- <rect x="0" y="0" width="100" height="100"/>
26
- </g>
27
- </svg>
28
- </div>
29
- ```
30
- ```typescript
31
- //svg.component.ts
32
- //import省略
33
- @Component({
34
- selector: 'svg',
35
- etc...
36
- )}
37
-
38
- export class svgComponent {
39
- @Input() magnification: number;
40
-
41
- viewBox(): string{
42
- return '0 0 ' + 100 * this.magniication / 100 + ' ' + 100 * this.magnification / 100;
43
- }
44
- }
45
-
46
- ```
47
9
  ViewBoxのWidthとHeightをTypescript側で親のスライダーの値によって大きさを変えている状態です。
48
10
 
49
11
  よろしくお願いします。

2

ファイル名の追記

2017/11/06 00:04

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,9 @@
8
8
  ###該当のソースコード
9
9
 
10
10
  ```html
11
+ <!-- parent.component.heml -->
11
12
  <div>
12
- <mat-slider min="1" max="100" step="1" [(ngModel)]="value"></mat-slider>
13
+ <mat-slider min="50" max="200" step="1" [(ngModel)]="value"></mat-slider>
13
14
  <span>{{ value }}</span>
14
15
  <div>
15
16
  <svg [magnification]="value"></svg>
@@ -17,7 +18,7 @@
17
18
  </div>
18
19
  ```
19
20
  ```html
20
- <!-- svg.html -->
21
+ <!-- svg.component.html -->
21
22
  <div class="background">
22
23
  <svg [attr.viewBox]="viewBox()">
23
24
  <g>
@@ -27,6 +28,7 @@
27
28
  </div>
28
29
  ```
29
30
  ```typescript
31
+ //svg.component.ts
30
32
  //import省略
31
33
  @Component({
32
34
  selector: 'svg',

1

コードの追加

2017/11/02 02:47

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,17 @@
6
6
  機能自体は実現できているが画面に収まりきらずスクロールバーが出る場合に親の背景が途切れてしまう。
7
7
 
8
8
  ###該当のソースコード
9
+
9
10
  ```html
11
+ <div>
12
+ <mat-slider min="1" max="100" step="1" [(ngModel)]="value"></mat-slider>
13
+ <span>{{ value }}</span>
14
+ <div>
15
+ <svg [magnification]="value"></svg>
16
+ </div>
17
+ </div>
18
+ ```
19
+ ```html
10
20
  <!-- svg.html -->
11
21
  <div class="background">
12
22
  <svg [attr.viewBox]="viewBox()">
@@ -16,6 +26,22 @@
16
26
  </svg>
17
27
  </div>
18
28
  ```
29
+ ```typescript
30
+ //import省略
31
+ @Component({
32
+ selector: 'svg',
33
+ etc...
34
+ )}
35
+
36
+ export class svgComponent {
37
+ @Input() magnification: number;
38
+
39
+ viewBox(): string{
40
+ return '0 0 ' + 100 * this.magniication / 100 + ' ' + 100 * this.magnification / 100;
41
+ }
42
+ }
43
+
44
+ ```
19
45
  ViewBoxのWidthとHeightをTypescript側で親のスライダーの値によって大きさを変えている状態です。
20
46
 
21
47
  よろしくお願いします。