Как сделать заполнитель все еще видимым? - PullRequest
Новая
       7

Как сделать заполнитель все еще видимым?

0 голосов
/ 14 января 2019

Как сделать заполнитель всегда видимым?

Когда я набираю что-то в реагировать на выбор, заполнитель исчезает.

Я пытался возиться с пользовательскими компонентами, но безуспешно ..

Дизайн: where label is placehodler thats is still visible, even if

1 Ответ

0 голосов
/ 21 января 2019

Вот как я бы решил вашу проблему: 

const ValueContainer = ({ children, ...props }) => {
  return (
    components.ValueContainer && (
      <components.ValueContainer {...props}>
        <div style={{color: 'gray', position: 'absolute', top: 8, left: 8, fontSize: 12}}>Label:</div>
        {children}
      </components.ValueContainer>
    )
  );
};

const styles = {
  singleValue: base => ({
    ...base,
    position: 'relative',
    top: 'initial',
    transform: "none"
  }),
  valueContainer: base => ({
    ...base,
    position: 'relative',
    paddingTop: 20
  })
};

function App() {
  return (
    <div className="App">
      <Select
        components={{ ValueContainer }}
        placeholder=""
        styles={styles}
        options={options}
      />
    </div>
  );
}

Как вы видите, это сочетание использования собственного стиля и компонентов.

Прежде всего, я убиваю placeholder и заменяю его на div внутри ValueContainer пользовательского компонента. Оттуда я могу оформить свой фальшивый заполнитель так, как я хочу, и на него не повлияет тот факт, что выбор заполнен или нет.

Во-вторых, я меняю стиль, чтобы увеличить размер ValueContainer и сделать возможным SingleValue relative, так как по умолчанию это absolute.

Здесь живой пример .

...