semantic-ui-react#Placeholder JavaScript Examples

The following examples show how to use semantic-ui-react#Placeholder. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ContactsLoader.js    From profile-store with MIT License 6 votes vote down vote up 
ContactsLoader = ({ isDarkMode }) => {
  return (
    <div>
      {Array.from(new Array(3)).map((_, i) => (
        <Segment key={i} raised inverted={isDarkMode}>
          <Placeholder fluid inverted={isDarkMode}>
            <Placeholder.Header image>
              <Placeholder.Line />
              <Placeholder.Line />
            </Placeholder.Header>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
            <Placeholder.Paragraph>
              <Placeholder.Line length="full" />
              <Placeholder.Line length="full" />
            </Placeholder.Paragraph>
          </Placeholder>
        </Segment>
      ))}
    </div>
  );
}
Example #2
Source File: ILSPlaceholder.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { isLoading, linesNumber, lineLength, children, ...restParams } =
      this.props;

    return isLoading ? (
      <Placeholder {...restParams}>{this.renderLines()}</Placeholder>
    ) : (
      children
    );
  }
Example #3
Source File: ILSPlaceholder.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { isLoading, children, ...restParams } = this.props;
    return isLoading ? (
      <Placeholder {...restParams}>
        <Placeholder.Image />
      </Placeholder>
    ) : (
      children
    );
  }
Example #4
Source File: ILSPlaceholder.js    From react-invenio-app-ils with MIT License 6 votes vote down vote up 
render() {
    const { isLoading, children, ...restParams } = this.props;
    return isLoading ? (
      <Placeholder {...restParams}>
        <Placeholder.Header>
          <Placeholder.Line />
          <Placeholder.Line />
        </Placeholder.Header>
      </Placeholder>
    ) : (
      children
    );
  }
Example #5
Source File: Results.jsx    From ElectionsApp with GNU General Public License v3.0 5 votes vote down vote up 
PlaceholderContainer = style(Placeholder)`
  max-width: 500px !important;
  height: 400px !important;
`
Example #6
Source File: Authed.js    From cra-rich-chrome-ext-example with MIT License 5 votes vote down vote up 
render () {
    const { name, keywords, enabled, stats } = this.props;
    return (
      <div>

        <Container textAlign='center'>
          <Button floated='left' circular icon='cog' onClick={this.onSettings} />
          <Button floated='right' circular icon='sign out' onClick={this.onLogout} />
          <Checkbox toggle disabled={!keywords} defaultChecked={Boolean(enabled)} onChange={this.onCheck} />
        </Container>

        <Segment textAlign='center'>

          {!name && !keywords &&
          <Placeholder fluid>
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
          </Placeholder>
          }

          {name &&
          <Header as='h4'>
            <Icon name='user' />{name}
          </Header>
          }

          {keywords && keywords.map((v, i) =>
            <Label color='red' tag>
              {v}
              {stats &&
                <Label.Detail>{stats[i]}</Label.Detail>
              }
            </Label>
          )}
        
        </Segment>

      </div>
    );
  }