Smart Select Svelteコンポーネント

Smart Selectを使用すると、通常のフォームセレクトを、グループ化されたラジオ入力を持つ動的なページに簡単に変換できます。このような機能は多くのネイティブアプリで見られます。

これは個別のSvelteコンポーネントではなく、Framework7のSmart Selectコンポーネントと共に<List>および<ListItem>コンポーネントを使用する特定のケースです。

Smart Selectプロパティ

プロパティ	型	説明
<ListItem> プロパティ
smartSelect	ブール値	Smart Select動作を有効にします
smartSelectParams	オブジェクト	Smart Selectパラメータを含むオブジェクト

Smart Selectインスタンスへのアクセス

<ListItem>コンポーネントの.smartSelectInstanceメソッドを呼び出すことで、初期化されたSmart Selectインスタンスにアクセスできます。

<ListItem smartSelect bind:this={component} ... />

<script>
  //
  let component;

  // to get instance in some method
  const smartSelectInstance = component.smartSelectInstance();
</script>

例

smart-select.svelte

<script>
  import { Navbar, Page, List, Block, ListItem } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Smart Select" />
  <Block>
    Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
  </Block>
  <List strongIos outlineIos dividersIos>
    <ListItem title="Fruit" smartSelect>
      <select name="fruits" value="apple">
        <option value="apple">Apple</option>
        <option value="pineapple">Pineapple</option>
        <option value="pear">Pear</option>
        <option value="orange">Orange</option>
        <option value="melon">Melon</option>
        <option value="peach">Peach</option>
        <option value="banana">Banana</option>
      </select>
    </ListItem>
    <ListItem
      title="Car"
      smartSelect
      smartSelectParams={{ openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car' }}
    >
      <select name="car" multiple value={['honda', 'audi', 'ford']}>
        <optgroup label="Japanese">
          <option value="honda">Honda</option>
          <option value="lexus">Lexus</option>
          <option value="mazda">Mazda</option>
          <option value="nissan">Nissan</option>
          <option value="toyota">Toyota</option>
        </optgroup>
        <optgroup label="German">
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
          <option value="mercedes">Mercedes</option>
          <option value="vw">Volkswagen</option>
          <option value="volvo">Volvo</option>
        </optgroup>
        <optgroup label="American">
          <option value="cadillac">Cadillac</option>
          <option value="chrysler">Chrysler</option>
          <option value="dodge">Dodge</option>
          <option value="ford">Ford</option>
        </optgroup>
      </select>
    </ListItem>
    <ListItem title="Mac or Windows" smartSelect smartSelectParams={{ openIn: 'sheet' }}>
      <select name="mac-windows" value="mac">
        <option value="mac">Mac</option>
        <option value="windows">Windows</option>
      </select>
    </ListItem>
    <ListItem title="Super Hero" smartSelect smartSelectParams={{ openIn: 'popover' }}>
      <select name="superhero" multiple value={['Batman']}>
        <option value="Batman">Batman</option>
        <option value="Superman">Superman</option>
        <option value="Hulk">Hulk</option>
        <option value="Spiderman">Spiderman</option>
        <option value="Ironman">Ironman</option>
        <option value="Thor">Thor</option>
        <option value="Wonder Woman">Wonder Woman</option>
      </select>
    </ListItem>
  </List>
</Page>

このドキュメントを改善する

このページ

Smart Selectプロパティ
Smart Selectインスタンスへのアクセス
例