Add new properties from Bootstrap Beta to Navbar (#19940)

Reactstrap Navbar new properties tests

Add contributor to be notified on changes
This commit is contained in:
Fábio Paiva
2017-09-26 20:42:31 +02:00
committed by Mohamed Hegazy
parent 8462fea245
commit 5e4682a0ba
3 changed files with 111 additions and 1 deletions

View File

@@ -1,6 +1,6 @@
// Type definitions for reactstrap 4.6
// Project: https://github.com/reactstrap/reactstrap#readme
// Definitions by: Ali Hammad Baig <https://github.com/alihammad>, Marco Falkenberg <https://github.com/mfal>, Danilo Barros <https://github.com/danilobjr>
// Definitions by: Ali Hammad Baig <https://github.com/alihammad>, Marco Falkenberg <https://github.com/mfal>, Danilo Barros <https://github.com/danilobjr>, Fábio Paiva <https://github.com/fabiopaiva>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

View File

@@ -2,6 +2,7 @@ import { CSSModule } from '../index';
interface Props {
light?: boolean;
dark?: boolean;
inverse?: boolean;
full?: boolean;
fixed?: string;
@@ -12,6 +13,7 @@ interface Props {
className?: string;
cssModule?: CSSModule;
toggleable?: boolean | string;
expand?: boolean | string;
}
declare var Navbar: React.StatelessComponent<Props>;

View File

@@ -3304,3 +3304,111 @@ class Example107 extends React.Component {
return <Input type="file" getRef={(input) => { this.input = input; }} />;
}
}
class Example108 extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="faded" dark toggleable>
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
class Example109 extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="faded" light expand>
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
class Example110 extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}