Ignite UI for React 展開パネルは、縮小または展開の 2 つの状態で描画できる軽量のアコーディオン コンポーネントです。展開パネルは、マウス クリックまたはキーボード操作によって切り替えることができます。
React 展開パネルの例
EXAMPLE
TSX
CSS
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelUsage.css';
import { IgrExpansionPanel, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelUsage extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrExpansionPanel><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"slot="subtitle">Medium-large gun dog</h3><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span></IgrExpansionPanel></div>
);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelUsage/>);
tsx
igc-expansion-panel{
width: 100%;
}
css
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
<IgrExpansionPanel><h1slot="title">Golden Retriever</h1><h3slot="subtitle">Medium-large gun dog</h3><span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span></IgrExpansionPanel>tsx
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelPropsAndEvents.css';
import { IgrExpansionPanel, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelPropertiesAndEvents extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { subtitleClass: "", eventSpanClass: "eventSpanHidden", eventSpanText: "none" };
this.onExpansionPanelClosed = this.onExpansionPanelClosed.bind(this);
this.onExpansionPanelOpened = this.onExpansionPanelOpened.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample center"><IgrExpansionPanelclosed={this.onExpansionPanelClosed}opened={this.onExpansionPanelOpened}><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"className={this.state.subtitleClass}slot="subtitle">Medium-large gun dog</h3><divkey="epIndicator"slot="indicator">{this.state.expansionText}</div><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span></IgrExpansionPanel><spanclassName={this.state.eventSpanClass}>{this.state.eventSpanText}</span></div>
);
}
public onExpansionPanelClosed() {
this.setState({ subtitleClass: "", eventSpanClass: "eventSpanShown", eventSpanText: "Closed event fired!"});
window.clearTimeout(undefined);
window.setTimeout(() => {
this.setState({eventSpanClass: "eventSpanHidden"});
}, 2000);
}
public onExpansionPanelOpened() {
this.setState({ subtitleClass: "subtitleHidden", eventSpanClass: "eventSpanShown", eventSpanText: "Opened event fired!"});
window.clearTimeout(undefined);
window.setTimeout(() => {
this.setState({eventSpanClass: "eventSpanHidden"});
}, 2000);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelPropertiesAndEvents/>);
tsx
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelCustomization.css';
import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelComponentCustomization extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
this.state = { expansionText: "Show more" };
this.onExpansionPanelClosed = this.onExpansionPanelClosed.bind(this);
this.onExpansionPanelOpened = this.onExpansionPanelOpened.bind(this);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrExpansionPanelclosed={this.onExpansionPanelClosed}opened={this.onExpansionPanelOpened}indicatorPosition="end"><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"slot="subtitle">Medium-large gun dog</h3><divkey="epIndicator"slot="indicator">{this.state.expansionText}</div><imgkey="epImg"height="100"src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"alt=""></img><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span><IgrButtonkey="epBtn"href="https://en.wikipedia.org/wiki/Golden_Retriever"variant="outlined"target="_blank"><spankey="btnSpan">Read more</span></IgrButton></IgrExpansionPanel></div>
);
}
public onExpansionPanelClosed() {
this.setState({ expansionText: "Show more"});
}
public onExpansionPanelOpened() {
this.setState({ expansionText: "Show less"});
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelComponentCustomization/>);
tsx
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import'./ExpansionPanelStyling.css';
import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrExpansionPanelModule.register();
exportdefaultclass ExpansionPanelStyling extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrExpansionPanelindicatorPosition="end"><h1key="epTitle"slot="title">Golden Retriever</h1><h3key="epSubtitle"slot="subtitle">Medium-large gun dog</h3><imgkey="epImg"height="100"src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png"alt=""></img><spankey="epSpan">The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span><IgrButtonkey="epBtn"href="https://en.wikipedia.org/wiki/Golden_Retriever"variant="contained"target="_blank"><spankey="btnCaption">Read more</span></IgrButton></IgrExpansionPanel></div>
);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExpansionPanelStyling/>);
tsx
