如何更改 ion-slide 的布局?
How to change the layout of ion-slide?
我正在尝试使用 ion-slides:
<ion-content>
<ion-slides pager="true" [options]="slideOpts">
<ion-slide class="step-one">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
</ion-slide>
<ion-slide class="step-two">
<h1>Heading</h1>
<p>blah, blah</p>
</ion-slide>
<ion-slide class="step-three">
<h1>Heading</h1>
<p>blah, blah</p>
<ion-button (click)="end()">END</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
但是,我希望内容流向 top-to-bottom 而不是 "Welcome" header 向左。
我查看了 slider layout documentation 但我看不出如何更改布局以垂直向下排列页面。
通过检查浏览器调试器中的 css,我发现我可以更改 flex 模型并通过将以下内容添加到我的 page.scss 似乎可以解决问题。有没有更多的'ionic'方法来解决这个问题?
.swiper-slide {
flex-direction: column;
}
抱歉,如果这个问题很基础,我是一名数据专家,所以前端开发(目前)还不是我的强项。
我的解决方案是添加以下内容 css:
.swiper-slide {
flex-direction: column;
}
我正在尝试使用 ion-slides:
<ion-content>
<ion-slides pager="true" [options]="slideOpts">
<ion-slide class="step-one">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, massa nam ante. Vel lacus viverra volutpat tortor ligula ornare, varius ut mauris ipsum mus torquent, scelerisque suspendisse penatibus, purus et arcu ipsum vehicula quam luctus. Consectetuer sed urna accumsan. Nec viverra felis varius pretium, volutpat in et cras, odio consectetuer lacinia risus feugiat sit etiam, commodo pulvinar, dolor non et inventore.</p>
</ion-slide>
<ion-slide class="step-two">
<h1>Heading</h1>
<p>blah, blah</p>
</ion-slide>
<ion-slide class="step-three">
<h1>Heading</h1>
<p>blah, blah</p>
<ion-button (click)="end()">END</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
但是,我希望内容流向 top-to-bottom 而不是 "Welcome" header 向左。
我查看了 slider layout documentation 但我看不出如何更改布局以垂直向下排列页面。
通过检查浏览器调试器中的 css,我发现我可以更改 flex 模型并通过将以下内容添加到我的 page.scss 似乎可以解决问题。有没有更多的'ionic'方法来解决这个问题?
.swiper-slide {
flex-direction: column;
}
抱歉,如果这个问题很基础,我是一名数据专家,所以前端开发(目前)还不是我的强项。
我的解决方案是添加以下内容 css:
.swiper-slide {
flex-direction: column;
}