| title |
|---|
ion-button |
import Props from '@ionic-internal/component-api/v8/button/props.md'; import Events from '@ionic-internal/component-api/v8/button/events.md'; import Methods from '@ionic-internal/component-api/v8/button/methods.md'; import Parts from '@ionic-internal/component-api/v8/button/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/button/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/button/slots.md';
<title>ion-button: Style Buttons with Custom CSS Properties</title>import EncapsulationPill from '@components/page/api/EncapsulationPill';
Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
import Basic from '@site/static/usage/v8/button/basic/index.md';
このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは display: inline-block を持ちますが、このプロパティを設定すると、ボタンは display: block を持つ全角要素に変更されます。
import Expand from '@site/static/usage/v8/button/expand/index.md';
このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを "round" に設定すると、ボタンは丸みを帯びた要素に変更されます。
import Shape from '@site/static/usage/v8/button/shape/index.md';
この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。
import Fill from '@site/static/usage/v8/button/fill/index.md';
この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます
import Size from '@site/static/usage/v8/button/size/index.md';
import Icons from '@site/static/usage/v8/button/icons/index.md';
import Colors from '@site/static/usage/v8/button/theming/colors/index.md';
import CSSProps from '@site/static/usage/v8/button/theming/css-properties/index.md';
ボタンはアクセスしやすいように作られていますが、その内容によっては調整が必要な場合があります。ボタンコンポーネントは、ネイティブのbutton elementをレンダリングし、ネイティブのボタンが提供する機能を利用できるようにします。
ボタンのテキスト・コンテンツがコンテナからはみ出す場合が多々あります。このような場合、すべてのテキストがまだ読めるように、ボタンの内側にテキストを折り返すことをお勧めします。ボタンコンポーネントは、テキストの余分な行を収容するために、その高さを自動的に調整します。
テキストが長すぎて収まらない場合、ボタンテキストは自動的に次の行に折り返されません。テキストを折り返すには、ion-text-wrapクラスを追加して、white-spaceプロパティを"normal"に設定します。これは将来のメジャーリリースでデフォルトになる予定である。
:::info max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。 :::
import TextWrapping from '@site/static/usage/v8/button/text-wrapping/index.md';