Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More examples on the demo page #1

Closed
victorcarvalhosp opened this issue Feb 9, 2019 · 3 comments
Closed

More examples on the demo page #1

victorcarvalhosp opened this issue Feb 9, 2019 · 3 comments

Comments

@victorcarvalhosp
Copy link

Hello guys! I really liked this components, but I can't find anywhere how to make a two icons component like this:
image
Can you guys please update the demo page with these examples?

Thanks!

@miladfm
Copy link
Owner

miladfm commented Feb 10, 2019

Hi,
tnx for use my project.

For border set 'plain' to true, and use 'p-toggle' component inside of 'p-checkbox'.

here is example, that you want.

<p-checkbox plain="true">

    <p-toggle type="on">
        <i p-icon class="material-icons">wifi</i>
        Wifi on
    </p-toggle>

    <p-toggle type="off">
        <i p-icon class="material-icons">wifi_off</i>
        Wifi off
    </p-toggle>

</p-checkbox>

Link to live example : https://stackblitz.com/edit/ngx-pretty-checkbox-wifi-example

@victorcarvalhosp
Copy link
Author

Thanks!
And how I can make this with radio buttons?

If you can add these instructions on the documentation would be awesome!

@miladfm
Copy link
Owner

miladfm commented Feb 11, 2019

just change p-checkbox to p-radio. then wrap all p-radio components with 'p-radio-group' component

<p-radio-group>
  
  <p-radio plain="true">

      <p-toggle type="on">
          <i p-icon class="material-icons">wifi</i>
          Wifi on 1
      </p-toggle>

      <p-toggle type="off">
          <i p-icon class="material-icons">wifi_off</i>
          Wifi off 1
      </p-toggle>

  </p-radio>

  <p-radio plain="true">

      <p-toggle type="on">
          <i p-icon class="material-icons">wifi</i>
          Wifi on 2
      </p-toggle>

      <p-toggle type="off">
          <i p-icon class="material-icons">wifi_off</i>
          Wifi off 2
      </p-toggle>

  </p-radio>

</p-radio-group>

I will make more examples and update demo page.

@miladfm miladfm closed this as completed May 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants