Giter VIP home page Giter VIP logo

reactstrap's Introduction

reactstrap

NPM Version Build Status Coverage Status License

reactstrap

Stateless React Components for Bootstrap 5.

If you're using Bootstrap 4, you'll need to use Reactstrap v8

Getting Started

Follow the create-react-app instructions to get started and then follow the reactstrap version of adding bootstrap.

tl;dr

npx create-react-app my-app
cd my-app/
npm start

or, if npx (Node >= 6 and npm >= 5.2 ) not available

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

Then open http://localhost:3000/ to see your app. The initial structure of your app is setup. Next, let's add reactstrap and bootstrap.

Adding Bootstrap

Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:

npm i bootstrap
npm i reactstrap react react-dom

Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';

Import required reactstrap components within src/App.js file or your custom component files:

import { Button } from 'reactstrap';

Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example App.js redone using reactstrap.

Dependencies

Required Peer Dependencies

These libraries are not bundled with Reactstrap and required at runtime:

About the Project

This library contains React Bootstrap components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, Poppers.js via react-popper is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.

There are a few core concepts to understand in order to make the most out of this library.

  1. Your content is expected to be composed via props.children rather than using named props to pass in Components.

    // Content passed in via props
    const Example = (props) => {
      return (
        <p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger>!</p>
      );
    }
    
    // Content passed in as children (Preferred)
    const PreferredExample = (props) => {
      return (
        <p>
          This is a <a href="#" id="TooltipExample">tooltip</a> example.
          <Tooltip target="TooltipExample">
            <TooltipContent/>
          </Tooltip>
        </p>
      );
    }
  2. Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like tether), or automatically include non-content based elements.

    Examples:

    • isOpen - current state for items like dropdown, popover, tooltip
    • toggle - callback for toggling isOpen in the controlling component
    • color - applies color classes, ex: <Button color="danger"/>
    • size - for controlling size classes. ex: <Button size="sm"/>
    • tag - customize component output by passing in an element name or Component
    • boolean based props (attributes) when possible for alternative style classes or visually-hidden content

https://reactstrap.github.io

Documentation search is powered by Algolia's DocSearch.

Here are some ready-to-go examples for CodeSandbox that you can experiment with.

https://github.com/reactstrap/code-sandbox-examples

Development

Install dependencies:

yarn install

Run examples at http://localhost:8080/ with webpack dev server:

yarn start

Run tests & coverage report:

yarn cover

Watch tests:

yarn test

Releasing

Release branches/versioning/notes will be automatically created and maintained by the release-please github action. When you're ready to publish the release, just merge the release branch. The release will be created, the new package will be published, and the updated docs will be deployed to https://reactstrap.github.io/.

In the wild

Organizations and projects using reactstrap

Submit a PR to add to this list!

Looking to build, document and publish reusable components built on top of reactstrap? Consider forking https://github.com/reactstrap/component-template to kickstart your project!

reactstrap's People

Contributors

aaronmars avatar ajax2012 avatar ashniu123 avatar balloob avatar bestguy avatar bpas247 avatar cbfx avatar darreneng avatar davidacevedo avatar dependabot-preview[bot] avatar dependabot[bot] avatar eddywashere avatar gergely-nagy avatar github-actions[bot] avatar gthomas-appfolio avatar hsource avatar iamandrewluca avatar illiteratewriter avatar juanmaguitar avatar kinke avatar kyletsang avatar lijinyao avatar mking-clari avatar monteith avatar phwebi avatar pravdomil avatar supergibbs avatar theinfiltrator7 avatar thesharpieone avatar virgofx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reactstrap's Issues

PopoverContent not re-rendering

If you edit the props for PopverContent, and it's already open, it doesn't re-render the content until closed and opened again.

Take a look at the following codepen... just open one and let it sit for a few seconds...
http://codepen.io/zeroasterisk/pen/zKxgrJ

You can see in the console.log that the state --> props are updating, but the UI is not. If you close and re-open the popover, it shows the new/current props.

Curious behaviour with DropdownToggle

It seems that there's a particular behaviour that tells the DropdownToggle component (and maybe others) to use the children as "master button" if there's a single one, instead of creating a new one. I feel like it's a mistake:

  • It's not an intuitive behaviour - without looking at the source code, one might wonder what happens (I sure did)

  • The tag prop already allows us to customize the way the button is rendered, and is much more idomatic than adding props to already-rendered components.

  • It makes it quite harder to use icons inside a DropdownToggle (because the icon props are rewritten, so the classNames are lost). For example, the following doesn't work:

    <DropdownToggle>
        <i className={`fa fa-user`} />
    </DropdownToggle>

    One has to write the following:

    <DropdownToggle>
        <i className={`fa fa-user`} /> <span></span>
    </DropdownToggle>

    In order to bypass the check.

  • Additional issues may arise (for example, without testing, I guess that such a pattern also breaks refs, and triggers more renders than required).

Would you consider removing this behaviour?

It seems component inside modal will not update anymore

Following code, {this.props.field.name} will not change after state change, unless we change {isOpen}
The children components' updating are blocked.

Not sure why, any ideas?

      <Modal isOpen toggle={closeModal}>
        <ModalHeader toggle={closeModal}>{this.props.field.name}</ModalHeader>
        <ModalBody>
            ...
        </ModalBody>
      </Modal>

Relationship to react-bootstrap and react-bootstrap-4

Hi, I was wondering what are the pros and cons of this project versus react-bootstrap and react-bootstrap-4 (a temporary fork for bootstrap 4). It would be great to have a short statement as part of the intro.

Build: include bootstrap via npm

Currently, bootstrap is being inline included in index.html via a cdn link. We should pull bootstrap 4 in via npm and use a webpack loader to import it.

React class constructor pattern blocks context

The constructor pattern used in most of these components:

constructor(props) {
  super(props)
}

Ignores the other arguments passed to the component: (props, context, updater)

This means, if you use something that requires context, like react-router, it won't be passed through to the child components.

This pattern would solve that and be a little more future-proof.

constructor(...args) {
   super(...args);
}

Though in cases where you're not doing anything else in the constructor, it's probably best just to avoid overriding it.

conditional modal footer closes modal

Is there a way to conditionally display/toggle the modal footer without causing the modal to close?

My use case establishes the modal footer as conditional when there are files selected i.e I display buttons to remove files. I'm running into the issue that while I can make the modal footer conditionally appear, the case in which the footer should disappear causes the entire modal to close.

Take a look at the following bin sample, toggle the modal and add a file. When you remove files the entire modal closes.
http://www.webpackbin.com/NkyVH5_jb

Lint task not working on windows

By the looks of it the eslint 'src/**' was not matching any src files on windows. Possibly only tested on MAC?
Changing it to eslint src/** uncovers many linting errors.

After removing the quotes on windows I get these 40 eslint errors. No idea why these aren't being picked up on the CI build. I also get about 4000 line break errors but I've filtered those out from the output below for now. We could either ignore the linebreak eslint rule, because git can work any inconsistencies out, or add a fix task which changes them all to LF automatically, to help windows users.

Also, any ideas why the CI task is not picking up these 40 errors?

The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead.

C:\Dev\reactstrap\src\Button.js
  13:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\ButtonGroup.js
  5:17  error  'aria-label' PropType is defined but prop is never used  react/no-unused-prop-types
  7:9   error  'role' PropType is defined but prop is never used        react/no-unused-prop-types

C:\Dev\reactstrap\src\ButtonToolbar.js
  5:17  error  'aria-label' PropType is defined but prop is never used  react/no-unused-prop-types
  7:9   error  'role' PropType is defined but prop is never used        react/no-unused-prop-types

C:\Dev\reactstrap\src\Col.js
  19:7  error  'xs' PropType is defined but prop is never used  react/no-unused-prop-types
  20:7  error  'sm' PropType is defined but prop is never used  react/no-unused-prop-types
  21:7  error  'md' PropType is defined but prop is never used  react/no-unused-prop-types
  22:7  error  'lg' PropType is defined but prop is never used  react/no-unused-prop-types
  23:7  error  'xl' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Dropdown.js
  14:10  error  'group' PropType is defined but prop is never used      react/no-unused-prop-types
  16:9   error  'size' PropType is defined but prop is never used       react/no-unused-prop-types
  17:8   error  'tag' PropType is defined but prop is never used        react/no-unused-prop-types
  21:14  error  'className' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\DropdownItem.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\DropdownMenu.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\DropdownToggle.js
   7:13  error  'children' PropType is defined but prop is never used       react/no-unused-prop-types
  11:18  error  'data-toggle' PropType is defined but prop is never used    react/no-unused-prop-types
  12:20  error  'aria-haspopup' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Form.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\FormFeedback.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\FormGroup.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\FormText.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Input.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Label.js
  20:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types
  28:7   error  'xs' PropType is defined but prop is never used        react/no-unused-prop-types
  29:7   error  'sm' PropType is defined but prop is never used        react/no-unused-prop-types
  30:7   error  'md' PropType is defined but prop is never used        react/no-unused-prop-types
  31:7   error  'lg' PropType is defined but prop is never used        react/no-unused-prop-types
  32:7   error  'xl' PropType is defined but prop is never used        react/no-unused-prop-types

C:\Dev\reactstrap\src\Media.js
  7:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Modal.js
  186:9  error  Expected 'this' to be used by class method 'render'  class-methods-use-this

C:\Dev\reactstrap\src\Nav.js
  6:13  error  'disabled' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Navbar.js
  10:9  error  'role' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\NavbarToggler.js
  6:9  error  'type' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\NavDropdown.js
  6:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Pagination.js
  5:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\PaginationItem.js
  6:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\Tag.js
  8:13  error  'children' PropType is defined but prop is never used  react/no-unused-prop-types

C:\Dev\reactstrap\src\TetherContent.js
  139:9  error  Expected 'this' to be used by class method 'render'  class-methods-use-this

✖ 40 problems (40 errors, 0 warnings)

<NavbarToggler> usage

Hi there ,
Would it be possible to include a simple example on how to implement a collapsible Navbar component? I can see the <NavbarToggler> is available but haven't been able to make it work.
Many thanks,
Rog

Add Documentation for customizing component output with tag prop

There should be a page that describes customizing the component tag that is rendered. A great example would be a snippet that documents how to use this with a React Router Link.

import React from 'react';
import { Link } from 'react-router';
import { Container, Row, Col, Nav, NavItem, NavLink } from 'reactstrap';

const Example = (props) => {
  return (
    <NavItem>
      <NavLink tag={Link} to="/test" activeClassName="active">
        {props.item.name}
      </NavLink>
    </NavItem>
  );
};

Card components

Components:

  • Card
    • inverse - boolean - apply card inverse class
    • color - string - apply card color classes
    • block - boolean - apply card-block class
    • outline - boolean - apply card-outline-* class
  • CardGroup
  • CardDeck
  • CardColumns
  • CardImg
    • top - boolean - apply card-img-top class
    • bottom - boolean - apply card-img-bottom class
    • alt
    • src
  • CardImgOverlay
  • CardBlock
  • CardTitle
  • CardSubTitle
  • CardText
  • CardHeader
  • CardFooter

Example:

<Card>
  <CardHeader>Card header</CardHeader>
  <CardImg top src="path/img.png" alt="Card image cap">
  <CardImgOverlay>{cardBlockContent}</CardImgOverlay>
  <CardBlock>
    <CardTitle>Card title</CardTitle>
    <CardSubTitle>Card subtitle</CardSubTitle>
    <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
  </CardBlock>
  <CardFooter>Card footer</CardFooter>
</Card>

Ideas

Current PropType “standards":

  • isOpen - current state for items like dropdown, popover, tooltip
  • toggle - callback for toggling isOpen in the controlling component
  • color - applies color classes, ex: <Button color="danger"/> // <button class="btn btn-danger"/>
  • size for controlling size classes. ex: <Button size="sm"/> // <button class="btn btn-sm"/>
  • boolean based props (attributes) when possible for alt classes or sr-only content

Compare to React Bootstrap in README?

We're an open source CMS (silverstripe.org) which is redesigning the CMS UI in React, and we're planning to use Bootstrap to make it easy for contributors to customise. At the moment, we're planning to integrate React+Bootstrap via the https://react-bootstrap.github.io/ project. Your repo has just come on our radar, looks like you're making great progress with covering the bootstrap APIs!

Would you be able to give some insight on why you decided to start this project, rather than contributing to https://react-bootstrap.github.io/? I think a lot of potential users of your library would have the same question, so it might be worth listing notable differences in the README?

Feel free to close this issue if you think its inappropriate to make direct comparisons to other libraries (it's technically not a bug). We're just interested in your take to aid our own evaluation of these two libraries :)

/cc @sminnee @hafriedlander @clarkepaul @tractorcow

Namespace modal with custom css class for styling

Issue description

Have custom css class for modal-dialog to allow namespac'ing for modal styling.

  • version #2.6.0
  • components: Modal

Right now if a user needs to style modals (say lg modal) it has to be a global css styling, as the modal is attached to the body.

User should be able to have a different styles to be applied for different modals. This could be achieved by enabling the user to provide className on <Modal> component. This way user should be able to style each modal in a different way if need be with a top level css class.

Existing DOM representation:

<div>
  <Button color="danger" onClick={this.toggle}>Launch Modal</Button>
  <Modal isOpen={this.state.modal} toggle={this.toggle}>
    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
    <ModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ModalBody>
    <ModalFooter>
      <Button color="primary" onClick={this.toggle}>Do Something</Button>
      <Button color="secondary" onClick={this.toggle}>Cancel</Button>
    </ModalFooter>
  </Modal>
</div>

Suggested change:

<div>
  <Button color="danger" onClick={this.toggle} className="my-custom-modal">Launch Modal</Button>
  <Modal isOpen={this.state.modal} toggle={this.toggle}>
    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
    <ModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ModalBody>
    <ModalFooter>
      <Button color="primary" onClick={this.toggle}>Do Something</Button>
      <Button color="secondary" onClick={this.toggle}>Cancel</Button>
    </ModalFooter>
  </Modal>
</div>

Link in DropdownItem will not work in IE11

If I put Link inside dropdownitem, it will not work in IE11. It's ok in chrome.

Any ideas?

import {Link} from 'react-router';

     <Dropdown isOpen={this.state.isAdminMenuOpen} toggle={this.toggleAdminMenu.bind(this)}>
            <DropdownToggle>
              <Button color="secondary"><i className="icon-cog" /></Button>
            </DropdownToggle>
            <DropdownMenu right>
              <DropdownItem><Link to="/me"> Account </Link></DropdownItem>
              <DropdownItem><Link to="/admin">Admin</Link></DropdownItem>
              <DropdownItem divider/>
              <DropdownItem onClick={this.props.actions.logout}>Logout</DropdownItem>
            </DropdownMenu>
          </Dropdown>

Optionally hide modal backdrop in Modal

Issue description

  • While using Modal it would be nice if Modal has an option to hide the backdrop. Right now it is compulsorily shown and there is no way to configure the Modal to not show the backdrop.

Could be similar to bootstrap v4 modal

  • version 3.1.0
  • components: Modal

Dynamic Tabs

Issue description

I tried to create a dynamic tabs using map function,

my code look like this

constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            activeTab: '1'
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab.i
            });
        }
    }

    render() {
        return (
            <div>
                <Nav tabs>
                    {this.props.SetupTabTitles.map((data, i) =>
                        <NavItem>
                            <NavLink className={classnames({ active: this.state.activeTab === {i}} )} onClick={() => {this.toggle({i}); }} key={i}>
                                {data.tabTitles}
                            </NavLink>
                        </NavItem>
                    )}
                </Nav>

                <TabContent activeTab={this.state.activeTab}>
                    {this.props.SetupTabTitles.map(function(data, i) {
                        if(data.tabTitles == 'Position'){
                            return (
                                <TabPane tabId={i} key={i}>
                                    test1
                                </TabPane>
                            )
                        }else if(data.tabTitles == 'Periodic'){
                            return (
                                <TabPane tabId={i} key={i}>
                                    <PeriodicSetup />
                                </TabPane>
                            )
                        }
                    })}
                </TabContent>
            </div>
        );
    }

It works, but it has issues with the appearance, the tabs didn't show or indicate which tab is active.

  • version #3.1.0
  • components: Modal

Exception when just using Col

I am getting this exception when I am just using the Col component.

I am using react 15.2.0-rc.1

warning.js?8a56:44 Warning: Unknown propmdon <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I think the fix would be to list out all the proptypes on line 68 in lib/Col.js

var attributes = _objectWithoutProperties(props, ['className'].concat(Object.keys(propTypes)));

Button dropdown size

To make a small button group with a small dropdown, I am passing btn-group-sm to ButtonDropdown.

<ButtonGroup
            size="sm"
          >
            <Button color="primary">Grid</Button>
            <Button color="secondary">Chart</Button>
            <ButtonDropdown className="btn-group-sm" isOpen={this.state.open} toggle={this.toggle}>
              <DropdownToggle caret>
                <Button>Dropdown</Button>
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem>Dropdown Link</DropdownItem>
                <DropdownItem>Dropdown Link</DropdownItem>
              </DropdownMenu>
            </ButtonDropdown>
          </ButtonGroup>

Do you think this is the right way to do this? Should ButtonDropdown accept a size parameter?

From one point of view, I think it's best for ButtonDropdown to inherit size from its outer ButtonGroup, but at the same time I don't reactstrap to deviate too much from the core library's behavior.

Roadmap to Stable Release

Some of these items include nested components, listing only top level sections.

  • Tables
  • Container
  • Row
  • Col
  • Button
  • ButtonGroup
  • ButtonDropdown
  • Dropdown
  • Modal
  • Popover
  • Tag
  • Card
  • Tooltip
  • Navbar
  • Nav
    • TabContent, TabPane
  • Forms (In Progress)
  • Jumbotron
  • InputGroup
  • Alert
  • MediaObject
  • Breadcrumb
  • Pagination
  • Progress
  • ListGroup
  • Scrollspy
  • Collapse
  • Carousel
  • Utilities
  • Better Documentation for customizing component output with tag prop

Each component should have an individual issue to track status that contains the following

  • any component names necessary
  • propTypes for each component
  • example react markup

Linter

I have noticed that while there is an eslintrc, many of the files have linter errors.
image

I am not sure if the eslintrc would need to be updated to match the particular code-style used or if the code should be updated to make the linter happy.

It's no big deal, just wanted know which direction to go.

Attach clickHandler on backdrop element instead of document

Issue description

Bumped onto a scenario where I need to show one Modal on top of another one and on click on second Modal(anywhere) the first Modal gets closed.

The reason for this is the Modal component attaches the click event to document instead of backdrop element.

  • version #3.1.0
  • components: Modal

Steps to reproduce issue

  • Open a Modal
  • Have a button in the Modal that will open Another Modal
  • Click anywhere in the Second Modal (opened on top of the first one).

CodePen: http://codepen.io/anon/pen/amdaGw

Note:

In my case the first Modal gets closed and the second Modal becomes un-responsive. However I couldn't reproduce this in codepen.

EDIT: Removed an error screenshot. Could be based on my usage.

Tracking Bootstrap 4 Changes

Here's some changes I've seen between the last release, v4.0.0-alpha.2 and the v4-dev branch

  • outline classes are no longer appended to classnames. ex: .btn-primary-outline -> .btn-outline-primary
  • Label is now Tag. ex: .label -> .tag

Forms

Hi Eddy,

You have done a fantastic job with this package. Any ideas when Forms and other components will become available?

Thanks so much!
Alex

Append to container options: modal, popover, tooltip & dropdown.

Currently only the dropdown has an option that appends the menu content to the body. It's enabled via the tether prop, and is used to auto position the dropdown (below or above button) when content hits the viewport. Not necessarily as an option to append to body but a way to make sure dropdown content is always visible.

It's probably worth letting people opt-out of the append to body behavior. I think it involves some digging into with tether options and how TetherContent children get rendered and positioned.

Todo:

  • Document tether option in dropdown 😅
  • Get a proof of concept with tether option and rendering to body/container vs inline
  • Standardize prop name, in bootstrap.js it's container

Popover arrow is not positioned correctly when given 2 positionals

Given a standard popover `Popover` 
And it is positioned with 2 positions (eg: `bottom right`)
When it is opened
Then it is positions correctly
And it's arrow is not positioned correctly

ss

NOTE: I am not using [email protected] because their npm release is broken and I did not choose to manually install (yet).

(this might be a bootstrap thing)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.