search

Wikiki / bulma-iconpicker

A wonderful customizable icon picker for your Bulma project
MIT License
8 stars 8 forks source link

Clarify documentation #6

Open ghost opened 5 years ago

ghost commented 5 years ago

One doesn't know how to attach the icon picker. In the documentation one cannot find the following code:

<script>
  bulmaIconpicker.attach();
</script>

It would be really useful if one can find the complete HTML structure in the documentation, something like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Bulma Iconpicker</title>
    <!-- Bulma CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
    <!-- Bulma Iconpicker CSS -->
    <link rel="stylesheet" href="bulma-iconpicker/dist/css/bulma-iconpicker.min.css">
    <!-- Icon sets -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  </head>
  <body>
    <!-- Custom HTML -->
    <input type="text" id="iconPicker" data-action="iconPicker" value="fa fa-icon fa-star" />
    <p class="help">Click on icon to open the iconPicker.</p>
    <!-- Custom HTML -->
    <script src="https://wikiki.github.io/node_modules/bulma-extensions/bulma-iconpicker/dist/js/bulma-iconpicker.min.js"></script>
    <script>
      bulmaIconpicker.attach();
    </script>
  </body>
</html>

That saves a lot of time!

Thank you very much for the great bulma icon picker. Kind regards!

ptraverse commented 5 years ago

In the case of using the iconpicker within a React component:

import bulmaIconpicker from "bulma-iconpicker"

componentDidMount() {    
    bulmaIconpicker.attach();
}

render() {

    return (
<input type="text" id="iconPicker" data-action="iconPicker" value="fa fa-icon fa-star" onChange={this.changeType}/>
  )
}
fwolfst commented 5 years ago

@Wikiki Would you accept a Pull Request with that? @is-shining Its super-easy to propose a change to improve a file on Github. Would you be willing to do that when @Wikiki would be happy about it? I'd propose to add a "minimal example" section in the README, or an examples/minimal.html file (but I'd really prefer the README). @is-shining You basically click on the edit-icon here: https://github.com/Wikiki/bulma-iconpicker/blob/master/README.md . Unfortunately, I dont find a sweet tutorial, but its really just a few clicks.

Wikiki commented 5 years ago

Hi,

Sure. Make a PR for that

ahbou commented 5 years ago

@ptraverse @is-shining Did you figure out how to set the inputs' value to the selected icon? Thanks